Как сделать CSS-спрайты

Доброго времени суток, сегодня хочу рассказать вам о том, как сделать CSS-спрайт иконок для своего сайта. Да в прочем не только иконок, но и любых других элементов, например, кнопок, меню и т.д. Хоть графику всего лендинга.

Статья должна идти в рубрику ускорение и оптимизация, так как использование спрайтов ускоряет загрузку страницы, за счет того, что одна картинка, даже большего размера, грузиться быстрее, чем несколько — меньшего. Это происходит потому, что создается меньше обращений к серверу.

Для тех, кто не в теме, то спрайт выглядит так.

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

Но вопрос того, на сколько быстрее или медленнее грузится страничка с использованием спрайтов, я затрону в следующей статье, и она уже точно попадет в нужную рубрику. Так что подписывайтесь в Twitter, чтобы не пропустить анонс статьи. А в этом посте я постараюсь показать вам внутреннюю кухню того, как используются спрайты в вебе, на примере иконок своего блога.

Скачать исходник

Итак, я создал простенький спрайт иконок в Фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.

HTML разметка

Теперь нужно набросать HTML разметку. Ничего необычного. Ненумерованный список. Подписывайтесь на обновления.

<div class="socseti">
 <p>Подписывайтесь на обновления</p>
 <ul>
  <li><a href="#" class="tvitter"></a></li>
  <li><a href="#" class="googlePlus"></a></li>
  <li><a href="#" class="vk"></a></li>
  <li><a href="#" class="rss"></a></li>
 </ul>
</div>

Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте title ссылкам. И переходим к  добавлению стилей!

CSS разметка

Задаем стили контейнера:

.socseti {
 width: 270px;
 height: 150px;
 margin:200px auto;
 background: url(../images/bg-soc.png) no-repeat;
 padding: 15px;
}

Описываем стили для текста и ненумерованного списка, который флоатим по левому краю (стандартная процедура для менюшек и подобных элементов).

.socseti ul {
 overflow: hidden;
 width: 246px;
 margin:20px auto;
}

.socseti ul li {
 float: left;
 margin-left:2px;
}

.socseti ul li:last-child{
 margin-right: 2px
}

Теперь начинается самое интересное. Зададим общие стили для ссылок.

.socseti ul li a {
 display: block;
 width: 59px;
 height: 59px;
}

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим… Зададим фоновое изображение первой ссылке.

a.tvitter {
 background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
 transition: .3s;
}

a.tvitter:hover{
 background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
 transition: .3s;
}

На фон ссылки я ставлю большое изображение (спрайт нарисованный в Фотошопе). Но за счет того, что у ссылок заданный размер 59х59 px, то показывается лишь часть от общей картинки.

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

Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 59px, то мне необходимо подвинуть фон на -59px. А также, я хочу, чтобы цвет менялся с серого на цветной. Для этого мне нужно опустить фон на 59px. Что и показано здесь:

a.tvitter {
 background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
 transition: .3s;
}

Для того, чтобы при наведении изменялись стили класса, необходимо задать псевдокласс hover. Что я и делаю тут:

a.tvitter : hover{
 background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
 transition: .3s;
}

А для того, чтобы картинка меняла положение — изменил координаты отображения.

Свойство transition — используется для задания скорости изменения положения. Я поставил 0,3 секунды.

Аналогичным способом необходимо задать положение для остальных элементов спрайта, двигая его на 118 рх для отображения RSS — иконки, и вернуть в 0 px для отображения иконки «ВК».

Надеюсь, статья была вам полезна, и теперь вы будете использовать CSS-спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.