<figure class="keyboard">
<div class="key key-function key-small-type">esc</div>
<div class="key key-function key-small-type key-right">F1</div>
<div class="key key-function key-small-type key-right">F2</div>
<div class="key key-function key-small-type key-right">F3</div>
<div class="key key-function key-small-type key-right">F4</div>
<div class="key key-function key-small-type key-right">F5</div>
<div class="key key-function key-small-type key-right">F6</div>
<div class="key key-function key-small-type key-right">F7</div>
<div class="key key-function key-small-type key-right">F8</div>
<div class="key key-function key-small-type key-right">F9</div>
<div class="key key-function key-small-type key-right">F10</div>
<div class="key key-function key-small-type key-right">F11</div>
<div class="key key-function key-small-type key-right">F12</div>
<div class="key key-function">⏏</div>
<div class="key">§</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">0</div>
<div class="key">+</div>
<div class="key">´</div>
<div class="key key-size-2 key-small-type key-right">delete</div>
<div class="key key-size-2 key-small-type">tab</div>
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
<div class="key">[</div>
<div class="key">]</div>
<div class="key">\</div>
<div class="key key-size-3 key-small-type key-caps-lock">caps lock</div>
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
<div class="key">;</div>
<div class="key">'</div>
<div class="key key-size-3 key-small-type key-right">return</div>
<div class="key key-size-4 key-small-type">shift</div>
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
<div class="key">,</div>
<div class="key">.</div>
<div class="key">/</div>
<div class="key key-size-5 key-small-type key-right">shift</div>
<div class="key key-size-6 key-small-type">ctrl</div>
<div class="key key-size-6 key-small-type">option</div>
<div class="key key-size-2 key-small-type">command ⌘</div>
<div class="key key-size-7"></div>
<div class="key key-size-2 key-small-type key-right">⌘ command</div>
<div class="key key-size-6 key-small-type key-right">option</div>
<div class="key key-size-6 key-small-type key-right">ctrl</div>
</figure>@import url(https://fonts.googleapis.com/css?family=Duru+Sans);
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0px 0px 100px rgba(0,0,0,0.6);
background: url('https://subtlepatterns.com/patterns/purty_wood.png') repeat;
}
figure.keyboard {
position: absolute;
left: 50%;
top: 50%;
margin-left: -377px;
margin-top: -150px;
width: 751px;
height: 305px;
font-family: "Duru Sans", Arial, sans-serif;
padding: 8px 10px;
border: 1px solid rgb(160,160,160);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
box-shadow:
0px 1px 0px rgb(140, 140, 140),
0px 2px 0px rgb(130, 130, 130),
0px 3px 0px rgb(125, 125, 125),
0px 4px 0px rgb(150, 150, 150),
0px 5px 0px rgb(100, 100, 100),
0px -10px 40px rgba(0, 0, 0, 0.4);
border-radius: 7px;
background: rgb(239,239,239);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -moz-linear-gradient(top, rgb(220,220,220) 0%, rgb(216,216,216) 95%, rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%rgb(220,220,220)), color-stop(95%,rgb(216,216,216)), color-stop(100%,rgb(226,226,226)));
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -webkit-linear-gradient(top, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -o-linear-gradient(top, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -ms-linear-gradient(top, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), linear-gradient(to bottom, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
}
figure.keyboard .key {
width: 40px;
height: 40px;
display: block;
float: left;
margin: 5px;
margin-bottom: 6px;
color: rgb(80,80,80);
box-shadow:
0px 1px 0px rgb(250, 250, 250),
0px 2px 0px rgb(250, 250, 250),
0px 3px 0px rgb(250, 250, 250),
0px 4px 0px 1px rgb(130, 130, 130),
0px 4px 0px 2px rgb(70, 70, 70);
background: rgb(249,249,249);
background: -moz-linear-gradient(top, rgb(249,249,249) 0%, rgb(239,239,239) 95%, rgb(226,226,226) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(249,249,249)), color-stop(95%,rgb(239,239,239)), color-stop(100%,rgb(226,226,226)));
background: -webkit-linear-gradient(top, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
background: -o-linear-gradient(top, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
background: -ms-linear-gradient(top, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
background: linear-gradient(to bottom, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
border-radius: 3px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
overflow: hidden;
text-align: center;
padding-top: 13px;
}
/* SIZES */
figure.keyboard .key-function {
padding-top: 4px;
width: 42px;
height: 20px;
font-size: 0.9em;
}
figure.keyboard .key-size-2 {
width: 68px;
}
figure.keyboard .key-size-3 {
width: 79px;
}
figure.keyboard .key-size-4 {
width: 104px;
}
figure.keyboard .key-size-5 {
width: 105px;
}
figure.keyboard .key-size-6 {
width: 58px;
}
figure.keyboard .key-size-7 {
width: 291px;
}
/* SPECIAL */
figure.keyboard .key.key-caps-lock:before {
display: block;
position: absolute;
margin-left: 0px;
margin-top: -10px;
content: " ";
width: 5px;
height: 5px;
background: rgb(50, 75, 60);
border-radius: 100%;
}
/* STYLES */
figure.keyboard .key-small-type {
font-size: 0.5em;
line-height: 40px;
vertical-align: bottom;
text-align: left;
padding-left: 0.4em;
}
figure.keyboard .key-small-type.key-right {
text-align: right;
padding-right: 0.4em;
}
figure.keyboard .key-function.key-small-type {
font-size: 0.7em;
padding-right: 2px;
padding-top: 2px;
text-align: center;
line-height: 18px;
}
figure.keyboard .key-function.key-small-type.key-right {
font-size: 8px;
padding-top: 5px;
text-align: right;
}
External CSS
This Pen doesn't use any external CSS resources.