Создание клавиш клавиатуры в CSS (без графики)

Создание клавиш клавиатуры в CSS (без графики)Первый вопрос, который, возможно, перед вами всплыл – Нафига? grin

Нафига мне эти клавиши на сайте?

А знаете что? Я полностью с Вами соглашусь. Но вот меня однажды приперло…

И я могу вам назвать по крайне мере две железные причины – по которым вы должны просмотреть это  видео.

Причина 1. Самообразование.

Ну разве вам помешает лишний урок по HTML и CSS? Скажу даже больше – в моем курсе по CSS – этого нету, так что покупателям тоже советую просмотреть.

Тренинг по вёрстке сайта на HTML5 и CSS3

Причина 2. Приспичило. Ой как приспичило!

У меня просто есть еще один сайт, по обучению компьютеру, и я решил выложить там статью на тему горячих клавиш Windows. Пройдите по ссылке выше и наткнетесь на этот пост.

Естественно, разрисовывать все клавиши мне не хотелось, поэтому я задался вопросом – как же мне все это дело заварганить? Полазив немного по нету - я наткнулся на один приёмчик кода, который меня зверски вдохновил, за это отдельное спасибо Cuprum’у, если он вдруг меня сейчас читает. wink

Кстати, тоже почитатель MaxSite CMS.

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

В связи с этим, я записал отдельный видеоурок, где постарался вам максимально понятно объяснить мои невразумительные действия. snake

Зырим видео ниже:

Для ценителей качество и богатых коллекционеров моих  видеоуроков smile - даю ссылку на скачивание.

Там кроме самого видео в формате AVI, вы найдете исходники моего действа в уроке.

Скачать с летитбит. - 37 метров с копейками.

Ах да, вот страничка, с которой я "честно стыбзил" код у хозяина медной поляны.

ЗЫ: клавиши в видео сделал большие, поэтому, естественно, вы их можете сделать немножко поменьше.

ЗЫЫ: В ишаке округление клавиш не работает. Как обычно – долбаный ишак. Или у меня руки кривые?

Комментариев: 5 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 5
  •  johnysp | 24 декабря 2010 в 15:44:57

    Прикольно... Уже приспособил этот тэг как кнопку под текст для "Далее..." (чтобы не рисовать).

    Сергей, найдешь что-нибудь еще интересное и полезное - пиши wink

    P.S. Уже стал как постоянный читатель

  •  johnysp | 24 декабря 2010 в 15:46:54

    ...хозяина медной поляны... - "_blank" забыл прописать wink

  •  Серёга | 25 декабря 2010 в 13:11:20

    ОК.Буду рыть интересную инфу.

    Хозяина поправил.smile

  •  AlexKlu | 10 января 2011 в 08:18:02

    За поиском подобных, НУ ОЧЕНЬ ПОЛЕЗНЫХ мелочей нужно иногда гору всякой шняги перелопатить. А тут, блин, все, как по заказу. РЕСПЕКТ много раз...

    okokok

  •  Аноним | 6 апреля 2011 в 12:45:56

    сакс