Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

Изменение оформления тэга kbd

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

05.01.2013 Leave a Comment 4 885 просмотров

На просторах интернета встретил, что в тексте статей иногда клавиатурные комбинации изображаются с помощью имитации изображений кнопок. Делается это с помощью тега <kbd> и его оформлением в css.

Использую (upd. точнее использовал) в статьях два вида оформления тэга <kbd>: для отображения кнопок и для отображения пунктов меню в программах, по которым нужно пройти.

Добавьте в Ваш css файл следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
kbd{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font-family:monospace, sans-serif;
vertical-align:baseline;
background:transparent;
border-color:#e6e6e6 #bebebe #bebebe #e6e6e6;
border-style:solid;
border-width:1px 3px 4px;
padding:0 5px;
background-color:#d2d2d2;
background-color:rgba(210,210,210,0.9);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
 
kbd.menu
{
    -moz-border-radius:3px;
    -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    background-color:#f7f7f7;
    border:1px solid #ccc;
    border-radius:3px;
    box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    color:#333;
    display:inline-block;
    font-family:monospace, sans-serif;
    font-size:100%;
    line-height:1.4;
    margin:0 .1em;
    padding:.1em .6em;
    text-shadow:0 1px 0 #fff;
}

Теперь, если вы пропишите в html коде следующее:

1
2
3
<p>Нажмите клавиши <kbd>Ctrl</kbd>+<kbd>Ё</kbd></p>
 
<p>Пройдите в меню программы <kbd class="menu">Preferences</kbd> → <kbd class="menu">Package Control</kbd></p>

то Вы получите следующее:

2015-11-19_004728

Первый вариант оформления kbd нашел на сайте http://itechblog.org


Статьи по теме:

  1. Красивые таблицы CSS в HTML

Web программирование Css

© 2014 Harrix