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

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

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

автор

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

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

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

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

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

На этом мы завершим текущий урок. Удачи и до новых встреч!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Дмитрий Беглов

    Спасибо, Андрей, за урок.
    Я думаю, что для многих начинающий веб-разработчиков он будет полезным.

    Мне кажется, что также будет интересно рассказать о том, как правильно данные CSS-спрайты создаются.
    Например, не рекомендуется (при ручном создании) пристыковывать сменяющиеся изображения вплотную друг к другу, т.к. в разных браузерах (на разных устройствах) могут быть незначительные погрешности при вычислениях фоновой позиции. Поэтому можно делать небольшой отступ (например, 1px) между изображениями, чтобы ненужная часть спрайта случайно не оказалась в поле зрения пользователя. :)

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

  2. Людмила

    Хороший полезный урок, спрайты бывают нужны когда много рисунков

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree