Skip to content

Instantly share code, notes, and snippets.

@maxhoffmann

maxhoffmann/dabblet.css

Created December 24, 2011 12:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maxhoffmann/1517237 to your computer and use it in GitHub Desktop.
Save maxhoffmann/1517237 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Macbook Keys
Raw
dabblet.css
/**
* CSS3 Macbook Keys
*/
body {
background: #eee;
text-align: center;
}
.threed {
perspective: 400;
perspective-origin: top;
width: 50px;
}
.key {
position: relative;
width: 50px;
height: 40px;
padding: 10px 0 0 0;
font: 24px sans-serif;
color: white;
background: black;
background: linear-gradient(bottom,#333,#000);
border-radius: 6px;
transform: rotateX(50deg);
border-top: 0px solid white;
border-left: 2px solid gray;
border-right: 2px solid gray;
border-bottom: 7px solid gray;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="threed">
<div class="key">
<div>H<div>
</div>
</div>
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