кнопки изображения клавиатуры в тексте сообщения

Доброго времени суток, друзья. Конечно же, вы видели на некоторых сайтах такие кнопки в виде компьютерной клавиатуры в тексте поста. Эта простая фишка, которые достаточно симпатично и прикольно смотрится. Часто её используют авторы, которые пишут статьи с кодами или о работе с компьютером. Но видела на сайтах и других тематик. Пару слов об этом в конце статьи.

Для реализации используется стандартный тег kbd и задаются стили.

Элемент <kbd> (от англ. keyboard — клавиатура) используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. 

Сам результат вы можете видеть прямо в этом сообщении ниже.  Код совершенно простой. 

Вот для примера просто закрашивание текста клавиш.

Для быстрого закрашивания выделенной области цветом переднего плана используйте комбинацию клавиш Alt+Backspace или Alt+Delete.

Здесь самый стандартный код и просто текст 

<style>   kbd1 {    background: #ccc;    border-radius: 3px;>    padding: 0 4px;   }  </style> Для быстрого закрашивания выделенной области цветом переднего планаиспользуйте комбинацию клавиш <kbd1>Alt</kbd1>+<kbd1>Backspace</kbd1> или <kbd1>Alt</kbd1>+<kbd1>Delete</kbd1>.  

А сейчас с помощью стилей CSS задаём вид кнопки - тень, округление углов, рамку, цвета 

<style>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;padding: 2px 6px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: capitalize;}</style>

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Получаем следующие

Чтобы найти нужное слово на странице, нажмите сочетание клавиш на компьютере  Ctrl + F

В сообщении Блоггер готовый код устанавливается в формате HTML в нужном месте сообщения.

Где ещё можно применить кнопки клавиатуры. Первое, что пришло на ум - на странице карты блога. Когда посетителям  подсказать, как найти нужный пост по ключевым словам. Посмотрите у меня здесь.

Итог - тег <kbd> используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. 

Всем добра и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email