nielsdoorn

/**
 * A small first experiment
 */
 
@keyframes fooanim {
        0%   {width:100px;height:100px;left:50px;top:50px; }
        50%  {width:150px;height:150px;left:25px;top:25px;line-height:150px; }
        100% {width:100px;height:100px;left:50px;top:50px; }
}

nielsdoorn

/**
 * Voorbeeld animatie
 */
 
@-webkit-keyframes footeranimatie { /* declaratie van de animatie van de footer */
	0% { left: 5px;}
	25% { top: 50px; }
	50% { left: 300px;}
	75% { top: -50px; }
	100% { left: 5px;} 

nielsdoorn

/**
 * Voorbeeld 3 kolommen
 */

html {
  background-image: linear-gradient(top, #092E9E 0%, #247CBF 100%);
}

div#container {
  width:800px;

nielsdoorn

/**
 * Voorbeeld 3 kolommen eenvoudige opmaak
 */

html, body {
  height:100%;
  background-color:#333;
}

article, aside {

nielsdoorn

/**
 * animation with sprites (explosion)
 */
 
 @keyframes ninja {
	0% { background-position: -0px 0px;}
	1.99% { background-position: -0px 0px;}
	2% { background-position: -89px 0px;}
	3.99% { background-position: -89px 0px;}
	4% { background-position: -178px 0px;}

nielsdoorn

/**
 * Rene Margritte...
 * The HTMl is ugly, but the CSS is small and easy to understand
 * I could have gone for nicer HTML, but that would have had some
 * impact on the CSS. The HTML was destined to be large, so I choose
 * to make it ugly and large instead of making it large and nice and
 * making the CSS ugly and large.
 */
 
 /*

nielsdoorn

/** chat bubbles test */

.chat-bubble {
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:40px auto;
  padding:10px;
  position:relative;
  text-align:center;

nielsdoorn

/** chat bubbles test */

.chat-bubble {
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:40px auto;
  padding:10px;
  position:relative;
  text-align:center;

nielsdoorn

/**
 * Text in HTML
 */

body {
background: #f06;
background: linear-gradient(45deg, lightblue, white);
min-height:100%;
}

nielsdoorn

/**
 * Very simple css3 polaroid styling
 */
body{
background: #f06;
background: linear-gradient(45deg, orange, yellow);
min-height:100%;
}
#photo{
width:200px;