Оформление названий клавиш в тексте с помощью тега KBD и стилей CSS
+1

Тег <kbd> используется для обозначения текста, набираемого на клавиатуре или названия клавиш. Многие «веб-писатели» забывают использовать тег <kbd> в своей работе, другие просто его игнорируют, и выделяют обозначения клавиш в тексте жирным шрифтом, курсивом или тегом <code>. Выделение тегом <code> выдает очень близкий результат к выделению с помощью тега <kbd>. Однако, задумайтесь, зачем использовать для выделения названий клавиш и набираемого на клавиатуре текста тег <code>, если именно для этой задачи в HTML4 и HTML5 существует специальный парный тег <kbd>.
А тег <code> приберегите для оформления строк кода.

По умолчанию, браузеры оформляют текст, заключенный в тег <kbd> моноширинным шрифтом

Пример

<p>Нажмите, пожалуйста, <kbd>Ctrl</kbd>&nbsp;+&nbsp;<kbd>Alt</kbd></p>

Результат

Применение тега KBD в HTML (оформление по умолчанию)

Применение тега KBD в HTML (оформление по умолчанию)

Видим, что названия клавиш выделены моноширинным шрифтом. Уже хорошо!

Но, все же, не так наглядно, как хотелось бы.

Сейчас я покажу как это исправить.

Оформляем названия клавиш в тексте с помощью тега <kbd> и стилей CSS

<p>Нажмите, пожалуйста, <kbd>Ctrl</kbd>&nbsp;+&nbsp;<kbd>Alt</kbd></p>
kbd {
	border-color: #A9A9A9 #8C8C8C #C6C6C6 #C0C0C0;
	border-radius: 5px 5px 5px 5px;
	border-style: solid;
	border-width: 1px 1px 3px;
	box-shadow: -1px 1px 1px #484848, 1px 1px 1px #484848;
	font-family: "Courier New",Courier,monospace;
	font-size: 12px;
	/*margin: 0 4px;*/
	padding: 2px 6px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	text-transform: capitalize;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(45deg,  rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%); /* IE10+ */
	background: linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Результат

Применение тега KBD в HTML (оформление по умолчанию)

Применение тега KBD в HTML (оформление по умолчанию)

Попробовать в DemoPlay

Хочу заметить, что в коде HTML между перечислениями названий клавиш лучше использовать символ неразрывного пробела  . В этом случае любая указанная комбинация клавиш будет размещена на одной строке. Код HTML для символа неразрывного пробела и других символов вы можете посмотреть в справочнике.

+1
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: Разное теги: , . Прямая ссылка на запись.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *