Текст в виде клавиш клавиатуры с помощью 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;
}


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



1 комментарий :

В комментариях есть возможность вставлять картинку:
[img]URL на картинку[/img]
а также использовать смайлы и HTML-теги:
<b>жирный шрифт</b>
<i>курсив</i>
<a href="URL">текст ссылки</a>