Skip to content

Instantly share code, notes, and snippets.

@rlemon
Created March 1, 2012 14:23
Show Gist options
  • Save rlemon/1950126 to your computer and use it in GitHub Desktop.
Save rlemon/1950126 to your computer and use it in GitHub Desktop.
Ubuntu Keyboard with KBD tags and CSS
<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>
// 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);
});
});​
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment