Alexis Alexis - 4 days ago 5
CSS Question

Skeuomorphic keys for keyboard shortcut documentation

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

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

Comments