На просторах интернета встретил, что в тексте статей иногда клавиатурные комбинации изображаются с помощью имитации изображений кнопок. Делается это с помощью тега <kbd> и его оформлением в css.
Использую (upd. точнее использовал) в статьях два вида оформления тэга <kbd>: для отображения кнопок и для отображения пунктов меню в программах, по которым нужно пройти.
Добавьте в Ваш css файл следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
kbd{ margin:0; padding:0; border:0; outline:0; font-size:100%; font-family:monospace, sans-serif; vertical-align:baseline; background:transparent; border-color:#e6e6e6 #bebebe #bebebe #e6e6e6; border-style:solid; border-width:1px 3px 4px; padding:0 5px; background-color:#d2d2d2; background-color:rgba(210,210,210,0.9); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } kbd.menu { -moz-border-radius:3px; -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset; -webkit-border-radius:3px; -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset; background-color:#f7f7f7; border:1px solid #ccc; border-radius:3px; box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset; color:#333; display:inline-block; font-family:monospace, sans-serif; font-size:100%; line-height:1.4; margin:0 .1em; padding:.1em .6em; text-shadow:0 1px 0 #fff; } |
Теперь, если вы пропишите в html коде следующее:
|
1 2 3 |
<p>Нажмите клавиши <kbd>Ctrl</kbd>+<kbd>Ё</kbd></p> <p>Пройдите в меню программы <kbd class="menu">Preferences</kbd> → <kbd class="menu">Package Control</kbd></p> |
то Вы получите следующее:
Первый вариант оформления kbd нашел на сайте http://itechblog.org