Текст в виде клавиш клавиатуры с помощью CSS

Клавиши в тексте статьи блога можно выделить интересным образом, нужно внести лишь небольшие изменения в CSS.

Для этого изменим стиль оформления тега <kbd> через:

Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.

kbd{
border:1px solid gray;
font-size:1.1em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Теперь, чтобы придать буквам (тексту) эффект клавиш клавиатуры, то нужно в режиме HTML-редактора обрамить их тегами в виде:

<kbd>Текст</kbd>

Например, так:
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd>

Тогда в статье эта строчка примет такой вид:

Ctrl + Shift + V

Примечание:
Оформление текста в виде клавиш не отобразится в визуальном редакторе, однако появится в режиме предварительного просмотра статьи.

Идею позаимствовала в статье "Add Keyboard Keys Effect To Your Text in Blogger with CSS".

Другой вариант (попроще) будет выглядеть так:

И для этого варианта стиль оформления тега <kbd> будет таким:

kbd{
border:1px solid gray;
font-size:1.1em;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px;
padding:1px 3px;
}

Поделиться в соц. сетях: