<body>
<div id="keyboard">
<ul>
<li><a href="#" class="key c27 fn"><span id="esc">esc</span></a></li>
<li><a href="#" class="key c112 fn"><span>F1</span></a></li>
<li><a href="#" class="key c113 fn"><span>F2</span></a></li>
<li><a href="#" class="key c114 fn"><span>F3</span></a></li>
<li><a href="#" class="key c115 fn"><span>F4</span></a></li>
<li><a href="#" class="key c116 fn"><span>F5</span></a></li>
<li><a href="#" class="key c117 fn"><span>F6</span></a></li>
<li><a href="#" class="key c118 fn"><span>F7</span></a></li>
<li><a href="#" class="key c119 fn"><span>F8</span></a></li>
<li><a href="#" class="key c120 fn"><span>F9</span></a></li>
<li><a href="#" class="key c121 fn"><span>F10</span></a></li>
<li><a href="#" class="key c122 fn"><span>F11</span></a></li>
<li><a href="#" class="key c123 fn"><span>F12</span></a></li>
<li><a href="#" class="key fn"><span>Eject</span></a></li>
</ul>
<ul id="numbers">
<li><a href="#" class="key c192"><b>~</b><span>`</span></a></li>
<li><a href="#" class="key c49"><b>!</b><span>1</span></a></li>
<li><a href="#" class="key c50"><b>@</b><span>2</span></a></li>
<li><a href="#" class="key c51"><b>#</b><span>3</span></a></li>
<li><a href="#" class="key c52"><b>$</b><span>4</span></a></li>
<li><a href="#" class="key c53"><b>%</b><span>5</span></a></li>
<li><a href="#" class="key c54"><b>^</b><span>6</span></a></li>
<li><a href="#" class="key c55"><b>&</b><span>7</span></a></li>
<li><a href="#" class="key c56"><b>*</b><span>8</span></a></li>
<li><a href="#" class="key c57"><b>(</b><span>9</span></a></li>
<li><a href="#" class="key c48"><b>)</b><span>0</span></a></li>
<li><a href="#" class="key c189 alt"><b>_</b><span>-</span></a></li>
<li><a href="#" class="key c187"><b>+</b><span>=</span></a></li>
<li><a href="#" class="key c46" id="delete"><span>Delete</span></a></li>
</ul>
<ul id="qwerty">
<li><a href="#" class="key c9" id="tab"><span>tab</span></a></li>
<li><a href="#" class="key c81"><span>q</span></a></li>
<li><a href="#" class="key c87"><span>w</span></a></li>
<li><a href="#" class="key c69"><span>e</span></a></li>
<li><a href="#" class="key c82"><span>r</span></a></li>
<li><a href="#" class="key c84"><span>t</span></a></li>
<li><a href="#" class="key c89"><span>y</span></a></li>
<li><a href="#" class="key c85"><span>u</span></a></li>
<li><a href="#" class="key c73"><span>i</span></a></li>
<li><a href="#" class="key c79"><span>o</span></a></li>
<li><a href="#" class="key c80"><span>p</span></a></li>
<li><a href="#" class="key c219 alt"><b>{</b><span>[</span></a></li>
<li><a href="#" class="key c221 alt"><b>}</b><span>]</span></a></li>
<li><a href="#" class="key c220 alt"><b>|</b><span>\</span></a></li>
</ul>
<ul id="asdfg">
<li><a href="#" class="key c20 alt" id="caps"><b></b><span>caps lock</span></a></li>
<li><a href="#" class="key c65"><span>a</span></a></li>
<li><a href="#" class="key c83"><span>s</span></a></li>
<li><a href="#" class="key c68"><span>d</span></a></li>
<li><a href="#" class="key c70"><span>f</span></a></li>
<li><a href="#" class="key c71"><span>g</span></a></li>
<li><a href="#" class="key c72"><span>h</span></a></li>
<li><a href="#" class="key c74"><span>j</span></a></li>
<li><a href="#" class="key c75"><span>k</span></a></li>
<li><a href="#" class="key c76"><span>l</span></a></li>
<li><a href="#" class="key c186 alt"><b>:</b><span>;</span></a></li>
<li><a href="#" class="key c222 alt"><b>"</b><span>'</span></a></li>
<li><a href="#" class="key c13 alt" id="enter"><span>return</span></a></li>
</ul>
<ul id="zxcvb">
<li><a href="#" class="key c16 shiftleft"><span>Shift</span></a></li>
<li><a href="#" class="key c90"><span>z</span></a></li>
<li><a href="#" class="key c88"><span>x</span></a></li>
<li><a href="#" class="key c67"><span>c</span></a></li>
<li><a href="#" class="key c86"><span>v</span></a></li>
<li><a href="#" class="key c66"><span>b</span></a></li>
<li><a href="#" class="key c78"><span>n</span></a></li>
<li><a href="#" class="key c77"><span>m</span></a></li>
<li><a href="#" class="key c188 alt"><b><</b><span>,</span></a></li>
<li><a href="#" class="key c190 alt"><b>></b><span>.</span></a></li>
<li><a href="#" class="key c191 alt"><b>?</b><span>/</span></a></li>
<li><a href="#" class="key c16 shiftright"><span>Shift</span></a></li>
</ul>
<ul id="bottomrow">
<li><a href="#" class="key" id="fn"><span>fn</span></a></li>
<li><a href="#" class="key c17" id="control"><span>control</span></a></li>
<li><a href="#" class="key option" id="optionleft"><span>option</span></a></li>
<li><a href="#" class="key command" id="commandleft"><span>command</span></a></li>
<li><a href="#" class="key c32" id="spacebar"></a></li>
<li><a href="#" class="key command" id="commandright"><span>command</span></a></li>
<li><a href="#" class="key option" id="optionright"><span>option</span></a></li>
<ol>
<li><a href="#" class="key c37" id="left"><span>◀</span></a></li>
<li>
<a href="#" class="key c38" id="up"><span>▲</span></a>
<a href="#" class="key c40" id="down"><span>▼</span></a>
</li>
<li><a href="#" class="key c39" id="right"><span>▶</span></a></li>
</ol>
</ul>
</div>
<p style="font-family: arial; font-size: 10px; text-align: center; margin: 4px 0 4px 0;">HN commenter <a href="https://news.ycombinator.com/threads?id=farlington">farlington</a>'s response to the CSS challenge on this <a href="https://news.ycombinator.com/item?id=2299806">“Apple Keyboard in pure CSS” Hacker News thread</a>. </br> Found auditing the “Help & Inspiration” citations of Mathew Preziotte's very excellent <a href="https://github.com/preziotte/party-mode">Party Mode repo</a>.</br> Originally modified from <a href="https://dl.dropbox.com/u/921159/Keyboard/page.html">https://dl.dropbox.com/u/921159/Keyboard/page.html</a> by <a href="http://www.probablyinteractive.com">probablyinteractive.com</a>.</p>
</body>
</html>* {margin: 0; padding: 0;}
body {
background: #f8f8f8;}
#keyboard {
z-index: 20;
margin: 50px auto 20px;
width: 800px;
height: 315px;
background: #bbb;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.27, rgb(212,216,219)),
color-stop(0.64, rgb(213,217,220)),
color-stop(0.95, rgb(230,233,235)),
color-stop(1, rgb(191,191,191))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(212,216,219) 27%,
rgb(213,217,220) 64%,
rgb(230,233,235) 95%,
rgb(191,191,191) 100%
);
-moz-border-radius-topleft: 7px 21px;
-moz-border-radius-topright: 7px 21px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 7px 21px;
border-top-right-radius: 7px 21px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 50px 0 0;
-webkit-box-shadow:
inset 0 0 8px #bbb,
0 1px 0 #aaa,
0 4px 0 #bbb,
0 10px 30px #ddd;
-moz-box-shadow:
inset 0 0 8px #bbb,
0 1px 0 #aaa,
0 4px 0 #bbb,
0 10px 30px #ddd;
box-shadow:
inset 0 0 8px #bbb,
0 1px 0 #aaa,
0 4px 0 #bbb,
0 10px 30px #ddd;}
ul {list-style-type: none; width: 784px; margin: 0 auto;}
li {float: left;}
.key{
display: block;
color: #aaa;
font: bold 9pt arial;
text-decoration: none;
text-align: center;
width: 44px;
height: 41px;
margin: 5px;
background: #eff0f2;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #f5f5f5;
-webkit-box-shadow:
inset 0 0 25px #e8e8e8,
0 1px 0 #c3c3c3,
0 2px 0 #c9c9c9,
0 2px 3px #333;
-moz-box-shadow:
inset 0 0 25px #e8e8e8,
0 1px 0 #c3c3c3,
0 2px 0 #c9c9c9,
0 2px 3px #333;
box-shadow:
inset 0 0 25px #e8e8e8,
0 1px 0 #c3c3c3,
0 2px 0 #c9c9c9,
0 2px 3px #333;
text-shadow: 0px 1px 0px #f5f5f5;
filter: dropshadow(color=#f5f5f5, offx=0, offy=1);}
.key:active, .keydown {
color: #888;
background: #ebeced;
margin: 7px 5px 3px;
-webkit-box-shadow:
inset 0 0 25px #ddd,
0 0 3px #333;
-moz-box-shadow:
inset 0 0 25px #ddd,
0 0 3px #333;
box-shadow:
inset 0 0 25px #ddd,
0 0 3px #333;
border-top: 1px solid #eee;}
.fn span {
display: block;
margin: 14px 5px 0 0;
text-align: right;
font: bold 6pt arial;
text-transform: uppercase;}
#esc {
margin: 6px 15px 0 0;
font-size: 7.5pt;
text-transform: lowercase;}
#numbers li a span {
display: block;}
#numbers li a b {
margin: 3px 0 3px;
display: block;}
#numbers li .alt b {display: block;margin: 0 0 3px;}
#numbers li #delete span {
text-align: right;
margin: 23px 10px 0 0;
font-size: 7.5pt;
text-transform: lowercase;}
#qwerty li a span {
display: block;
margin: 13px 0 0;
text-transform: uppercase;}
#qwerty li #tab span {
text-align: left;
margin: 23px 0 0 10px;
font-size: 7.5pt;
text-transform: lowercase;}
#qwerty li .alt b {display: block; margin: 3px 0 0;}
#qwerty li .alt span {margin: 2px 0 0;}
#asdfg li a span {
display: block;
margin: 13px 0 0;
text-transform: uppercase;}
#asdfg li .alt span {margin: 0; text-transform: lowercase;}
#asdfg li .alt b {display: block; margin: 3px 0 0;}
#asdfg li #caps b {
display: block;
background: #999;
width: 4px;
height: 4px;
border-radius: 10px;
margin: 9px 0 0 10px;
-webkit-box-shadow: inset 0 1px 0 #666;
-moz-box-shadow:inset 0 1px 0 #666;
box-shadow:inset 0 1px 0 #666;}
#asdfg li #caps span {
text-align: left;
margin: 10px 0 0 10px;
font-size: 7.5pt;}
#asdfg li #enter span {
text-align: right;
margin: 23px 10px 0 0;
font-size: 7.5pt;}
#zxcvb li a span {
display: block;
margin: 13px 0 0;
text-transform: uppercase;}
#zxcvb li .shiftleft span {
text-align: left;
margin: 23px 0 0 10px;
font-size: 7.5pt;
text-transform: lowercase;}
#zxcvb li .shiftright span {
text-align: right;
margin: 23px 10px 0 0;
font-size: 7.5pt;
text-transform: lowercase;}
#zxcvb li .alt b {display: block;margin: 4px 0 0;}
#zxcvb li .alt span {margin: 0;}
#bottomrow li #fn span, #bottomrow li #control span, #bottomrow li #optionleft span, #bottomrow li #commandleft span {
display: block;
text-align: left;
margin: 31px 0 0 8px;
font-size: 7.5pt;
text-transform: lowercase;}
#bottomrow li #optionright span, #bottomrow li #commandright span {
display: block;
text-align: right;
margin: 31px 8px 0 0;
font-size: 7.5pt;
text-transform: lowercase;}
#bottomrow ol li #left span, #bottomrow ol li #right span, #bottomrow ol li #up span, #bottomrow ol li #down span {
display: block;
margin: 9px 0 0;}
.fn {height: 26px; width: 46px;}
#delete {width: 72px;}
#tab {width: 72px;}
#caps {width: 85px;}
#enter {width: 85px;}
.shiftleft, .shiftright {width: 112px;}
#fn, #control, .option, .command, #spacebar {height: 49px;}
#control {width: 56px;}
.option {width: 46px;}
.command {width: 67px;}
#spacebar {width: 226px;}
#left img, #up img, #down img, #right img {border: none;}
ul ol {list-style-type: none;}
#down {height: 23px; font-size: 8px; }
#up, #left, #right {height: 24px; font-size: 8px; }
#left, #right {margin: 30px 5px 5px;}
#left:active, #right:active {margin: 32px 5px 3px;}
#up {margin: 5px 5px 1px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
#up:active {margin: 8px 5px -2px;}
#down {margin: 0 5px 5px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
#down:Active {margin: 3px 5px 4px;}
#paper1, #paper2, #paper3 {
display: block;
width: 500px;
height: 200px;
background: #fff;
margin: 50px auto 20px;
border: 1px solid #fff;
padding: 20px;
-webkit-box-shadow:
inset 0 0 15px #f9f9f9,
0 0 5px #e5e5e5;
-moz-box-shadow:
inset 0 0 15px #f9f9f9,
0 0 5px #e5e5e5;
box-shadow:
inset 0 0 15px #f9f9f9,
0 0 5px #e5e5e5;}
#paper1 {
margin: 50px auto 20px;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
zoom: 1;}
#paper2 {
margin: -265px auto 0;
-moz-transform: rotate(0.5deg);
-webkit-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);
-ms-transform: rotate(0.5deg);
transform: rotate(0.5deg);
zoom: 1;}
#paper3 {
margin: -240px auto 100px;
-moz-transform: rotate(-1.5deg);
-webkit-transform: rotate(-1.5deg);
-o-transform: rotate(-1.5deg);
-me-transform: rotate(-1.5deg);
transform: rotate(-1.5deg);
zoom: 1;}
#paper3:focus {outline: none;} $(window).keydown(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.c' + key).addClass('keydown');
console.log(key);
});
$(window).keyup(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.c' + key).removeClass('keydown');
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.