Skip to content

Instantly share code, notes, and snippets.

@gdmachado

gdmachado/dabblet.css

Created March 23, 2012 00:42
Show Gist options
  • Save gdmachado/2165853 to your computer and use it in GitHub Desktop.
Save gdmachado/2165853 to your computer and use it in GitHub Desktop.
Download ZIP
Learning stuff
Raw
dabblet.css
/**
* Learning stuff
*/
body {
background-color: #555;
}
.button {
border: 1px solid rgba(0,0,0,.4);
background-color: #444;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
box-shadow: rgba(255,255,255,.4) 0 1px 0 inset,
rgba(255,255,255,.3) 0 25px 30px -12px inset,
rgba(0,0,0,.6) 0 1px 2px;
text-shadow: 0 -1px 1px black, 0 -1 2px black;
vertical-align: middle;
font: bold 14pt "Helvetica Neue";
}
.button:before {
content: "✔ ";
text-shadow: 0 0 10px white;
}
.fun {
position: absolute;
left: 50%;
width: 200px;
height: 200px;
border-radius: 100px 100px;
background-color: rgba(255,255,117,1);
box-shadow: rgba(255,255,117, 1) 0 0 5px,
rgba(255,255,117, 1) 0 0 10px,
rgba(255,255,117, 1) 0 0 15px,
rgba(255,255,117, 1) 0 0 50px;
transition:box-shadow 1s;
}
.fun:hover {
box-shadow: none;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<span class="button">Hey guys!</span>
<span class="button">This is a button</span>
<span class="button">Another!</span>
<span class="button">Whatever!</span>
<div class="fun"/>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment