Для чего нужны спрайты и что они из себя представляют, постараюсь изложить в этой статье. Для начала немного терминологии из Википедии:
Чаще всего — растровое изображение, свободно перемещающееся по экрану. Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. То есть легче всего воспринимать спрайт как перемещающуюся в пространстве проекцию какого-то объёмного тела так, что разница незаметна.
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 комментариев