Ubuntu Keyboard with KBD tags and CSS

demo.markdown

View the Demo here!

markup.html

<p><kbd data-alt="~&nbsp;">`&nbsp;</kbd><kbd data-alt="!">1</kbd><kbd data-alt="@">2</kbd><kbd data-alt="#">3</kbd><kbd data-alt="$">4</kbd><kbd data-alt="%">5</kbd><kbd data-alt="^">6</kbd><kbd data-alt="&">7</kbd><kbd data-alt="*">8</kbd><kbd data-alt="(">9</kbd><kbd data-alt=")">0</kbd><kbd data-alt="_">-</kbd><kbd data-alt="+">=</kbd><kbd>Backspace</kbd></p>

<p><kbd>Tab&nbsp;&nbsp;</kbd><kbd>Q</kbd><kbd>W</kbd><kbd>E</kbd><kbd>R</kbd><kbd>T</kbd><kbd>Y</kbd><kbd>U</kbd><kbd>I</kbd><kbd>O</kbd><kbd>P</kbd><kbd data-alt="{">[</kbd><kbd data-alt="}">]</kbd><kbd data-alt="|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">\&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd></p>

<p><kbd>CapsLock</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd><kbd>F</kbd><kbd>G</kbd><kbd>H</kbd><kbd>J</kbd><kbd>K</kbd><kbd>L</kbd><kbd data-alt=":">;</kbd><kbd data-alt="&quot;">'</kbd><kbd>&nbsp;&nbsp;Enter</kbd></p>

<p><kbd class='shift'>Shift&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd><kbd>Z</kbd><kbd>X</kbd><kbd>C</kbd><kbd>V</kbd><kbd>B</kbd><kbd>N</kbd><kbd>M</kbd><kbd data-alt="<">,</kbd><kbd data-alt=">">.</kbd><kbd data-alt="?">/</kbd><kbd class='shift'>&nbsp;&nbsp;&nbsp;&nbsp;Shift</kbd></p>

<p><kbd>Ctrl&nbsp;</kbd><kbd><img src="http://linux.bihlman.com/wp-content/plugins/wp-useragent/img/24/os/ubuntu-2.png" /></kbd><kbd>Alt</kbd><kbd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd><kbd>Alt</kbd><kbd>PrtSc</kbd><kbd>Ctrl&nbsp;</kbd>
​

script.js

// requires jQuery
$('.shift').on('click', function() {
    $('.shift').toggleClass('selected');
    $('[data-alt]').each(function() {
        var prev = $(this).html();
        $(this).html(this.getAttribute('data-alt'));
        this.setAttribute('data-alt', prev);
    });
});​

styles.css

kbd {
    color: #444;
    line-height: 2.5em;
    cursor: pointer;
    padding: 0.35em 0.9em 0.55em 0.5em;
    margin: 0.15em;
    white-space: nowrap;
    background-color: #E5E5E5;
    border-top: solid 0.1em #CCC;
    border-right: solid 0.2em #AAA;
    border-bottom: solid 0.3em #999;
    border-left: solid 0.2em #BBB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

kbd:hover {
    color: #222;
    background-color: #EFEFEF;
}
kbd:active, kbd.selected {
    border-top: solid 0.2em #999;
    border-right: solid 0.2em #BBB;
    border-bottom: solid 0.2em #CCC;
    border-left: solid 0.2em #AAA;
}
kbd img {
    padding-left: 0.25em;
    vertical-align: middle;
    height: 22px; width: 22px;
    opacity: 0.8;
}
kbd:hover img {
    opacity: 1;
}
​