Skip to content

Instantly share code, notes, and snippets.

Geoffrey Crofte geoffreycrofte

Block or report user

Report or block geoffreycrofte

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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;
You can’t perform that action at this time.