Спрайты Css

CSS Спрайт это по сути своей игра с псевдоклассом :hover при помощи параметра background-position.

Псевдокласс :hover задает оформление элемента при наведении на него курсора.

Может применяться для элементов списков (li), блоков (div, span), элементов таблиц (td, tr), ну и конечно же ссылок (a).

Свойство background-position устанавливает местоположение фоновой картинки. При этом свойству обычно присваивается пара значений – для определения горизонтального и вертикального положений.

Рассмотрим пример. У нас есть блок div. Задача: при наведении курсора на этот блок изменить его фон, т.е лампочку зажечь.

HTML:

<div class="parent">
<div class="child">Лампочка гори</div>
</div>

CSS:

.parent {
    background: url("фон/sprites1.png") no-repeat scroll 0 0 transparent;
    min-height: 48px;
}
.parent:hover {
    background: url("фон/sprites1.png") no-repeat scroll 0 -50px transparent;
    min-height: 48px;
}
.child {
    color: #E32625;
    padding-left: 48px;
}
.parent:hover .child {
    color: #F9CB44;
}

А вот и наш фон, при помощи которого это сделано

Причем картинка всего одна.

А зачем нам использовать спрайты?

Аналогичного эффекта можно добиться используя две отдельные картинки. Но, используя CSS спрайты мы:

• Уменьшаем количество запросов браузера к веб-серверу. Каждый тэг <img /> и фоновый рисунок составляют отдельный запрос. Легко догадаться, что уменьшение количества HTTP запросов является одним из основных способов оптимизации загрузки и эффективности работы сайта.
• Одновременно снижается нагрузка на сервер, что важно при высокой посещаемости сайта.
• Устраняем задержку перед отображением второй картинки, т.к. браузеру уже не надо загружать второе изображение после наведения указателем мыши на картинку – оно уже есть.
• Уменьшаем общий размер фалов с графикой.
• Возлагаем труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами.

Недостатки

• Увеличивается время затрачиваемое на дизайн сайта, так как мега спрайты часто требуют продолжительных проверок и выравнивания изображений состояний.
• Увеличивается затраты на разработку.
• Могут возникнуть ограничения в использовании потенциальных преимуществ атрибутов title и alt .

Данный спрайт создан при помощи сервиса Sprite Cow (желательно использовать файлы с прозрачным фоном)