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

17

Від автора: У цьому уроці ми розглянемо тему використання CSS спрайтів, листів спрайтів і листів зображень. Зокрема ми розглянемо переваги використання даних технік перед роботою з окремими зображеннями.

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

Перш за все, давайте визначимося з термінологією. Отже, лист зображень (або карта зображень) – це одна картинка, на якій розміщено декілька маленьких картинок (піктограм). Ось приклад такого листа зображень:

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

CSS-спрайт – це одна картинка, на якій розміщено декілька маленьких пов’язаних картинок, які по суті є варіаціями однієї картинки. Ось приклад CSS-спрайту:

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

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

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

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

Та стилі:

.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 спрайтів:

І стильове оформлення:

.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 ми можемо вказати, яку саме частину зображення потрібно показати в звичайному стані і при наведенні на картинку.

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

На цьому ми завершимо поточний урок. Удачі і до нових зустрічей!