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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

И стили:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree