Css спрайты. Как создать CSS спрайты
На современных сайтах можно встретить большое число самой разной по типу графики: изображения товаров, аватарки пользователей, картинки, формирующие дизайн страниц, кнопки, иконки, логотипы и т.д. И чем крупнее проект, тем больше графических файлов там используется. При открытии отдельной страницы сайта в браузере происходит загрузка всех ее элементов. Поэтому, когда на ней размещено слишком много графики, скорость загрузки, как правило, значительно снижается. Что, в свою очередь, чревато неудобствами для посетителей вашего проекта.
CSS Sprites
На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».
После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.
После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.
Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.
CSS Sprites
В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).
Итого. В принципе, все нюансы как сделать CSS спрайты и их использовать мы рассмотрели. Генераторы помогут ускорить процесс создания элементов, но можно обойтись и фотошопом. Если будут какие-то вопросы, пишите в комментариях.
До того, как в CSS появился псевдокласс:hover , создание ролловера - элемента, который меняет свой вид при наведении курсора - реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии:hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.
Из-за этого может возникать небольшая задержка при появлении картинки в первый раз. И хотя при всех последующих наведениях курсора этой задержки уже нет, многие разработчики задумались над тем, как устранить эту проблему. Например, с помощью JavaScript можно обеспечить загрузку всех фоновых изображений заранее. Но есть способ, который не требует знаний языка программирования, и заключается он в использовании спрайтов.
Что такое спрайты CSS
CSS-спрайт - это один графический файл, который содержит много различных изображений. В нем могут быть собраны, к примеру, все графические элементы интерфейса, такие как иконки, кнопки и прочее. Также в спрайты часто объединяют фоновые картинки вместе с их вариациями для состояния:hover . Типичные примеры спрайтов:
Спрайт, в котором собраны все используемые иконки
Спрайт со значками соцсетей и их вариациями для:hover
Преимущества CSS-спрайтов
- CSS-спрайт содержит в себе фоновые изображения для различных состояний элементов, и загружается он целиком при загрузке веб-страницы. Это исключает подтормаживание ролловера при первичном наведении курсора на элемент.
- Сокращается количество обращений к серверу. Ведь для загрузки каждой маленькой иконки требуется отдельный запрос, а чем меньше обращений, тем лучше. Для загрузки спрайта понадобится всего один запрос на сервер.
- Еще одно преимущество хранения множества картинок в спрайте заключается в том, что если у них похожая палитра цветов, то одно большое изображение будет весить меньше, чем отдельные маленькие картинки в сумме.
- Всё это в целом положительно влияет на скорость загрузки сайта.
Как создать спрайт из картинок
В классическом случае спрайты создаются в редакторе изображений. Мелкие картинки последовательно размещаются на большом полотне (нередко с прозрачным фоном), которое затем сохраняется как графический файл.
Ручной способ создания спрайтов - занятие довольно долгое. Поэтому, когда использование спрайтов стало набирать обороты, появились онлайн-сервисы по автоматическому созданию спрайт-листов, например, Spritegen , RetinaSpriteGenerator и другие. Вы загружаете необходимые изображения в отдельных файлах на сайт, и для вас генерируется спрайт, который вы сразу можете скачать на компьютер.
Как пользоваться спрайтами CSS
Теперь пора узнать, как использовать CSS-спрайты на практике. Мы покажем вам небольшой пример с использованием спрайта, содержащего значки социальных сетей (мы показывали его выше). В обычном состоянии ссылки значок соцсети будет цветным (верхний ряд спрайта), а при наведении курсора он будет становиться серым (как в нижнем ряду).
HTML-разметка выглядит следующим образом:
Для ссылки на каждую соцсеть мы создали свой класс. Поскольку это тестовый пример, то мы не тратим время на заполнение атрибутов href - вместо ссылок на настоящие сайты мы поставили заглушки. Внутрь тега мы ничего не помещаем, потому что за внешний вид ссылок будут отвечать их фоновые изображения со значками соцсетей.
Переходим к CSS. Первым делом запишем общие стили для всех ссылок:
A { background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }
Следующие две строки - высота и ширина каждого элемента . Каким образом определялись эти значения? Здесь мы отталкивались от размеров значков в спрайте. Высота каждой иконки равна 98 пикселям, а ширина - 100 пикселей. Далее мы будем позиционировать фоновую картинку для каждой ссылки, подстраивая фон таким образом, чтобы значок ровно вписался в «окошко» ссылки размером 98×100 пикселей.
A.facebook { background-position: left top; }
Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top:
A.twitter { background-position: -100px top; }
Аналогичное действие мы проделаем для остальных ссылок, прибавляя к каждому последующему горизонтальному позиционированию еще 100 пикселей, тем самым сдвигая спрайт всё больше и больше влево. Получится такая картина:
A.youtube { background-position: -200px top; } a.instagram { background-position: -300px top; } a.linkedin { background-position: -400px top; } a.tumblr { background-position: -500px top; } a.google { background-position: -600px top; }
Результат работы данного кода показан на скриншоте ниже:
Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y:
A:hover { background-position-y: bottom; }
В нашем случае этот стиль можно записать один для всех ссылок, и он будет работать правильно. Однако в других ситуациях, когда элементы в спрайте расположены в другом порядке, вам может понадобиться писать больше кода.
Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):
Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition):
A { transition: all 0.2s ease-out; }
Итак, теперь вы знаете, что такое спрайты CSS и чем они могут быть полезны. Помимо предотвращения задержек при загрузке фоновых картинок, использование спрайтов помогает снизить нагрузку на сервер. Кроме того, это удобный способ хранить все графические элементы интерфейса в одном месте.
Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации -
Доброго времени суток, сегодня хочу рассказать вам о том, как сделать css спрайт иконок для своего сайта. Да в прочем не только иконок, но и любых других элементов, например, кнопок, меню и т.д. Хоть графику всего лендинга.
Статья должна идти в рубрику , так как использование спрайтов ускоряет загрузку страницы, за счет того, что одна картинка, даже большего размера, грузиться быстрее, чем несколько — меньшего. Это происходит потому, что создается меньше обращений к серверу.
Для тех, кто не в теме, то спрайт выглядит так:
То есть, применительно к вебу – это одна картинка с множеством элементов, каждый из которых показывается в нужном месте сайта за счет позиционирования.
Но вопрос того, на сколько быстрее или медленнее грузится страничка с использованием спрайтов, я затрону в следующей статье, и она уже точно попадет в нужную рубрику. Так что подписывайтесь в Twitter , чтобы не пропустить анонс статьи.
А в этом посте я постараюсь показать вам внутреннюю кухню того, как используются спрайты в вебе, на примере иконок своего блога.
Итак, я создал простенький спрайт иконок в фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.
Создание css спрайта – html разметка
Теперь нужно набросать html – разметку. Ничего необычного. Ненумерованный список:
Подписывайтесь на обновления
Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте 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;
}
Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим…
Зададим фоновое изображение первой ссылке.
a. tvitter {
transition: .3s;
}
a. tvitter: hover{
transition: .3s;
}
Для того, чтобы отображался необходимый элемент спрайта, следует его спозиционировать. Для этого, после того, как фон ссылке задан, необходимо задать координаты.
Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 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 спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.
Для начала краткое вступление. При загрузке странице браузерам допускается только 2 запроса к серверу (у современных браузеров это число увеличилось до 6). Каждый элемент сайта будь то файл с таблицей стилей, файлы javascript, картинки являются независимыми загрузками, которые требуют отдельного запрос на сервер.
На сайте может быть множество миникартинок. Например, смайлики, стрелочки, всевозможные маленькие элементы для дизайна. Каждая такая картинка весит ничтожно мало, но за счет огромного числа запросов создаются проблемы со скоростью загрузки сайта.
Еще давным-давно (2003-2004) было предложено решение этой ситуации с главной целью ускорить загрузку сайта с помощью уменьшения количества запросов к серверу. Это технология получила название "Спрайты".
Что такое спрайты CSS
Спрайт CSS - технология объединения небольших картинок в одну. При помощи сдвигов через CSS достигается вырезание нужной части картинки
Например, вместо 10 картинок грузится одна, но побольше. При грамотном распределение это ускоряет работу сайта. Однако здесь главное не переусердствовать. Не всегда объединение картинок дает преимущество в загрузке сайта.
Пример спрайта CSS
Рассмотрим небольшой пример реализации спрайта CSS. Допустим, мы сделали следующую картинку из трех отдельно взятых стрелочек.
Чтобы обратится к нужной стрелке в CSS надо прописать
Вот как это выглядит на странице:
В рассмотренном примере мы использовали отрицательные отступы. Это делается, для того, чтобы поднять изображение вверх. Например, есть следующий спрайт:
Чтобы вырезать значок RSS мы должны написать следующие отступы
background-position : -90px -40px ;
В примере мы подняли изображение на 40 пикселей вверх и на 90 влево.
Плюсы использования спрайтов
- Сокращение количества обращений к серверу
- Если используются динамическое изменение картинки (например, при наведении в элементе меню), то картинка уже будет находится в кэше и поэтому не будет запаздывания на загрузку в нужный момент
- Если фон объединяемых изображений схож, это еще и уменьшить суммарный "вес" изображений
Из минусов спрайтов: сложность работы в случае ручного труда. Но благо есть бесплатные сервисы, которые готовы упростить работу и сделать все за вас.
Где-то неделю назад один из моих подписчиков попросил меня рассказать о CSS спрайтах , что это такое вообще и с чем их едят. Поэтому сегодня я решил написать эту статью, в которой расскажу, что такое CSS спрайты и где их используют .
CSS спрайт - это комбинированное изображение, в котором находится много различных картинок, и с помощью свойства background-position мы выставляем нужную картинку в нужном месте. Допустим, у нас есть кнопка, и эта кнопка меняет свой вид при наведении на неё курсора мыши. Можно сделать, например, 2 картинки и затем подставлять в качестве фона кнопки ту или иную картинку. Но недостаток данного способа очевиден: в 2 раза больше файлов, примерно в 2 раза больше размер, следовательно, в 2 раза больше время загрузки, чем 1 изображение. И вот техника CSS спрайтов позволяет создать всего лишь одну картинку, в которой будут сразу 2 фона кнопки.
Чтобы стало понятнее, давайте решим эту задачу. У нас имеется изображение, допустим, высотой 20 пикселей и шириной 100 пикселей. Кнопка имеет ширину 50 пикселей и высоту 20 пикселей. В одной картинке мы помещаем изображения обоих состояний (друг за другом). HTML-код будет таким:
Кнопка
И CSS-код :
A {
background: url("button.jpg") no-repeat left top; // Фон кнопки
display: block; // Сделать блочным элементом
height: 20px; // Высота кнопки
width: 50px; // Ширина кнопки
text-decoration: none; // Убрать черту подчёркивания
}
a:hover {
background-position: right top; // Меняем позицию фона, чтобы было смещение изображения
}
Вот таким хитрым образом можно в одной картинке хранить множество изображений. Подчеркну, что именно множество изображений, а не только 2 . Иногда чуть ли не весь сайт состоит из одной картинки, в которой находятся все используемые изображения. Не считаю, что это очень хорошо, но зато будет минимальное количество файлов изображений и минимальный размер загружаемой страницы, что всегда хорошо.