Верстка динамической кнопка на CSS
Во-первых, что такое динамическая кнопка. Динамическая кнопка — это кнопка, вид которой меняется при наведении на нее указателя мыши.
Вы можете посмотреть как выглядит динамическая кнопка.
Такая красота очень часто верстается путем программирования на JavaScript. По умолчанию загружена первая картинка, которая и представляет собой кнопку. При наведении на нее указателя мыши происходит смена предыдущей картинки на новую этим самым JavaScript-ом.
Что мы имеем в результате.
В результате у нас есть две картинки: первая — это вид кнопки по умолчанию, вторая — при наведении мыши. Когда я навожу мышь на кнопку по умолчанию у меня происходит загрузка изображения номер два. И, если используется большая и красивая кнопка или мой интернет медленный, какое-то время, после наведения мыши, кнопка тупит и не меняет своего вида. За это время происходит подгрузка изображения номер два.
Проблемы тупости кнопки, при первой загрузке сайта, можно решить путем установки скрипта-загрузчика. Этот скрипт будет заливать в кеш сразу оба изображения для моей динамической кнопки.
А можно пойти совсем другим путем и сверстать эту кнопку вообще без применения JavaScript. И все это дело будет называется динамической кнопкой на CSS.
Процесс создания изображения для кнопки в Photoshop и ее верстку я записал в формате видеоурока.
Поехали!
Для начала расскажу чем хороша динамическая кнопка на CSS.
Оба изображения (по умолчанию и при наведении) содержаться в одном файле и одновременно загружаются на компьютер посетителя, а значит никаких тормозов, связанных с подгрузкой изображения, не будет.
Если кнопка сделана старым дедовским способом, то, в случае желания изменить текст на ней, вам нужно либо загружать Photoshop и рисовать новую кнопку, либо просить об этом дизайнера. В случае CSS кнопки вы в любой момент можете поменять текст на ней. Дальше будет понятно как такое может быть.
CSS-кнопка формируется при помощи вот такого HTML-кода:
<a href="/" class="button"><span>Содержимое кнопки</span></a>
Редактируйте HTML и меняйте текст «Содержимое кнопки» на любой другой.
CSS-свойства для данной кнопки, конечно, будут иметь относительную монструозность. Но это лишь на первый взгляд.
.button {
display: block;
color: #FFF;
background: url(/img/button-r.jpg);
background-position:top right;
background-repeat:no-repeat;
padding-right: 23px;
float: left;
outline: none;
text-decoration: none;
font-size:14px;
margin-left: 130px;
}
.button span {
display: block;
line-height: 10px;
background: url(/img/button-l.jpg);
background-repeat:no-repeat;
padding: 15px 0 15px 23px;
}
.button:hover {
background-position: 100% -40px;
}
.button:hover span {
background-position: 0% -40px;
color: #000;
}
В видеоуроке я подробно расскажу назначение каждого из свойств.
Теперь давайте поговорим о принципах реализации.
В принципы заложена технология «раздвижных дверей». Раздвижные двери — это фоновые изображения, задаваемые в CSS-файле для тега <a> и для вложенного в него тега <span>.
Вот такое изображение задается в качестве фона для тега <a> (левая створка раздвижных дверей):
А вот какое фоновое изображение у тега <span> (правая створка раздвижных дверей):
Как вы видите в фоновом изображении присутствует сразу обе кнопки (сверху по умолчанию, внизу — при наведении мыши). CSS-инструкции заданы таким образом, что в зависимости от того наведена мышь на кнопку или нет, фоновое изображение перемещается и видна только одна его часть (верхняя — по умолчанию, нижняя — при наведении мыши).
Над левой створкой раздвижной двери расположен текст кнопки, справа к тексту кнопки прижимается правая створка раздвижной двери. Правая створка накрывает сверху левую и видна только та часть левой створки, над которой расположен текст.
Длинна левой створки выбирается таким образом, чтобы самый длиннющий текст, который может появится на кнопке, не оказался бы длиннее нее.
Минусы CSS кнопки
Я нашел ровно два минуса:
- Определенные проблемы с позиционированием кнопки. Нельзя попросту выравнивать кнопку свойством text-align или равенством левого и правого margin-а. Возникает такая загогулина из-за присутствия в описании свойств тега <a> инструкции float:left. Для ее позиционирования можно применять либо position:relative и далее задавать координаты смещения top и left. Или указать значение отступа слева.
- Невозможно применять в качестве фонового изображения картинку с прозрачностью. Если кнопка, волей дизайнера, имеет закругленные углы, а фон под ней сложный (градиент, либо какой-то хитрый узор), то в месте, где обрезан уголок у кнопки должна быть прозрачность (через эту прозрачность просматривается тот самый сложный фон). Так вот, в случае раздвижных дверей, для правой стороны кнопки, через прозрачность будет просматриваться не фон подложки, а левая створка раздвижной двери.
Видеоурок
Теперь перейдем к обещанному видеоуроку. Видеоурок состоит из двух частей. В первой части я покажу как при помощи Photoshop создать фоновое изображение для нашей будущей кнопки, а во второй части мы превратим будущую кнопку в реально существующую.
Первая часть. Подготовка фонового изображения в Photoshop:
Вторая часть. Верстка динамической кнопки:
Вы можете скачать исходники сверстанного проекта с Deposit Files (.zip 5.5 КБайт).
Из-за алгоритмов сжатия сервиса RuTube серьезно страдает качество картинки. Если мелкие детали плохо видны, вы можете скачать видео с Deposit Files в лучшем качестве:
Кстати, такой принцип верстки, когда несколько изображений находятся в одном файле, очень часто применяется в высоконагрузочных проектах. При этом все возможные графические элементы на странице засовываются в один файл и загружаются разом. Видели бы вы файл, содержащий графику страницы Яндекса…
Метки: Верстка видео допы
Похожие материалы:
Отзывов: 28 на «Верстка динамической кнопка на CSS»
-
Верстка простой кнопки - — 20.10.2009 в 21:50
-
div закругленные углы - верстка - HTML - CSS - видеоурок — 26.10.2009 в 22:28
Автор: , 03.10.2009 в 08:39
Спасибо! Сделай урок про то как сделать неподвижный фон на сайте с картинкой! Как тут http://www.overpro.ru/
Автор: , 03.10.2009 в 10:39
Для этого не нужно посвящать целый урок!
Вон такой делается с помощью css:
body {
background-color: #000000; // задаешь цвет фона
background-image:url(путь/имя_картинки); // указываешь картинку
background-repeat:no-repeat; // указываешь что твой фон не повторяется
background-position:top; // позиция на верху (можно внизу)
background-attachment:fixed; //зафиксировано при скролинге мышкой,
//относительно монитора!,
//а если поставить scroll, то будет статично
//относительно всего сайта,
//т.е. при прокрутке мышкой и картинка
//прокрутиться тоже.
//вот и вся наука!
}
Автор: , 03.10.2009 в 10:52
Да, Lardok прав, сделать это очень просто, достаточно знать одно свойство CSS:
“background-attachment:fixed”
После указания этого свойства фоновое изображение не перемещается при скролировании страницы.
Естественно нужно указать свойство “background-repeat:no-repeat”, чтобы фоновая картинка не замащивала всю ширину блока.
При помощи свойства
“background-position: значение отступа сверху значение отступа слева”
задается расположение фонового изображения в том блоке, для которого применяются данные свойства.
Lardok, спасибо за подробный CSS-код.
Автор: , 03.10.2009 в 11:02
…еще пару “спасибо” и мне юзерпик разрешат добавить)))
Автор: , 03.10.2009 в 11:32
Разрешаю тебе добавить юзерпиииик!
Иди на http://ru.gravatar.com/ , сын мой, и добавляй юзерпик в соответствии с твоим е-маилом и жизненной позицией.
Автор: , 03.10.2009 в 13:50
я толи не понял зачем этот сайт, толи вы меня не поняли: я хотел на этот сайт добавить!
а на том, я зарегился!
Автор: , 03.10.2009 в 15:00
Сайт http://ru.gravatar.com/ служит для установки юзерпиков на все блоги, в которых Вы, комментируя, указываете в качестве e-mail тот адрес, для которого установили картинку на Gravatar.
Аватар появится в ваших комментариях автоматически.
Автор: , 03.10.2009 в 12:00
Спасибо:)
Автор: , 03.10.2009 в 13:10
Пожалуйста
Автор: , 05.10.2009 в 07:27
вообще по фону можно сделать урок, но включить туда не только “неподвижный фон”, а например еще и “Использование градиента в качестве фона страницы”, еще как то была задача, что если есть большая картинка с разрешением эдак 1600х1200 и чтобы она по центру позиционировалась, а при наведении мышки например к углу, картинка пододвигалась. как то так. вообще про фон можно я думаю много чего придумать и написать) про те же z-index’ы, хотя это тут вроде уже обсуждалось. может я и не прав, и это все делается 1-2 комментариями в цсс
Автор: , 05.10.2009 в 08:35
Да, про фон есть что сказать, конечно. Тема обширная.
Автор: , 05.10.2009 в 10:54
Пофикси стили, а то в FireFox и IE 6 кнопка по-разному отображается и со шрифтами косяк какой-то.
Автор: , 05.10.2009 в 12:17
Спасибо. Это все кодировки, пофиксил.
Автор: , 09.10.2009 в 00:55
Динамическая кнопка это хорошо! Но к чему одна кнопка? Многим интересно меню-динамическое! И сделать такое меню можно с помощью специального сервиса. Бесплатного!
http://www.izzymenu.com/
Автор: , 09.10.2009 в 09:06
Отличная ссылка, спасибо!
Только, уважаемые посетители, настоятельно рекомендую ознакомиться с видеоуроком, а не просто создавать при помощи сервиса что-то. Дабы не было магического трепета перед технологией спрайтов
Автор: , 12.10.2009 в 00:16
Андрей, а подскажите пожалуйста, как сделать самую обычную кнопку – типа той, что у вас в форме подписки по e-mail или же в этих комментах (Добавить). Меня, правда, интересует больше именно класс в css. Знаю, что просто, но как-то не очень понятно в деталях.
Автор: , 12.10.2009 в 08:56
Кнопка в HTML генерируется тегом (в данном случае на кнопке будет написано “Отправить”).
Но, самое интересно, что внешний вид кнопки можно изменять при помощи CSS-стилей. Кнопка подчиняется заданием бордера, фона и т.д. Но дело это не такое простое, как кажется (т.к. есть IE и даже мой любимый FF без закидонов не обошелся). Я запишу подробное видое по этой теме. Немного терпения и Вы получите развернутый ответ на Ваш вопрос.
Автор: , 13.10.2009 в 09:03
Спасибо, Андрей, буду ждать, очень интересно.
Автор: , 19.11.2009 в 17:47
Чувак, спасибо тебе, ну просто огромненское!!!
Замечательные уроки, все скачал и прошел. Ориентируюсь в css теперь на порядок увереннее…
Короче, аригато сэнсэй ))))
Автор: , 19.11.2009 в 17:51
Рад помочь, чувак.
Автор: , 30.11.2009 в 11:38
Очень нравится как сделана кнопка: http://www.artlebedev.ru/tools/technogrette/html/framed/ … но уж так замужрено … Твой способ вроде как попроще В) … интересно, применим ли тот случай к этому … надо поэксперементировать В)
Автор: , 14.12.2009 в 21:03
Тема конечно не нова, поднималась на блогах и форумах много раз. Но в видео формате объяснялся впервые
Респект учителю 
Автор: , 05.04.2010 в 07:49
Благодарен автору за статью.
Андрей, а почему только два состояния кнопки (обычное и hover)? Почему бы не дополнить пример состоянием в момент нажатия (active)? Раз мы нажимаем на кнопку, значит она должна нажиматься ))
Автор: , 05.04.2010 в 08:12
Вполне может быть и active.
Автор: , 19.04.2010 в 21:52
Спасибо, пригодилось) Правда, пригодилась только технология «раздвижных дверей», в сайдбар добавил к ссылкам бэкграунд при наведении, кстати с прозрачностью, получился эффект свечения. В опере все норм, в других пока не тестил.
Автор: , 21.05.2010 в 00:20
Спасибо за курс! Очень познавательный!!!
Есть вопрос, а если я столкнклся с проблемой №2, сложный ресунок под кнопкой, но кнопку надо сделать динамической, как быть. есть варианты?