Что такое CSS-спрайты и для чего они нужны?

Итак, что из себя представляют себя CSS-спрайты? Короче говоря это много картинок (обычно небольшого размера), объединенных в одну. Что-то вроде этого:

css спрайт пример

В бэкграунде каждого блока прописывается это изображение, затем оно смещается при помощи css-свойства бэкграунд-позишн (background-position).
Так как размер блока фиксированный, то мы видим только ту часть картинки, которую нужно.

Довольно нудно собирать все картинки в одну, а потом расчитывать их смещение, тогда зачем вообще это нужно?

Основное назначение CSS спрайтов:

Сокращение числа HTTP-запросов. Чем их меньше, тем меньше нагрузка на сервер и тем быстрее загрузится сайт — всё просто.

На этом многие «веб-мастера» успокаиваются и знать больше про спрайты ничего не хотят.

Ещё одно основное назначение:

Что за хрень?

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

Такие сайты — дело рук нубов. «Есть множество способов менять бэкграунд элементов при наведении!» — этой отговоркой они обычно пользуются, когда им предлагают использовать спрайты, чтобы решить проблему с несвоевременной подгрузкой.

Есть выход! И он очевиден!

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

Приведу пример интерактивной кнопки с использованием CSS-спрайта.

Сначала подготовим изображение:

интерактивная кнопка css-спрайт

Теперь нужно прописать CSS-стили для кнопки:

button{
   background:url(css-sprite.png) 0 -55px;
   height:50px;
   width:150px;
   cursor:pointer;
   }
 
button:hover{
   background-position: 0 0;
   }
 
button:active{
   background-position: 0 -109px;
   }

Если вы хоть немножко смыслите в CSS, то этот код должен быть вам понятен. В итоге вот что получается. Демо:

Как видите, никаких задержек нет, кнопка изменяет свой вид моментально при наведении курсора (и при нажатии тоже).

CSS-свойства background и background-position поддерживаются во всех основных браузерах, включая IE (начиная с 6-й версии).

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 6

  • Сергей6 сентября 2012 в 16:09 #

    Гуууд, все просто и по теме)))

  • Ольга21 ноября 2012 в 16:11 #

    Вот тоже интересно: решила собрать все имеющиеся картинки в спрайт и вроде бы сохранила их в .png, но вот какое дело: если картинка (в моем случае двойная) с закругленными краями, то не в спрайте она выглядит как и должна. А вот когда поместила их в спрайт, то браузер выделяет под него прямоугольник и получается что кнопка с закругленными краями на белом прямоугольнике. Может, конечно, я что-то не так сделала, но и там и там формат был .png . Странно....

    • Миша21 ноября 2012 в 20:11 #

      а ты используй CSS-свойство border-radius для скругления краев, например:

      .hello {
      	border-radius: 5px
      }

      кроссбраузерный вариант, ну кроме старых версий экспойлера:

      .hello {
      	-moz-border-radius: 5px;
      	-webkit-border-radius: 5px;
      	border-radius: 5px
      }
    • teoshok30 июля 2015 в 11:07 #

      Картинки сохрани в формате png-24 , выставь прозрачность и фона не будет.

  • gold12 февраля 2014 в 13:02 #

    в браузере кнопки не видны, что делать?

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Vladislav: Подправил имеющийся у меня код, по вашим рекомендациям, миниатюры начали отображаться, но они стали очень огромными, что...

  • Миша: Лишь предложил решение. Думаю можно нашаманить и так, чтобы чисто для рубрик было, не уверен только, что обойдётся без и...

  • Алексей: так надо комментарии в рубриках, а не на страницах в category.php а не в page.php

  • Миша: Здравствуйте! Сам WordPress это не поддерживает, но можно пойти хитрым путём. Первое, что пришло мне в голову, это:...

  • Алексей: Миша, здравствуйте! Подскажите, пожалуйста, что нужно, чтобы сделать комментарии на страницах рубрик. Я когда то давно...