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

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

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

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

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

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

И стили:

Так будет выведена черно-белая иконка, которая при наведении будет замещаться цветной. Задача вроде бы решена, однако, в этом решении есть несколько недостатков. Первое: при первом наведении на картинку мы можем увидеть «эффект мигания», когда черно-белая картинка пропадает, а цветная появляется через некоторый промежуток времени. Связано это с тем, что в этот промежуток времени цветная картинка загружается с сервера. И здесь мы подошли ко второму недостатку. Поскольку картинка загружается с сервера, то, получается, это дополнительный HTTP-запрос к серверу, который занимает дополнительное время и приводит к первой проблеме.

Эти недостатки легко устраняются с помощью техники CSS-спрайтов, когда мы объединяем несколько изображений в одном и показываем в каждый конкретный момент только часть одного большого изображения.

Вот пример использования CSS-спрайтов:

И стилевое оформление:

Картинка sprite.png является листом спрайтов и на ней размещено 3 спрайта социальных иконок. Каждая иконка имеет размеры 60х60 пикселей и в каждый конкретный момент мы показываем часть большого изображения заданных размеров (60х60 пикселей). Ну а с помощью свойства background-position мы можем указать, какую именно часть изображения нужно показать в обычном состоянии и при наведении на картинку.

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

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

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

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