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

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

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

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

css спрайты

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

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

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

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

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

как сделать css спрайт

Создание css спрайта – 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 спрайта – 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;
}

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59x59 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 спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 7

  1. tr0nik

    Спасибо!!! ну наконец-то все понятно и доступно объяснилось)

    • dimadv7

      Спасибо за комментарий. Рад помочь 🙂

  2. Seosko

    У вас нельзя скачать исходник, попробуйте перейти по ссылке — получите абракадабру. Всё-таки не понятны эти спрайты.. как же их сделать.

    • dimadv7

      Все работает, проверил на нескольких устройствах. Обычный архив.

  3. Волк

    там вроде должно быть не scc а css)))

    • dimadv7

      Ах ха, пора на воздух было идти, но нет, — писал в блог…. Спасибо большое)))Статье пол года, ты первый, кто заметил)))

    • Волк

      Крутой, а главное интересный блог! Удачи))

Добавить комментарий