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 мы можем указать, какую именно часть изображения нужно показать в обычном состоянии и при наведении на картинку.
В видео версии урока вы найдете больше примеров с детальным объяснением каждого из них.
Автор: Андрей Кудлай
