Keyboard styles

by jamessouth

HTML

<div>
    <p><kbd>Esc</kbd> &nbsp; &nbsp; <kbd>F1</kbd><kbd>F2</kbd><kbd>F3</kbd><kbd>F4</kbd> &nbsp; <kbd>F5</kbd><kbd>F6</kbd><kbd>F7</kbd><kbd>F8</kbd> &nbsp; <kbd>F9</kbd><kbd>F10</kbd><kbd>F11</kbd><kbd>F12</kbd> &nbsp;<kbd>PrSn</kbd><kbd>ScLk</kbd><kbd>Brek</kbd>
    </p>
    <p><kbd>&nbsp;`&nbsp;</kbd><kbd>&nbsp;1&nbsp;</kbd><kbd>&nbsp;2&nbsp;</kbd><kbd>&nbsp;3&nbsp;</kbd><kbd>&nbsp;4&nbsp;</kbd><kbd>&nbsp;5&nbsp;</kbd><kbd>&nbsp;6&nbsp;</kbd><kbd>&nbsp;7&nbsp;</kbd><kbd>&nbsp;8&nbsp;</kbd><kbd>&nbsp;9&nbsp;</kbd><kbd>&nbsp;0&nbsp;</kbd><kbd>&nbsp;-&nbsp;</kbd><kbd>&nbsp;=&nbsp;</kbd><kbd>Backspace</kbd> &nbsp;<kbd>Ins&nbsp;</kbd><kbd>Home</kbd><kbd>PgUp</kbd> &nbsp;
        <br>
<kbd>Tab&nbsp;&nbsp;</kbd><kbd>&nbsp;q&nbsp;</kbd><kbd>&nbsp;w&nbsp;</kbd><kbd>&nbsp;e&nbsp;</kbd><kbd>&nbsp;r&nbsp;</kbd><kbd>&nbsp;t&nbsp;</kbd><kbd>&nbsp;y&nbsp;</kbd><kbd>&nbsp;u&nbsp;</kbd><kbd>&nbsp;&nbsp;i&nbsp;&nbsp;</kbd><kbd>&nbsp;o&nbsp;</kbd><kbd>&nbsp;p&nbsp;</kbd><kbd>&nbsp;&nbsp;[&nbsp;&nbsp;</kbd><kbd>&nbsp;&nbsp;]&nbsp;&nbsp;</kbd><kbd>&nbsp;&nbsp;\&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd> &nbsp;<kbd>Del&nbsp;</kbd><kbd>&nbsp;End&nbsp;</kbd><kbd>PgDn</kbd>
        <br>
<kbd>Caps&nbsp;&nbsp;&nbsp;</kbd><kbd>&nbsp;a&nbsp;</kbd><kbd>&nbsp;s&nbsp;</kbd><kbd>&nbsp;d&nbsp;</kbd><kbd>&nbsp;f&nbsp;</kbd><kbd>&nbsp;g&nbsp;</kbd><kbd>&nbsp;h&nbsp;</kbd><kbd>&nbsp;&nbsp;j&nbsp;&nbsp;</kbd><kbd>&nbsp;k&nbsp;</kbd><kbd>&nbsp;&nbsp;l&nbsp;&nbsp;</kbd><kbd>&nbsp;;&nbsp;</kbd><kbd>&nbsp;&nbsp;'&nbsp;&nbsp;</kbd><kbd>&nbsp;&nbsp;Enter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd>
       ...

CSS

kbd {
    padding: 0.1em 0.6em;
    border: 1px solid #ccc;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f7f7f7;
    color: #333;
    -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
    border-radius: 3px;
    display: inline-block;
    margin: 0 0.1em;
    text-shadow: 0 1px 0 #fff;
    line-height: 1.4;
    white-space: nowrap;
}