geoffreycrofte

/**
 * Animation in pseudo-element
 */
div { 
height: 100px;
background: #eee;
}
div:before {
content:" ";
display:inline-block;

geoffreycrofte

/**
 * Animation in pseudo-element
 */
div { 
height: 100px;
background: #eee;
}
div:before {
content:" ";
display:inline-block;

geoffreycrofte

/**
 * Animation values are strongest !
 */
 
/*
 * just hover the white space to stop the animation
 * and and return the block to its original coordinates 
 */
 
html,body { height:100%; }

geoffreycrofte

/**
 * Input Search box-sizing
 */

[type="search"] {
margin: 1em 3em;
-webkit-box-sizing: content-box; /* comment this line to see... */
padding: .5em;
}

geoffreycrofte

/**
 * :before & :after on table elements
 */
 
 table { border: 1px solid; }
 td { border: 1px solid; padding: 1em; }
 td:after, td:before { content: " - "; }

geoffreycrofte

/**
 * Loader : demo of pseudo-element animation
 */

a { display:inline-block; margin-top: 3em}

span {
display:block;
position: relative;
width: 400px;

geoffreycrofte

/**
 *
 * Same effect in mouseover and mouseout
 * Different effects in : http://codepen.io/CreativeJuiz/pen/gnIJG
 *
 */

div {
	width: 90px; height: 90px;
	margin: 3em;

geoffreycrofte

/**
 * Curved box Shadow
 * Alternative  : http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow
 */
div {
	margin: 3em;
	width: 500px;
	height: 240px;
	background-color: #f6f6f6;
	/* 

geoffreycrofte

/**
 * Drop Down Menu with CSS3 and Max-height animation
 * an idea inspirated from http://jsfiddle.net/leaverou/zwvNY/
 * visit http://www.creativejuiz.fr/blog/ for fun.
 */
a { 
	display:block; 
	color: #fff; 
	text-decoration:none;
}

geoffreycrofte

/**
 * Feuilles superposées
 */

/* Petite mise en page */
body {
	width: 375px;
	margin: 20px auto;
	font-family: helvetica, arial, sans-serif;
	color: #444;