Создаем и используем CSS-спрайты


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

Рассмотрим использование спрайтов CSS на примере этой иконки:

которая по наведению должна становиться такой:

Обычными средствами данная задача реализуется следующим образом:

HTML:

<div class=”icon”></div>

CSS:

.icon {
	width: 128px; /* блок имеет ширину… */
	height: 128px; /* …и высоту изображения иконки */
	background: url(icon.jpg); /* первая иконка */
}
 
.icon:hover {
	background: url(icon_hover.jpg); /* вторая иконка */
}

Но нас это не устраивает по причине, описанной в первом абзаце данной статьи. Поэтому нам на помощь приходят так называемые спрайты. Суть спрайтов заключается в том, что вместо двух изображений с иконками у нас будет одно изображение с двумя иконками и когда у нас на странице загрузится первая иконка, автоматически загрузится и вторая. А мы, в свою очередь, отображаем лишь нужную нам часть нашего изображения. Нагляднее на картинке:

Создаем изображение спрайта

Далее несколько слов о том, как создать изображение спрайта. Открываем в Фотошопе нашу первую иконку в обычном состоянии. Идем Изображение > Размер холста. Кликаем на стрелочку вверх (это значит, что наш холст будет увеличиваться вниз) и выставляем высоту в два раза большую, чем высота нашей иконки. ОК.

Затем перетаскиваем в Фотошоп вторую нашу иконку, которая должна появляться по наведению. и располагаем ее в самом низу.

Далее нажимаем Файл > Сохранить для Web и устройств, выбираем нужный формат, сохраняем и получаем такое:

Отлично, наш спрайт готов. Теперь нужно его применить.
Код будет очень схож с первым случаем, который я описывал в начале статьи, только для в качестве фона для блока по наведению на него мыши мы будем использовать то же изображение, но с другим позиционированием фона.

<div class=”icon”></div>

CSS:

.icon {
	width: 128px; /* блок имеет ширину… */
	height: 128px; /* …и высоту изображения иконки */
	background: url(sprite.jpg) top center;  /* выравниваем наш спрайт-фон по верхнему краю блока */
}
 
.icon:hover {
	background-position: bottom center; /* а по наведению выравниваем фон по низу */
}

Всё готово и выглядит вот так:

Спрайты можно применять не только для случая с наведением. Можно просто расположить в него все иконки, использующиеся сайте и просто выбирать нужную область с помощью свойства background-position. Например, вот так:

background-position: 128px 0;

Это, пожалуй, всё, что я хотел сегодня рассказать. Спрашивайте, если что.
Скачать исходник

  • Все понятно, спасибо хорошо объяснили.

  • Бллееать, ты прям мысли мои читаешь, я давно хотел понять как это делается… Но никак не мог дойти, сейчас работаю маркетологом, не то css. надо будет что-то полепить. Спасибо)

  • width: 128px;
    height: 128px;

    Эти размеры можно и не указывать если две картинки одинаковые.

  • Я себе делал раньше через html

  • Sora

    Спасибо! Это точно пригодится.

  • Простенько, но со вкусом описано — надо заняться украшательством своего сайта, а то как раз изюма и не хватает. Спасибо за статью.

  • Спасибо вам за статью! Всё чётко и доступно.
    Благодаря этому материалу решили некоторые элементы на своём сайте изменить и сделать их с использованием CSS-спрайтов.

  • Никита

    Хм… Про «все в одном» я не догадался….

  • Спасибо, все понятно расписал. Когда изображений много скорость загрузки изображений можно увеличить в несколько раз!

  • Александр

    как я сам не допетрил — молодеЦ

  • Владимир

    А как мне сделать фоновую картинку спрайтом в случае, когда она должна быть меньше размера div-а и быть по центру? Нигде такого примера не нашёл. И похоже, никак нельзя. Для CCS 3 + HTML 5.

  • Владимир, можно задать нужные отступы в самой картинке спрайта.

    • тем самым увеличить время загрузки спрайта и всей страницы

  • Владимир

    Вадим, спасибо за реакцию. Только когда писал второй абзац, понял Ваш совет, что Вы имели ввиду. 🙂 К сожалению, в моей ситуации этот совет не сработает именно потому, что размер div-а не фиксирован.
    Текущий пример как и все остальные в инете, которые я нахожу, основаны на том, что именно div является той «рамкой» которая ограничивает видимую область спрайта. А не нужно отрисовать маленький спрайт по центру большого div-а (с произвольным размером, к слову сказать), что, по-видимому, невозможно в текущей версии CSS3.

    • Можно в див положить отдельный элемент с абсолютным позиционированием.
      у дива
      position:relative
      у элемента
      position: absolute;
      left:50%;
      top:50%;
      margin-left:-ширина/2;
      margin-top:-высота/2;

  • Чтобы не высчитывать координаты вручную советую воспользоваться онлайн генератором:
    http://simpreal.org.ua/csssprites
    Загружаете туда картинки, выделяете области и получаете картинки со стилями. Проект можно сохранять чтобы при изменении исходных картинок не выделять заново области.