Медная поляна

Рассказ о работе различных программ бывает полезно сопроводить применяемыми клавиатурными сочетаниями. Оказывается, В HTML 5 (как и в HTML 4) для таких случаев существует специальный парный тег — <kbd> .

Добавив CSS-правила, можно добиться некоего подобия настоящих клавиш:

kbd {
    padding: 0 3px; border-width: 2px 3px 4px; border-style: solid; border-color: #cdcdcd #c9c9c9 #9a9a9a #c0c0c0;
    font-size: 11px; color: #000; background: #ececec;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
<kbd>Win</kbd> + <kbd>D</kbd> ...

Win + D — свернуть/восстановить все окна в Windows.

Кстати, использование несемантичной конструкции <small style="…"><span style="…"> клавиша</span></small> в Википедии — пример как делать не следует.

2 комментария

librarian

Спасибо :) Полезно :)

Cuprum, спасибо за статейку, она меня вдохновила на видеоурок.

Разместил на своем сайте :)

http://master-css.com/page/sozdanie-klavish-klaviatury-v-css-bez-grafiki

Пиши побольше интересных статей.

С уважением, Сергей.