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

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

компьютерная клавиатура



Для реализации используется стандартный тег 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


23 комментария:

  1. Вика,привет! А как скачать готовый код? Что - то я не поняла.Я бы установила у себя такое - Для более удобного поиска в списке статей, воспользуйтесь комбинацией клавиш Ctrl + F в появившемся окне введите ключевое слово и нажмите клавишу Enter.

    ОтветитьУдалить
  2. Т.е первую часть я сделала, а второе предложение (в появившемся окне введите ключевое слово и нажмите клавишу Enter)как?

    ОтветитьУдалить
    Ответы
    1. Ирина, вот так копируй целиком
      Для более удобного поиска в списке статей, воспользуйтесь комбинацией клавиш</b> <kbd>Ctrl</kbd> + <kbd>F</kbd> <b>в появившемся окне введите ключевое слово и нажмите клавишу</b> <kbd>Enter</kbd>.
      <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 rgbaundefined0, 0, 0, 0.1);
      text-transform: capitalize;}</style>

      Удалить
  3. Я ни у кого не видела такие кнопки, и совсем не поняла, для чего они нужны.

    ОтветитьУдалить
    Ответы
    1. Ирина, что я могу сделать. Вроде всё понятно.

      Удалить
  4. Привет! Технику я относительно понял, но вот в чём смысл такой фишки, что-то не додул. Впрочем, в моем почтенном возрасте, даже имея звания и регалии, уже мало что можно додуть. Хотя до состояния почтенного г-на Президента США мне ещё далеко.

    ОтветитьУдалить
  5. Семён, упаси Бог до состояния почтенного г-на Президента США. А это просто фишка. Выделяют же цитаты в тексте, картинки вставляют, шрифт разным цветом и прочее. Чтобы обратить внимание посетителя. Ну просто считайте, что это типа картинка с изображением клавиш.

    ОтветитьУдалить
  6. Спасибо, Вика сейчас попробую!

    ОтветитьУдалить
  7. К сожалению не работает у меня.

    ОтветитьУдалить
  8. Ирина, на почту мне скинь что ты вставляешь. Это не может не работать простейший код.

    ОтветитьУдалить
  9. Ирина, вставляй в режиме HTML в самом верху страницы
    Для более удобного поиска в списке статей, воспользуйтесь комбинацией клавиш <kbd>Ctrl</kbd> + <kbd>F</kbd> в появившемся окне введите ключевое слово и нажмите клавишу <kbd>Enter</kbd>.
    <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 rgbaundefined0, 0, 0, 0.1);
    text-transform: capitalize;}</style>
    Убрала несколько тегов фарматирования

    ОтветитьУдалить
  10. НЕ знаю что было тогда- вставляла все тоже самое вроде бы. Но сейчас работает! Спасибо, Вика. Только наползает на таблицу, пришлось вставить значок, чтобы бал зазор. Я бы сделала фон кнопок тоже синим! Это можно? Я попробовала, но там только тень получилась синяя.

    ОтветитьУдалить
  11. Ирина , вставь нужный background по аналогии с первым кодом как -то так <style> kbd1 { background: #ccc;

    ОтветитьУдалить
  12. Ой, только 1 убери после kbd

    ОтветитьУдалить
  13. Ну вот...теперь и вовсе красота- лепотаааааа!!!
    Спасибо Вика!
    Мне вредно читать твои посты.!!!! Я тут же сначала хочу себе, но потом, понимаю, что что - то уже лишнее! А так хочется! Но, помню давнишние твои слова мне, "чайнику" из серии "не все то золото, что блестит" А я воронаааАА!

    ОтветитьУдалить
  14. Я поставила этот код на страницу "Содержание". Там теперь и удобно искать, и красиво смотреть!

    ОтветитьУдалить
  15. Ирина, я уже сбегала посмотрела до твоего комментария. Ну красиво же. А то некоторые не понимают для чего. А я ещё помню, когда ты отмахивалась и говорила - "нет, нет, эти коды не для меня и ничего в них даже понимать не хочу". А я ответила тогда - "хочешь, не хочешь, а со временем придётся кое - что понять. " Красивый же блог получился. Любому посетителю приятно. Побродит лишнюю минуточку. Содержание само по себе важно, но дизайн тоже очень важен. Тем более из старых Блоггеровских шаблонов сделать вполне полноценный сайт с точки зрения дизайна, это круто.

    ОтветитьУдалить
    Ответы
    1. Так твоя уверенность меня и сподобила!. Ну, а если честно, ты очень даже помогаешь, без тебя я бы не полезла. Очень важно, когда кто - то может помочь!. Ну, я в принципе такая... сначала всегда сомневаюсь в той области, в которой я ни бум бум , но раз надо- значит надо. ! Я по принципу " раз другие смогли- значит и я смогу"
      Но до сих пор- не люблю я эти коды...фууу.Брррр...
      Спасибо тебе Викуся, за оценку. Всегда важна оценка спеца!!!( Извини за "Викусю", у меня так невестку зовут, я пр привычке!!

      Удалить
  16. Викуша, извините за сухой ответ в текущем посте. Черт его знает. Но, честно говоря, не стыдно. В критических ситуациях я не прятался ни за чьи спины. Как тот пацан - солист. Вот сейчас думаю, а полез бы я сегодня. Не уверен. Слава Богу, что это было тогда, когда я был уверен. То-есть, что значит "уверен"?! Горит или стреляют - лезешь не думая. Думаешь потом, когда всё позади... Не знаю... Ужасно. Я уже писал, что часто просыпаюсь в прединфарктом состоянии... А уже всё - сон. Не знаю, привелось ли Вам испытывать такое. Слава Богу, если нет. Простите. Сентиментален стал.

    ОтветитьУдалить
    Ответы
    1. Да всё нормально Семён. Повелось , имею в виду лезть не думая. С тем же пожаром. Да и похлеще было. Вы не один такой. Гладко ни когда не бывает.

      Удалить
  17. Интересная фишка! Мне пока такие клавиатуры не попадались. Но ты права: их можно встретить на специализированных сайтах)

    Спасибо за подробные инструкции!

    ОтветитьУдалить
    Ответы
    1. Виктория, спасибо за комментарий. Всего лишь небольшая картинка, но оригинальная вполне.

      Удалить
  18. Ирина Корсун, меня хоть Викуша, хоть Викуся, хоть Викулька назови. Привыкла, да и что в этом такого. Как и тебя, к примеру - Ира, Иришка, Иринка и т.д.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML