Создаем кнопку с помощью CSS: Часть вторая

И так это  второй мой урок из серии "Создаем кнопку с помощью CSS. Где мы будем знакомиться с такой технологией как CSS спрайты. Это один из самых простых и распространенных способов, при помощи которого  создают динамические кнопки и меню.

Вот список  предыдущих уроков:
Создаем кнопку с помощью CSS: Часть первая
Создаем кнопку с помощью CSS: Часть вторая
Делаем кнопки с помощью CSS, техника раздвижные двери
Бонус:
Красивые CSS кнопки с иконками

Шаг 1:
В чем суть техники CSS Sprite, а в том что у нас есть одно изображение на котором уже нарисовано несколько состояний нашей кнопки. Кто не знает в ссылки есть 4 состояния в котором она находится:
1. Активная (active)
2. Не посещенная (link)
3. Уже посещенная (visited)
4. Когда над ссылкой курсор (hover)

Как видите на картинке у меня только два состояния кнопки. Нижняя кнопка у нас будет под загружаться когда мы будем наводить курсор на кнопку, а верхняя будет отвечать за все другие состояния ссылки.

Шаг 2:
Теперь оформляем нашу кнопку при помощи CSS (смотрите комменты к каждому свойству CSS в низу). Кто не знает, как создать и прикрепить CSS файл к HTML файлу, тогда смотрите в первом уроке.

1

<a class="btn3" href="#">Download</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

a.btn3 {
display:block; /*отображаться блоком*/
width:228px;  /*Ширина кнопки*/
height:49px;   /*Высота кнопки*/
background:url(btn_sprite_blue.gif) 0 0 no-repeat; /*подключаем изображения ссылки*/
text-align:center;   /*Текст по центру*/
font-size:24px;   /*Размер шрифта*/
font-weight:700;   /*задаем жирность шрифта*/
text-decoration:none;  /*убераем черту снизу ссылки*/
color:#fff;   /*цвет  ссылки в состоянии покоя*/
font-family:arial;  /*шрифт ссылки*/
line-height:35px;   /*расстояние между строками текста*/
border-width: 0px; /*убераем рамку с ссылки изображ.*/
}
 
a.btn3:hover {
background:url(btn_sprite_blue.gif) 0 -51px no-repeat;   /*подключаем изображения ссылки*/
color:#666;   /*цвет  ссылки  ккогда над ней курсор */
}

Теперь разложу по полочкам, самый важный кусок CSS, с помощь которого происходит анимация нашей кнопки:

1
2
3
4
5
6
7
8

/*Сжатый код*/
{background:url(btn_sprite_blue.gif) 0 -51px no-repeat;}
 
{background:url(btn_sprite_blue.gif); /*подключаем изображения*/
background-position-x:0; /*задает горизонтальную координату фонового рисунка*/
background-position-y:-51px; /* задает вертикальную координату фонового рисунка*/
background-repeat: no-repeat; /*запрещает фоновому изображению повторяться;*/
}

Для тех кто не понял, когда мы наводим курсор на кнопку изображение опускается по вертикали на -51px и меняем цвет текста, так и выходит анимационная и динамичная кнопка. Таким образом мы можем каждом из состояний кнопки, предоставить разные варианты оформление.
Для этого нам нужно их нарисовать и прописать в CSS файл.
Ну вот и вся технология CSS спрайтов, ничего тяжелого здесь нет, нужно только понять как оно работает.

Интересно будет почитать:

• Анимированные кнопки без JavaScript
• 10+ великолепных расширений chrome для вебмастера
• Выводим на блоге количество RSS читателей текстом
• Динамичное меню с помощью jQuery
• Статистика блога за ноябрь 2009
• Обзор журнала: БлогоNews выпуск №4