Від автора: У цьому уроці ми розглянемо тему використання 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 ми можемо вказати, яку саме частину зображення потрібно показати в звичайному стані і при наведенні на картинку.
У відео версії уроку ви знайдете більше прикладів з детальним поясненням кожного з них.
На цьому ми завершимо поточний урок. Удачі і до нових зустрічей!
