В этой статье я подробно расскажу, что же такое
css спрайты, каким образом ними пользоваться и в чем Вы от этого выиграете при создании своего сайта.
css спрайт (css sprite) - одно изображение, которое включает в себя
несколько логически связанных изображений, используемых для создания
эффекта анимации при наведении курсора на элемент.
Существует два способа для создания эффекта анимации при наведении
курсора на ссылку:
Первый способ известен всем и заключается в том, что для ссылки
устанавливается фоновое изображение, а при наведении, для псевдокласса :hover
это изображение меняется на другое. Тем самым создаётся эффект
анимации.
Суть второго способа заключается в том, что используется одно фоновое
изображение вместо двух. И эффект анимации создаётся путем изменения
положения фонового изображения.
Преимущества css спрайтов
На первый взгляд может показаться, что страница грузится быстрей, если
изображения загружаются только тогда, когда они нужны, но это не так,
потому что для каждой загрузки создаются дополнительные HTTP запросы, а
это ухудшает эффективность вашей страницы. Одно изображение, конечно
же, весит больше чем два, но не на столько, что это может ускорить
загрузку страницы.
Исходя из этого можно сформулировать первое преимущество использования
css спрайтов над двумя разными изображениями:
Использование css спрайтов ускоряет загрузку страницы.
Использование css спрайтов создает дополнительное удобство для
управления эффектом, так как намного легче изменить с помощью css
положение фона, чем использовать новое изображения.
Второе преимущество:
Простота использования css спрайтов
css спрайты в действии
css спрайтыиспользуются чаще всего для ссылок, а чаще именно для меню, и для
элементов, которым нужно придать различное оформления для разных
ситуаций. Далее я подробно распишу эти два случая.
css спрайты для ссылок
В качестве примера я буду использовать следующее изображение для
создания спрайтов. Как Вы могли заметить, исходное изображение состоит
из двух изображений: для обычной ссылки и для активной ссылки.
a.sample-spite {
background:url(images/sprite_sample.jpg) 0 0 repeat-x;
width:246px;
height:29px;
display:block;
font-size:10px;
line-height:29px;
color:#FFFFFF;
font-weight:bold;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
a.sample-spite:hover {
background-position:0 -30px;
}
Выше я привел пример css стилей для ссылки, в которой используется css
спрайт. Как видите стили очень простые, но нас больше всего интересует
код, описынный в строках 2 и 15.
Во второй строке прописывается путь к фоновому изображению, а в 15
строке указано, как должно изменятся положение фона при наведении
курсора на ссылку. В этом и состоит весь принцип работы
css спрайтов -
изменение положения фона.
Теперь можно в html документе для любой ссылки поставить класс
sample-spite <a href=
"#" class=
"sample-spite">
Пример css спрайта</a>
и в результате в браузере вы увидите следующее:
Различное оформление элементов с помощью css спрайта
Этот способ тоже очень часто используется как и для ссылок. Он
заключается в том, чтоб придать различное оформление для элемента в
зависимости от его местоположения. Я покажу на примере, как с помощью
css спрайтовэто можно сделать. В качестве примера я буду использовать следующее
изображение:
Как видите здесь я включил в "спрайтовое изображение" три изображения.
Далее я создам таблицу с тремя колонками и покажу, как можно с помощью
css спрайтов сделать разное оформление для заголовков разных колонок.
.sample-sprites-table td h6
background:url(images/sprite_sample_2.gif) 0 0 no-repeat;
padding:0 0 0 25px;
font-size:10px;
line-height:18px;
color:#000000;
font-weight:bold;
text-transform:uppercase;
}
#sample-column-2 h6
background-position:0 -19px;
}
#sample-column-2 h6
background-position:0 -38px;
}
<table class="sample-sprites-table">
<tr>
<td><h6>Заголовок css спрайта</h6></td>
<td id="sample-column-2"><h6>Заголовок css спрайта 2</h6></td>
<td id="sample-column-3"><h6>Заголовок css спрайта 3</h6></td>
</tr>
</table>
Как видите, здесь код тоже очень простой для понимания, большинство
стилей используется для оформления стилей заголовков. По умолчанию, для
всех заголовков шестого уровня я установил фоновое изображение,
показанное выше. И далее с помощью
id для колонок и изменения положения фона, я изменил оформление заголовков в зависимости от того, в какой колонке он находится.
Заголовок css спрайта |
Заголовок css спрайта 2 |
Заголовок css спрайта 3 |
Этот
способ применения css спрайтовотличается от предидущего тем, что в первом примере изменяется
положение фонового изображения в зависимости от действия (в нашем
случае наведение курсора на ссылку), а во втором - в зависимости от
расположения заголовка.
Источник
