css спрайты

http://cssmake.ru/component/content/article/7/111

( 0 - user rating )

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

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

Существует два способа для создания эффекта анимации при наведении курсора на ссылку:

Первый способ известен всем и заключается в том, что для ссылки устанавливается фоновое изображение, а при наведении, для псевдокласса :hover это изображение меняется на другое. Тем самым создаётся эффект анимации.

Суть второго способа заключается в том, что используется одно фоновое изображение вместо двух. И эффект анимации создаётся путем изменения положения фонового изображения.

Преимущества css спрайтов

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

Использование css спрайтов ускоряет загрузку страницы.

Использование css спрайтов создает дополнительное удобство для управления эффектом, так как намного легче изменить с помощью css положение фона, чем использовать новое изображения.
Второе преимущество:

Простота использования css спрайтов

css спрайты в действии

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

css спрайты для ссылок

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

1. a.sample-spite {
2. background:url('/images/sprite_sample.jpg') 0 0 repeat-x;
3. width:246px;
4. height:29px;
5. display:block;
6. font-size:10px;
7. line-height:29px;
8. color:#FFFFFF;
9. font-weight:bold;
10. text-transform:uppercase;
11. text-align:center;
12. text-decoration:none;
13. }
14. a.sample-spite:hover {
15. background-position:0 -30px;
16. }

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

Теперь можно в html документе для любой ссылки поставить класс sample-spite

<a href="#" class="sample-spite">Пример css спрайта</a>

и в результате в браузере вы увидите следующее:

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

Различное оформление элементов с помощью css спрайта

Этот способ тоже очень часто используется как и для ссылок. Он заключается в том, чтоб придать различное оформление для элемента в зависимости от его местоположения. Я покажу на примере, как с помощью css спрайтов это можно сделать. В качестве примера я буду использовать следующее изображение:

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

1. .sample-sprites-table td h6
2. background:url('/images/sprite_sample_2.gif') 0 0 no-repeat;
3. padding:0 0 0 25px;
4. font-size:10px;
5. line-height:18px;
6. color:#000000;
7. font-weight:bold;
8. text-transform:uppercase;
9. }
10. #sample-column-2 h6
11. background-position:0 -19px;
12. }
13. #sample-column-2 h6
14. background-position:0 -38px;
15. }

1. <table class="sample-sprites-table">
2. <tr>
3. <td><h6>Заголовок css спрайта</h6></td>
4. <td id="sample-column-2"><h6>Заголовок css спрайта 2</h6></td>
5. <td id="sample-column-3"><h6>Заголовок css спрайта 3</h6></td>
6. </tr>
7. </table>

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

Заголовок css спрайта

Заголовок css спрайта 2

Заголовок css спрайта 3

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