Здравствуйте, уважаемые читатели, рад приветствовать каждого. Меня как-то просили рассказать о том, как я вставляю симпатичные кнопки изображения клавиатуры в текст страницы. Посмотреть пожно здесь и здесь. Ну и например вот так: Если текст на странице вам кажется маленьким, нажмите 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;} |
/*Изображение кнопок клавиатуры на странице 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> |
<kbd>Ctrl</kbd> + <kbd>F5</kbd>
Это очень нужная фишка для тех, кто пишет о компьютерах, работе с программами. Очень удобно и симпатично. По крайней мере мне он нужен. Без него было намного хуже. Я периодически пишу статьи о работе с программами и порой нужно указать на какие кнопки нажимать. Данный метод подходит как нельзя лучше.
Если у вас на странице основной текст меньше 12 пикселей, то размер текста нужно будет уменьшить и в коде kbd.
Забирайте и пользуйтесь и пишите в комментария, как у вас все получилось. Ждем ваших отзывов. 😉
2061![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
«Серьёзный блог о серьёзном» — и название хорошее и содержание…Вот только эта «урна для подаяний «не смотрится! Сразу приходит на ум : …сами мы не местные…»
Спасибо за отзыв. А благодаря этой урне я могу оплачивать содержание моих проекты в интернете. Спасибо всем, кто помогает. Так что — пускай будет. 😉
Мнение уважаю, но в корне не согласна.Лучше бы шли эти рубли тем, у кого действительно другого выхода нет,как подаяние просить… А как насчет самоуважения ?И самоутверждения ?
Здесь никто никого не просит ни о чем. Все на добровольной основе.
Кстати, в этом ничего такого нет. Не знаю, что вы подумали, но это очень активно практикуется на западе. И, естественно перетекает к нам.
А я считаю, что это нормально, и никого здесь не оскорбляешь. Основное, чтобы смотрелось органично, сайт был нужен и востребован. А если ты чему- то научил другого, то что здесь неправильно? Услуга, здесь выступает, как товар.Ведь не обязательно свою услугу продавать кому-то конкретно, можно у неизвестному посетителю.
Можно посмотреть и с такой стороны,это верно. Но ведь за такие вот копилки и просьбы БАН предусмотрен обоими поисковиками. Как быть с этим ?
Кстати,ничего личного, но авторов, которые хотят печатать материалы в моей группе я ставлю перед альтернативой «или-или»
О какой группе вы говорите?
Позновательно со стороны познания применения стилей, а так моё мнение — лучше картиночками, подготовленными в фотошопе или ещё чём. 😉
Картиночки-то конечно хорошо, но они имеют гораздо больший вес. Между текстом и графикой целая пропасть. 🙂
Хорошая идея. Симпатично и не нагружает сайт. Спасибо.
Пожалуйста.