Вставляем кнопки клавиатуры в текст страницы при помощи CSS-3

  Александр Маврин   11 комментариев

Кнопки клавиатурыЗдравствуйте, уважаемые читатели, рад приветствовать каждого. Меня как-то просили рассказать о том, как я вставляю симпатичные кнопки изображения клавиатуры в текст страницы. Посмотреть пожно здесь и здесь. Ну и например вот так: Если текст на странице вам кажется маленьким, нажмите Ctrl + до необходимого вам разрешения.

Делается это при помощи тега kbd. Это стандартный HTML тег. Если внутри этого тега будет какой-то текст, то он будет отображен, как моноширинный, то есть как печатный. Естественно к этому тегу были добавлены CSS стили, а именно: Рамка, скругление углов, тени и немного был стилизован текст. Код написал не я. Взял я его на одном из забугорных блогов, на каком, уже не помню. Вот код кнопок для сайта:

1
2
3
4
5
6
7
8
9
/*Изображение кнопок клавиатуры на странице of SerBlog.ru*/
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;}

Вставить его нужно в вашу таблицу стилей. Можно в самый конец. Комментарий в коде можно оставить, чтобы было понятно к чему этот код относится. После вставки кода можно писать что-то наподобие:

<kbd>Ctrl</kbd> + <kbd>F5</kbd>

Это очень нужная фишка для тех, кто пишет о компьютерах, работе с программами. Очень удобно и симпатично. По крайней мере мне он нужен. Без него было намного хуже. Я периодически пишу статьи о работе с программами и порой нужно указать на какие кнопки нажимать. Данный метод подходит как нельзя лучше.

Если у вас на странице основной текст меньше 12 пикселей, то размер текста нужно будет уменьшить и в коде kbd.

Забирайте и пользуйтесь и пишите в комментария, как у вас все получилось. Ждем ваших отзывов. 😉

Не стесняйтесь делиться записью в социальных сетях. Спасибо

11 комментариев
  1. Mila:

    «Серьёзный блог о серьёзном» — и название хорошее и содержание…Вот только эта «урна для подаяний «не смотрится! Сразу приходит на ум : …сами мы не местные…»

    • Спасибо за отзыв. А благодаря этой урне я могу оплачивать содержание моих проекты в интернете. Спасибо всем, кто помогает. Так что — пускай будет. 😉

  2. Mila:

    Мнение уважаю, но в корне не согласна.Лучше бы шли эти рубли тем, у кого действительно другого выхода нет,как подаяние просить… А как насчет самоуважения ?И самоутверждения ?

    • Здесь никто никого не просит ни о чем. Все на добровольной основе.
      Кстати, в этом ничего такого нет. Не знаю, что вы подумали, но это очень активно практикуется на западе. И, естественно перетекает к нам.

  3. А я считаю, что это нормально, и никого здесь не оскорбляешь. Основное, чтобы смотрелось органично, сайт был нужен и востребован. А если ты чему- то научил другого, то что здесь неправильно? Услуга, здесь выступает, как товар.Ведь не обязательно свою услугу продавать кому-то конкретно, можно у неизвестному посетителю.

  4. Можно посмотреть и с такой стороны,это верно. Но ведь за такие вот копилки и просьбы БАН предусмотрен обоими поисковиками. Как быть с этим ?
    Кстати,ничего личного, но авторов, которые хотят печатать материалы в моей группе я ставлю перед альтернативой «или-или»

  5. Позновательно со стороны познания применения стилей, а так моё мнение — лучше картиночками, подготовленными в фотошопе или ещё чём. 😉

  6. Хорошая идея. Симпатично и не нагружает сайт. Спасибо.

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

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