DEMETR Создание сайтов в Казани

Опубликовано

Спрайты (sprites)

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

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

Рассмотрим преимущества: Спрайтами проще и удобнее делать заливки для ссылок и блоков, экономия трафика, несколько изображений можно совместить в одном и не путаться (left-bg.gif, center-bg.gif, right-bg.gif – Например)

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

Нарисовали картинку: три пары иконок.

Серая часть – обычное состояние ссылки, цветная – при наведении.

Общий размер картинки – 24*144, т.е. каждая ссылка будет размером 24*24.
Большая часть работы уже проделана, так как при создании большого числа иконок, работа становится монотонной и утомляет. Дальше идет описание стилей и реализация.

a.link1, a.link2, a.link3{
display:block; width:24px; height:24px;
background:url(icons.gif); outline:none;
}

Для каждой ссылки установили высоту, ширину и фоновое изображение. По умолчанию оно выравнивается, как top left, дальше нам просто нужно будет изменять свойство background-position

HTML

<ul>
	<li><a class="link1" href="#"></a></li>
	<li><a class="link2" href="#"></a></li>
	<li><a class="link3" href="#"></a></li>
</ul>

CSS

a.link1:hover{background-position:0 -24px;}
a.link2{background-position:0 -48px;}
a.link2:hover{background-position:0 -72px;}
a.link3{background-position:0 -96px;}
a.link3:hover{background-position:0 -120px;}

Ссылка a.link1 при наведение (т.е. a.link:hover) имеет свойство background-position:0 -24px;. Означает это, что мы берем из картинки icons.gif (размером 24*144) только квадрат размером 24*24. Но не верхнюю часть, а ниже на 24px, т.е. минус 24. И так далее.

Спрайты (sprites): 0 комментариев