Skip to content

Instantly share code, notes, and snippets.

@ninjascribble

ninjascribble/dabblet.css

Created September 21, 2012 19:04
Show Gist options
  • Save ninjascribble/3763265 to your computer and use it in GitHub Desktop.
Save ninjascribble/3763265 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body * {
box-sizing: border-box;
font: 16px Arial, sans-serif;
}
strong {
background: rgba(255, 0, 0, .4);
color: #fff;
cursor: pointer;
display: block;
float: left;
font-weight: bold;
margin: 0 5px;
padding: 40px;
text-align: center;
text-transform: uppercase;
transition-property: transform, background, color;
transition-duration: 1s;
transition-delay: .25s;
transform: rotate(0deg);
width: 13.5%;
}
strong:hover {
background: rgba(255, 255, 255, .8);
color: #000;
transition-property: transform, background, color;
transition-duration: 1s;
transition-delay: .25s;
transform: rotate(180deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<strong>Mister #1</strong>
<strong>Mister #2</strong>
<strong>Mister #3</strong>
<strong>Mister #4</strong>
<strong>Mister #5</strong>
<strong>Mister #6</strong>
<strong>Mister #7</strong>
Raw
settings.json
{"view":"separate","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