Skip to content

Instantly share code, notes, and snippets.

@maxhoffmann
Created December 24, 2011 12:20
Show Gist options
  • Save maxhoffmann/1517237 to your computer and use it in GitHub Desktop.
Save maxhoffmann/1517237 to your computer and use it in GitHub Desktop.
CSS3 Macbook Keys
/**
* 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;
}
<!-- content to be placed inside <body>…</body> -->
<div class="threed">
<div class="key">
<div>H<div>
</div>
</div>
{"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