Site icon Vavik96

CSS-спрайты и листы изображений

В этом уроке мы затронем тему использования CSS-спрайтов, листов спрайтов и листов изображений. В частности мы рассмотрим преимущества использования данных техник перед работой с отдельными изображениями.
Прежде всего, давайте определимся с терминологией. Итак, лист изображений (или карта изображений) – это одна картинка, на которой размещено несколько маленьких картинок (иконок). Вот пример подобного листа изображений:

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

Ну а лист спрайтов – это, соответственно, несколько спрайтов на одной картинке:

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

 

<a href="#" class="vk-ico"></a>

 

И стили:

 

.vk-ico{
	background: url(img/vk1.png);
	width: 60px;
	height: 60px;
	display: inline-block;
}
.vk-ico:hover{
	background: url(img/vk2.png);
}

 

Так будет выведена черно-белая иконка, которая при наведении будет замещаться цветной. Задача вроде бы решена, однако, в этом решении есть несколько недостатков. Первое: при первом наведении на картинку мы можем увидеть «эффект мигания», когда черно-белая картинка пропадает, а цветная появляется через некоторый промежуток времени. Связано это с тем, что в этот промежуток времени цветная картинка загружается с сервера. И здесь мы подошли ко второму недостатку. Поскольку картинка загружается с сервера, то, получается, это дополнительный HTTP-запрос к серверу, который занимает дополнительное время и приводит к первой проблеме.

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

Вот пример использования CSS-спрайтов:

 

<div class="social-icons">
<a href="#" class="vk-ico icons"></a>
<a href="#" class="fb-ico icons"></a>
<a href="#" class="tw-ico icons"></a>
</div>

 

И стилевое оформление:

 

.icons{
	background: url(img/sprite.png);
	width: 60px;
	height: 60px;
	display: inline-block;
	margin-right: 20px;
	transition: all .7s;
}
.vk-ico:hover{
	background-position: 0 -60px;
	transform: rotate(360deg);
}
.fb-ico{
	background-position: -60px 0;
}
.fb-ico:hover{
	background-position: -60px -60px;
	transform: rotate(360deg);
}
.tw-ico{
	background-position: -120px 0;
}
.tw-ico:hover{
	background-position: -120px -60px;
	transform: rotate(360deg);
}

 

Картинка sprite.png является листом спрайтов и на ней размещено 3 спрайта социальных иконок. Каждая иконка имеет размеры 60х60 пикселей и в каждый конкретный момент мы показываем часть большого изображения заданных размеров (60х60 пикселей). Ну а с помощью свойства background-position мы можем указать, какую именно часть изображения нужно показать в обычном состоянии и при наведении на картинку.

В видео версии урока вы найдете больше примеров с детальным объяснением каждого из них.

Автор: Андрей Кудлай

 

Генераторы спрайтов

Exit mobile version