Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » CSS » CSS спрайты

CSS спрайты
Раздел: Создание сайта » CSS  
27 июля 2009   |   автор: admin Оставить комментарий



В этой статье я хочу рассказать о том, что такое спрайт (sprite), для чего он используется, какие преимущества он может дать и каковы его ограничения.

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

К примеру, границы для фона заданы в пределах 100*50 пикселей, а размер фонового изображения 100*100 пикселей, на которых располагаются две картинки. Меняя координаты фона, вы получаете возможность отобразить либо первую, либо вторую картинку.

Вот как это делается.

Для начала создадим изображение. Например, такое:

 

 

CSS спрайты




После этого нам потребуются два файла index.html и style.css.

В файле index.html запишем стандартные строки:

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Web-lesson.ru. Уроки CSS. Спрайты
</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>



 

Теперь добавим простую ссылку:

 

<a href="/">Пример использования CSS спрайта</a>
</body>
</html>

 


После этого переходим к оформлению.


Зададим вид ссылки, без наведения на нее мыши:

a {
 color:#FFF;
 text-decoration: none;
 font:18px Arial;
 width:auto;
 height:50px;
 background: url(primer.png);
 text-align: center;
 padding: 10px;
}

 

Как фон используем приведенное выше изображение primer.png. Ширина в данном случае зависит от длины текста ссылки, а высоту мы взяли в соответствии с размером нашего изображения. Напомним, что оно состоит из двух частей, каждая размером 100*50 пикселей, что в итоге составляет 100*100.

Затем укажем, как необходимо переместить фоновую картинку при наведении на нее курсора. Нам необходимо поднять ее по оси “y” на 50 пикселей, чтобы фоном стала ее нижняя часть.

a:hover {

  background-position: 0 -50px;
}

 

 

Результат в браузере.

 

 


 Как видите все очень просто. Главное точно указывать координаты.

 
 Подведем итоги.

 Основной сферой применения данной техники является ее использование в оформлении меню и ссылок, но вы можете приспособить ее и к другим элементам своей страницы.
 
 Что касается положительных сторон CSS спрайтов, то, прежде всего – это скорость отклика при наведении мыши и снижение нагрузки на сервер. Ведь спрайт подгружается один раз и мгновенно реагирует на действия пользователя. В то время как при использовании отдельных картинок браузеру приходится каждый раз отправлять запрос на сервер, а затем ждать ответ от него.

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

 

 

 

web-lesson.ru 

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код