Skip to content

Instantly share code, notes, and snippets.

Avatar

Geoffrey Crofte geoffreycrofte

View GitHub Profile
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Jan 21, 2012
Animation in pseudo-element
View dabblet.css
/**
* Animation in pseudo-element
*/
div {
height: 100px;
background: #eee;
}
div:before {
content:" ";
display:inline-block;
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Jan 21, 2012
Animation in pseudo-element
View dabblet.css
/**
* Animation in pseudo-element
*/
div {
height: 100px;
background: #eee;
}
div:before {
content:" ";
display:inline-block;
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Jan 21, 2012
Animation values are strongest !
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%; }
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Jan 21, 2012
Input Search box-sizing
View dabblet.css
/**
* Input Search box-sizing
*/
[type="search"] {
margin: 1em 3em;
-webkit-box-sizing: content-box; /* comment this line to see... */
padding: .5em;
}
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Jan 21, 2012
:before & :after on table elements
View dabblet.css
/**
* :before & :after on table elements
*/
table { border: 1px solid; }
td { border: 1px solid; padding: 1em; }
td:after, td:before { content: " - "; }
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Jan 28, 2012
Loader : demo of pseudo-element animation
View dabblet.css
/**
* Loader : demo of pseudo-element animation
*/
a { display:inline-block; margin-top: 3em}
span {
display:block;
position: relative;
width: 400px;
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Jan 28, 2012
Same effect in mouseover and mouseout
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;
/*
@geoffreycrofte
geoffreycrofte / dabblet.css
Created Feb 27, 2012
Drop Down Menu with CSS3 and Max-height animation
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;
}
@geoffreycrofte
geoffreycrofte / dabblet.css
Created May 18, 2012
Feuilles superposées
View dabblet.css
/**
* Feuilles superposées
*/
/* Petite mise en page */
body {
width: 375px;
margin: 20px auto;
font-family: helvetica, arial, sans-serif;
color: #444;