Как создать эффект клавиш клавиатуры в тексте с помощью CSS

Автор:
Nurlan Kemelbekov

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

Так почему бы не использовать его для того, чтобы эти элементы выглядели, как клавиши клавиатуры?

Как настроить CSS темы WordPress в GoogleChrome

Таким образом, в этой маленькой заметке я собираюсь показать вам, как создать эффект клавиш клавиатуры в тексте с помощью CSS на блоге WordPress. Здесь не требуется добавление очередного изображения в виде клавиш клавиатуры компьютера, поэтому это не повлияет на скорость загрузки блога.

Как добавить эффект клавиши клавиатуры.
Из панели администратора перейдите: внешний вид>редактор>стили> выберите style.css и вставьте этот CSS стиль в нижнюю часть:

kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Чтобы сохранить изменения, нажмите кнопку «Обновить файл».

Наконец, мы должны добавить теги <kbd> к тексту, на котором мы хотим применить стиль клавиш клавиатуры.
Теперь при создании нового поста, до и после названия клавиш клавиатуры, добавьте следующие HTML-теги:

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

Это позволит сделать так, чтобы выглядело следующим образом:

Ctrl + F

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



Вам также может понравиться:


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

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

* Copy This Password *

* Type Or Paste Password Here *

шестнадцать − 6 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!