View dabblet.css
/** | |
* Animation in pseudo-element | |
*/ | |
div { | |
height: 100px; | |
background: #eee; | |
} | |
div:before { | |
content:" "; | |
display:inline-block; |
View dabblet.css
/** | |
* Animation in pseudo-element | |
*/ | |
div { | |
height: 100px; | |
background: #eee; | |
} | |
div:before { | |
content:" "; | |
display:inline-block; |
View dabblet.css
/** | |
* 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%; } |
View dabblet.css
/** | |
* Input Search box-sizing | |
*/ | |
[type="search"] { | |
margin: 1em 3em; | |
-webkit-box-sizing: content-box; /* comment this line to see... */ | |
padding: .5em; | |
} |
View dabblet.css
/** | |
* :before & :after on table elements | |
*/ | |
table { border: 1px solid; } | |
td { border: 1px solid; padding: 1em; } | |
td:after, td:before { content: " - "; } | |
View dabblet.css
/** | |
* Loader : demo of pseudo-element animation | |
*/ | |
a { display:inline-block; margin-top: 3em} | |
span { | |
display:block; | |
position: relative; | |
width: 400px; |
View dabblet.css
/** | |
* | |
* Same effect in mouseover and mouseout | |
* Different effects in : http://codepen.io/CreativeJuiz/pen/gnIJG | |
* | |
*/ | |
div { | |
width: 90px; height: 90px; | |
margin: 3em; |
View dabblet.css
/** | |
* 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; | |
/* |
View dabblet.css
/** | |
* 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; | |
} |
View dabblet.css
/** | |
* Feuilles superposées | |
*/ | |
/* Petite mise en page */ | |
body { | |
width: 375px; | |
margin: 20px auto; | |
font-family: helvetica, arial, sans-serif; | |
color: #444; |
OlderNewer