1 539 Одной из ключевых задач CSS спрайтов является оптимизация графики загружаемой страницы. Какова задача этой оптимизации и зачем ее необходимо выполнять? Идея заключается в следующем: пока страница не оптимизирована, графические элементы представляют собой отдельные файлы. Количество подобных элементов превышает 5 или 10 штук, следовательно, для того, чтобы загрузить каждую картинку, браузер осуществляет отдельный запрос.
Логично предположить, что ускорить процесс можно за счет объединения графических элементов. Отображение частей настраивается через CSS. После этого браузер будет выполнять только один запрос, чтобы загрузить изображения. Благодаря этому страница будет загружаться в разы быстрее. Вот и весь принцип оптимизации.
Кроме этого спрайты используются для того, чтобы правильно сформировать эффект визуального изменения элемента в момент, когда пользователь наводит на него курсор. Отсутствие этого можно заметить, когда посетитель видит мигающую кнопку: у кнопки есть два состояния — изначальное и в момент наведения, между загрузкой этих состояний при отсутствии организации возникает слишком длинная пауза, из-за чего возникает эффект мигания.
Итак, рассмотрим основные примеры CSS спрайтов:
У нас есть перечень иконок в одном файле. Задача: вывести некоторые картинки в рандомной последовательности.
Картинка (css-sprite-01.png) ниже — спрайт.
После применения списка стилей иконки остаются выведенными в произвольном порядке.
Давайте более детально разберемся с этим примером. Разрешение первоначальной изображения-спрайта: 200 * 200 px. Главная картинка разделена на 4 куска, каждый из которых имеет разрешение 100*100 px. Нам необходимо создать в документе список с идентификатором css-sprite-ul. Пункты списка пронумеруем как 001, 002, 003 и т.д.
|
1 2 3 4 5 6 |
<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, где вставляем этот код:
|
1 2 3 4 5 6 7 |
#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-код:
|
1 2 3 |
<ul id="css-sprite-button"> <li id="css-sprite-button-hover"></li> </ul> |
Код css-файла:
|
1 2 3 4 5 |
#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 спрайтов. Это вариант для тех, кто не хочет особо разбираться с ручным способом. Самостоятельно это делается так: создается прозрачный слой, накладываются изображения, выровненные по сетке.
