Skeuomorphic keys for keyboard shortcut documentation

Question

I'm writing up some documentation for the keyboard shortcuts for some software. The documentation is in html/css/js. I'd like to have images (skeuomorphic?) of a control and c key instead of just having [ctrl] + [c]. I have seen this done on the web, but I am not finding any solutions with my web searches.

How can I render the Control and C keys as images using HTML/CSS/JS? I am happy to use a third party party library to achieve the effect.

Answer 1

The following CSS will style text wrapped in <kbd></kbd> tags exactly the same as the buttons you see here at StackOverflow.

CSS

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

HTML

<kbd>⌘</kbd>+<kbd>X</kbd><br><br>

<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>

Output

⌘+X

Ctrl+Alt+Delete

Answer 2

There are pure CSS options for creating realistic, professional-quality key cap graphics. Google "keyboard key css", for a larger list, but my favorite is KEYS.css: it's super simple to use:

<link rel="stylesheet" href="keys.css" type="text/css" />
...
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>

renders as: