CSS-спрайты в веб-дизайне: принцип ручного построения и отображения с помощью стилей

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

Ну а теперь от слов к наглядным примерам.

Пример 1

В следующем примере выведем несколько иконок из одного файла в произвольной последовательности на странице.  

Само изображение - спрайт. Название файла - "css-sprite-01.png"

Выводим иконки в произвольном порядке с помощью списка и стилей.

 

Рассмотрим этот пример подробнее. Для удобства и простоты в примере спрайт сделан размером 200x200 px. То есть каждый из 4-х частей картинки размером 100x100 px. Для начала создадим в документе список с id="css-sprite-ul" и пунктами, нумерованными по порядку 001, 002 и т.д.:

  <ul id="css-sprite-ul"> <li id="css-sprite-001"></li> <li id="css-sprite-002"></li> <li id="css-sprite-003"></li> <li id="css-sprite-004"></li> </ul>  

Чтобы данный список отображал вместо пунктов нужные нам "куски" спрайта, добавим в файл .css сайта следующий код:

 

#css-sprite-ul{position:relative;height: 100px;margin: 0}
#css-sprite-ul li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#css-sprite-ul li, #css-sprite-ul a{height:100px;display:block;}
#css-sprite-001{left:0px;width:100px;heigth:100px;background:url('/images/css-sprite-01.png') 0 0;}
#css-sprite-002{left:200px;width:100px;heigth:100px;background:url('/images/css-sprite-01.png') 100px 0;}
#css-sprite-003{left:400px;width:100px;heigth:100px;background:url('/images/css-sprite-01.png') 0 100px;}
#css-sprite-004{left:600px;width:100px;heigth:100px;background:url('/images/css-sprite-01.png') 100px 100px;}

 

Если изучить эти стили, станет ясно как и где выводятся нужные нам части единой картинки-спрайта.

 

Пример 2

Создадим кнопку - спрайт, при наведении на которую будет появляться тень и меняться надпись. Оба состояния будут содержаться в одном файле, что при наведении на нее не вызовет эффекта "паузы" или "мигания".

Сам спрайт:

Рабочий вариант:

 

Листинг html:

<ul id="css-sprite-button">
<li id="css-sprite-button-hover"></li>
</ul>

 

Листинг css-файла:

#css-sprite-button{position:relative;height: 35px;margin: 0}
#css-sprite-button li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#css-sprite-button li, #css-sprite-button a{height:35px;display:block;}
#css-sprite-button-hover{left:0px;width:220px;heigth:35px;background:url('/images/css-sprite-button-hover.png')0 0}
#css-sprite-button-hover:hover{background: url('/images/css-sprite-button-hover.png')0 35px}

 

Исполнение

Для создания спрайтов существует множество онлайн-генераторов, стоит ввести в поисковик что-то вроде "css спрайт генератор" и вы получите кучу ссылок на полезные ресурсы. Но и вручную такие спрайты делать не намного сложнее. Просто наложить на прозрачный слой наши изображения и выровнять по сетке.