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

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

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

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

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

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

Download

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, с помощь которого происходит анимация нашей кнопки:

/*Сжатый код*/
{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 спрайтов, ничего тяжелого здесь нет, нужно только понять как оно работает.

Мой блог находят по следующим фразам
• бесплатный плеер для сайта
• плавное перемещение по странице css
• фотогалерея для сайт
• div скролл css галерея
• фотогалерея для сайта на jquery
• миниатюры автоматом wordpress