Skip to content

Instantly share code, notes, and snippets.

@iamvdo

iamvdo/dabblet.css

Created October 4, 2012 19:14
Show Gist options
  • Save iamvdo/3835776 to your computer and use it in GitHub Desktop.
Save iamvdo/3835776 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
html{font:2em sans-serif;color:#fff;}
div{position:relative;width:150px;height:150px;margin:auto;min-width:150px;max-width:150px;padding:20px;background:#888;transition:all 1s;}
div::after{content:'Pseudo';position:absolute;left:20px;bottom:20px;background:deepskyblue;width:inherit;padding:inherit;}
div:hover,div.on{width:250px;}
button{
display:block;
width:120px;
height:30px;
margin:10px auto;
border:none;
border:1px solid rgba(0,0,0,.5);
border-radius:2px;
color:white;
background:#333;
background:linear-gradient(#444,#202020);
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 rgba(255,255,255,.3);
}
button:hover,button:focus{
background:#444;
background:linear-gradient(#555,#202020);
}
button:active{
background:#111;
background:linear-gradient(#202020,#111);
box-shadow:0 1px 0 rgba(0,0,0,.3) inset,0 1px 0 rgba(255,255,255,.3);
}
Raw
dabblet.html
<div id="div">Contenu</div>
<button onclick="var div = document.getElementById('div');if(div.className =='on'){div.className='';}else{div.className='on'}">:hover</button>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment