Создаем и используем CSS-спрайты


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

Рассмотрим использование спрайтов CSS на примере этой иконки:

которая по наведению должна становиться такой:

Обычными средствами данная задача реализуется следующим образом:

HTML:

<div class=”icon”></div>

CSS:

.icon {
	width: 128px; /* блок имеет ширину… */
	height: 128px; /* …и высоту изображения иконки */
	background: url(icon.jpg); /* первая иконка */
}
 
.icon:hover {
	background: url(icon_hover.jpg); /* вторая иконка */
}

Но нас это не устраивает по причине, описанной в первом абзаце данной статьи. Поэтому нам на помощь приходят так называемые спрайты. Суть спрайтов заключается в том, что вместо двух изображений с иконками у нас будет одно изображение с двумя иконками и когда у нас на странице загрузится первая иконка, автоматически загрузится и вторая. А мы, в свою очередь, отображаем лишь нужную нам часть нашего изображения. Нагляднее на картинке:

Создаем изображение спрайта

Далее несколько слов о том, как создать изображение спрайта. Открываем в Фотошопе нашу первую иконку в обычном состоянии. Идем Изображение > Размер холста. Кликаем на стрелочку вверх (это значит, что наш холст будет увеличиваться вниз) и выставляем высоту в два раза большую, чем высота нашей иконки. ОК.

Затем перетаскиваем в Фотошоп вторую нашу иконку, которая должна появляться по наведению. и располагаем ее в самом низу.

Далее нажимаем Файл > Сохранить для Web и устройств, выбираем нужный формат, сохраняем и получаем такое:

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

<div class=”icon”></div>

CSS:

.icon {
	width: 128px; /* блок имеет ширину… */
	height: 128px; /* …и высоту изображения иконки */
	background: url(sprite.jpg) top center;  /* выравниваем наш спрайт-фон по верхнему краю блока */
}
 
.icon:hover {
	background-position: bottom center; /* а по наведению выравниваем фон по низу */
}

Всё готово и выглядит вот так:

Спрайты можно применять не только для случая с наведением. Можно просто расположить в него все иконки, использующиеся сайте и просто выбирать нужную область с помощью свойства background-position. Например, вот так:

background-position: 128px 0;

Это, пожалуй, всё, что я хотел сегодня рассказать. Спрашивайте, если что.
Скачать исходник