2 октября 2009

Верстка динамической кнопка на 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 кнопки

Я нашел ровно два минуса:

  1. Определенные проблемы с позиционированием кнопки. Нельзя попросту выравнивать кнопку свойством text-align или равенством левого и правого margin-а. Возникает такая загогулина из-за присутствия в описании свойств тега <a> инструкции float:left. Для ее позиционирования можно применять либо position:relative и далее задавать координаты смещения top и left. Или указать значение отступа слева.
  2. Невозможно применять в качестве фонового изображения картинку с прозрачностью. Если кнопка, волей дизайнера, имеет закругленные углы, а фон под ней сложный (градиент, либо какой-то хитрый узор), то в месте, где обрезан уголок у кнопки должна быть прозрачность (через эту прозрачность просматривается тот самый сложный фон). Так вот, в случае раздвижных дверей, для правой стороны кнопки, через прозрачность будет просматриваться не фон подложки, а левая створка раздвижной двери.

Видеоурок

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

Первая часть. Подготовка фонового изображения в Photoshop:

Вторая часть. Верстка динамической кнопки:


Вы можете скачать исходники сверстанного проекта с Deposit Files (.zip 5.5 КБайт).

Из-за алгоритмов сжатия сервиса RuTube серьезно страдает качество картинки. Если мелкие детали плохо видны, вы можете скачать видео с Deposit Files в лучшем качестве:

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

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить