Спрайти в CSS.

Спрайти в CSS.

CSS спрайт – це комбіноване зображення, в якому знаходиться багато різних картинок, і за допомогою властивості background-position ми виставляємо потрібну картинку в потрібному місці. Припустимо, у нас є кнопка, і ця кнопка змінює свій вигляд при наведенні на неї курсора миші. Можна зробити, наприклад, 2 картинки і потім підставляти в якості фону кнопки ту чи іншу картинку. Але недолік даного способу очевидна: в 2 рази більше файлів, приблизно в 2 рази більше розмір, отже, в 2 рази більше час завантаження, ніж 1 зображення. І ось техніка CSS спрайтів дозволяє створити лише одну картинку, в якій будуть відразу 2 фони у кнопки.

Наприклад у нас є зображення, припустимо, висотою 20 пікселів і шириною 100 пікселів. Кнопка має ширину 50 пікселів і висоту 20 пікселів. В одній картинці ми поміщаємо зображення обох станів (один за одним). HTML-код буде таким:
Кнопка

І CSS-код:

a {
background: url ( “button.jpg”) no-repeat left top; // Фон кнопки
display: block; // Зробити блоковим елементом
height: 20px; // Висота кнопки
width: 50px; // Ширина кнопки
text-decoration: none; // Прибрати межу підкреслення
}
a: hover {
background-position: right top; // Міняємо позицію фону, щоб було зміщення зображення
}

Ось таким чином можна в одній картинці зберігати безліч зображень. Підкреслю, що саме безліч зображень, а не тільки 2. Іноді мало не весь сайт складається з однієї картинки, в якій знаходяться всі використовувані зображення. Не вважаю, що це дуже добре, але зате буде мінімальна кількість файлів зображень і мінімальний розмір завантажених сторінок, що завжди добре.

1 Star2 Stars3 Stars4 Stars5 Stars (3 Votes, average: 4.67 out of 5)

Залишити коментар