Как использовать спрайты CSS?

Здравствуйте, дорогие друзья и коллеги!

Вы уже используете css спрайты на своих сайтах? Если ещё нет нет, или только начинаете то эта статья для вас. В ней вы узнаете что это такое, зачем они нужны, почему их нужно использовать и как это правильно делать.

Что такое спрайты css и зачем они нужны?

Спрайт представляет собой одну большую картинку, на которой объединены несколько других более мелких.

Используется эта картинка для задания фона для элементов на сайте при помощи CSS.

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

Допустим у нас есть 2 ссылки для которых нам нужно указать в качестве фона соответствующие социальные сети.

Вёрстка будет выглядеть так:

Теперь давайте загрузим спрайт с несколькими изображениями соцсетей на хостинг и в CSS зададим для них фон.

Для задания фона мы используем большое изображение с несколькими картинками и при помощи CSS свойства background-position смещаем фон как нам нужно.

При этом сначала мы указываем смещение по горизонтали и по вертикали.

Для второго блока это будет выглядеть так:

По сути всё то же самое, но меняется только значения CSS свойства background-position.

Раз уж мы заговорили об оптимизации, то имеет смысл присвоить всем элементам, для которых мы будем использовать спрайты CSS один общий класс. Это связано с тем что ряд CSS свойств у этих элементов будет повторяться (высота, ширина, фон и т.д.) и чтобы не писать их много раз для каждого элемента можно задать их сразу для всех один раз.

Вёрстка будет выглядеть так:

А так будет выглядеть CSS:

Видите разницу?

Зачем использовать CSS спрайты?

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

Преимущества :

• позволяют уменьшить время загрузки за счёт того что обращение к серверу для загрузки изображения происходит только один раз. Когда у вас для каждого элемента задаётся отдельное фоновое изображение, то при загрузке страницы каждого изображения происходит обращение к серверу.
  Если картинок на сайте не много то большой разницы по скорости загрузки вы не почувствуете.
• Сокращает суммарный вес изображений сайта, особенно если у них схожая палитра.
• Загрузка изображений происходит быстрее.
• Позволяют избежать эффекта пропадающего изображения при наведении. Подробнее об этом ниже.

Недостатки:

• Нужно потратить определённое время на создание такого объединённого фонового изображения.
• Сложнее задавать фон так как нужно вычислять значения для смещения.
• Для того чтобы добавить, удалить или изменить одно изображение приходится править весь спрайт.

Использование CSS спрайтов для создания эффектов при наведении

Если вы решите создать эффект смены фонового изображения для элемента при наведении, то столкнётесь со следующей проблемой.

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

Как здесь:

Для решения этой проблемы делаем следующее:

1. 1.Подготавливаем спрайт с двумя картинками
   
2. 2.Задаем верхнее изображение в качестве фона
   
   PHP

   .smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile.png)no-repeat; /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }

   1 2 3 4 5 6

   .smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile.png)no-repeat;  /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }

3. 3.Задаём смещение фона при наведении
   
   PHP

   .smile:hover { background-position: 0px -80px; }

   1 2 3

   .smile:hover { background-position: 0px -80px; }

   Получится вот так:

   Наведи на меня!
4. 4.Для интереса можно ещё задать CSS свойство:
   PHP

   transition: all 0.5s ease;

   1	transition: all 0.5s ease;

   Его добавляем и к селекторам .smile и .smile:hover и получаем довольно интересный эффект при наведении, а заодно и наглядно видим как происходит смещение фона.

В итоге получится так:

В общем полезная штука эти CSS спрайты, но готовить и редактировать их довольно сложно!

К счастью, для облегчения этой задачи существуют специальные онлайн генераторы спрайтов.

Удобный генератор спрайтов CSS

Одним из таких сервисов является генератор спрайтов www.toptal.com

Для генерации спрайта нам нужно:

1. 1.Переходим по ссылке и нажимаем на кнопку «CHOOSE FILE»
   
2. 2.Загружаем с компьютера заранее подготовленные изображения, которые нужно объединить в спрайт и наживаем кнопку «Открыть».
   
   Можно выбирать сразу несколько зажав кнопку CTRL на клавиатуре.
3. 3.Получаем готовый спрайт и фрагменты CSS кода, с указанием параметров смещения для каждого изображения! Скачиваем его себе на компьютер, нажав на кнопку «DOWNLOAD»
   
4. 4.Далее загружаем полученный спрайт CSS на свой сайт. Это можно сделать через файловый менеджер на вашем хостинге или использовать FTP клиент FileZilla, для которого я недавно писала статью с инструкцией. Вот ссылка: «Как пользоваться FTP-клиентом FileZilla?»
5. 5.Теперь для блоков, в которых вам нужно задать фоновое изображение, из спрайта используем указанные CSS свойства
   

   Класс вы можете использовать тот же что и здесь или задать свой.

6. 6.Так же вы в любой момент можете удалить или добавить изображения на созданный спрайт.

   Для этого существуют специальные кнопки:

   
   После редактирования готовый спрайт CSS нужно по новой скачать и загрузить на свой сайт с заменой предыдущей версии файла.

Конечно же, это не единственный генератор спрайтов, но мне он очень понравился из-за своей простоты. В нём нет ничего лишнего и, в то же время, есть всё что нужно.

Если вы используете какие то более удобные генераторы спрайтов пишите их названия в комментариях.

Надеюсь моя статья помогла вам разобраться в теме спрайтов CSS! Оставляйте свои комментарии и делитесь статьёй в соцсетях. Вдруг мы с вами не одни такие сумасшедшие и тема CSS спрайтов будет интересна ещё кому то :)

Успехов вам! До скорой встречи в других моих статьях!

С уважением Юлия Гусарь