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

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

10.02.2010 |

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

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

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

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

кнопка CSS

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

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

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

Интернет-магазин ноутбуков Novatek в Киеве. У них ноутбук стоит на многие ниже чем в оффлайн-магазинов. Кстати на рынке они только один год, и уже стали одним из 10 крупных магазинов ноутбуков в украине.

Интересные статьи:

Джебокс 10.02.2010 17:12

border-width: 0; забыл добавить, а то рамка в некоторых брауз. появляется из-за ссылки
Webchester 10.02.2010 21:39

Спасибо что сказал, а то не увидел. Урок ночью писал просто:)

Оставь свое мнение:

Блог вебмастера

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

Интересные статьи: