В этой статье я хочу рассказать о том, что такое спрайт (sprite), для чего он используется, какие преимущества он может дать и каковы его ограничения.
Итак, CSS спрайт представляет собой один графический файл, в котором находятся несколько мелких изображений. Он используется в качестве фона. При этом задаются не только границы для данного фона, но и его положение относительно этих границ. Изменяя положение фонового изображения можно отобразить в этих границах именно ту его часть, которая требуется в определенный момент.
К примеру, границы для фона заданы в пределах 100*50 пикселей, а размер фонового изображения 100*100 пикселей, на которых располагаются две картинки. Меняя координаты фона, вы получаете возможность отобразить либо первую, либо вторую картинку.
Вот как это делается.
Для начала создадим изображение. Например, такое:
После этого нам потребуются два файла 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>
После этого переходим к оформлению.
Зададим вид ссылки, без наведения на нее мыши:
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 пикселей, чтобы фоном стала ее нижняя часть.
background-position: 0 -50px;
}
Результат в браузере.
Как видите все очень просто. Главное точно указывать координаты.
Подведем итоги.
Основной сферой применения данной техники является ее использование в оформлении меню и ссылок, но вы можете приспособить ее и к другим элементам своей страницы.
Что касается положительных сторон CSS спрайтов, то, прежде всего – это скорость отклика при наведении мыши и снижение нагрузки на сервер. Ведь спрайт подгружается один раз и мгновенно реагирует на действия пользователя. В то время как при использовании отдельных картинок браузеру приходится каждый раз отправлять запрос на сервер, а затем ждать ответ от него.
К ограничениям или скорее небольшим трудностям в использовании спрайтов можно отнести то, что требуется высокая точность при определении координат перемещения фона.
