Создаем CSS спрайты. Примеры. Что такое CSS-спрайты

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

Спрайт - это не только вредный напиток, но и весьма полезная css – фишка, которая позволит улучшить состояние вашего сайта, а также даст массу новых идей в плане ее использования.

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

Зачем нужен спрайт на сайте?

Во-первых, это позволяет корректно отображать все ваши декоративные изображения. Имеются в виду не картинки в статьях, а непосредственно дизайн сайта. Особенно это актуально для

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

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

Ну и в-третьих, это просто красиво, упорядоченно и современно.

Принцип работы спрайта на сайте

Итак, в чем суть метода. Мы имеем одну большую картинку, на которой все детали дизайна размещены кучно. Вот, к примеру, спрайт всем известного Амазона (фрагмент):

А теперь вспоминаем начальные титры нашего старого советского фильма про Шерлока Холмса и доктора Вастона. Там, если вы помните, на кучу перемешанных букв наводили черный трафарет с прорезями и через них становился виден вполне читаемый текст.

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

Как выбирается? Легко и просто!

Любое изображение на спрайте имеет свои размеры по ширине и высоте. И также любое из них расположено в строго определенном месте. Значит, зная размеры картинки и ее координаты, можно легко указать браузеру, где ее искать и что конкретно показывать:

Button {
width: 180px;
height: 20px;
background: url(sprite.png) no-repeat;
background-position: 0 -80px;
}

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

background-position: 0 -80px;

Она как раз и указывает браузеру координаты нужной части изображения. Координаты задаются для левого верхнего угла выбранной части изображения. Первое число означает расстояние по горизонтали, второе - по вертикали.

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

Как создать спрайт для сайта?

В нашем случае выбранная часть находится у левого края спрайта (0 по горизонтали), и на 80 пикселей вниз от верхнего края спрайта.

Указав в качестве второго значения отрицательное число, мы тем самым как бы «подтягиваем» весь спрайт на 80 пикселей вверх. А так как ранее мы строго задали размер видимого изображения 180х20 пикселей, то будет виден не весь спрайт, а только нужная нам кнопка:

Координаты всех изображений на спрайте можно заранее выписать, воспользовавшись линейками в фотошопе.

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

На современных сайтах можно встретить большое число самой разной по типу графики: изображения товаров, аватарки пользователей, картинки, формирующие дизайн страниц, кнопки, иконки, логотипы и т.д. И чем крупнее проект, тем больше графических файлов там используется. При открытии отдельной страницы сайта в браузере происходит загрузка всех ее элементов. Поэтому, когда на ней размещено слишком много графики, скорость загрузки, как правило, значительно снижается. Что, в свою очередь, чревато неудобствами для посетителей вашего проекта.

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-спрайтов ? Представьте, что у вас есть шесть изображений, используемых в макете веб-страницы, и браузер должен загружать их все по отдельности. Если бы они были объединены в одно изображение, вы смогли бы существенно увеличить скорость загрузки. Это уменьшит количество обращений к серверу, необходимых для отображения страницы, что сделает ваш сайт быстрее.

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

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

Каждое изображение должно быть загружено. Браузер должен запросить на сервере изображение, сервер отправить его, а затем браузер должен его отобразить. Если бы дело касалось одного-двух изображений, особых проблем бы не возникло. Но так как рисунков загружается намного больше — это негативно сказывается на скорости загрузки страницы.

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

Как объединить изображения в спрайт

Существует два основных этапа создания CSS спрайтов . Сначала вы должны создать изображение и затем поместить его.

Объединение изображений

Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер (50 на 50 пикселей ):

Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его «sprite.png «. Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.

Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок (мегафон ) расположен в верхних 50 пикселях нового изображения, а второй (смайлик ) — в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS :

Позиционирование изображения на странице

В этом примере мы будем использовать рисунки в качестве фоновых изображений, размещенных в элементах div . Мы создадим пустые теги div для отображения изображений. Если на нашей странице нам нужно вывести изображение мегафона, мы используем CSS-класс «megaphone «:

Megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

Приведенный выше код CSS указывает ширину и высоту изображения мегафона (50 на 50 пикселей ), он также вызывает изображение «sprite.png «, которое является объединенным. Часть кода «0 0px » отвечает за отображение спрайта. Указание начинать вывод изображения с «0 0px » означает, что оно должно отображаться с 0 пикселей по оси X и с 0 пикселей по оси Y . Это значит «начинать вывод изображения сверху » и «начинать вывод изображения слева «.

Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей (где расположен мегафон ). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта . Мы создадим класс CSS под названием «smile «:

Smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: «0 -50px «. Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат (-50px ). Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.

Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом «megaphone «:

Когда нужно вывести смайлик, мы размещаем div с классом «smile «:

Таков основной принцип, как сделать спрайт CSS . Существует много способов реализовать это, и лучше выбрать тот, который больше подходит вам. В этой статье мы показали, как работают спрайты, но не рассмотрели их углубленно.

Перевод статьи «How to use CSS sprites » был подготовлен дружной командой проекта .

Спрайт (компьютерная графика)

Спрайты в двухмерной графике

Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения . На некоторых машинах (MSX 1, NES) программная прорисовка приводила к определённым ограничениям , а аппаратные спрайты этого ограничения не имели. Впоследствии с увеличением мощности центрального процессора , от аппаратных спрайтов отказались, и понятие «спрайт» распространилось на всех двумерных персонажей. В частности, в видеоиграх Super Mario и Heroes of Might and Magic вся графика спрайтовая.

К аппаратно ускоренным спрайтам вернулись в середине 1990-х годов - когда развитие мультимедиа и взрывное повышение разрешения и глубины цвета потребовало специализированный процессор в видеоплате. Именно тогда, как обёртка над аппаратным 2D-ускорителем, вышел DirectDraw . DirectX 8 ввёл общий API для двух- и трёхмерной графики, и в современных спрайтовых играх двухмерные спрайты выводятся точно так же, как и трёхмерные - как текстурированный прямоугольник.

CSS-спрайты

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

CSS-спрайты экономят трафик и ускоряют загрузку - браузеру потребуется запрашивать меньше файлов.

Спрайты в трёхмерной графике

Движки первого поколения

В первых трёхмерных играх, например, Wolfenstein 3D () и Doom (), персонажи представлялись в виде двумерных рисунков, изменяющих размер в зависимости от расстояния.

На 3D-акселераторах

На 3D-акселераторах применяется такая техника: объект рисуется в виде плоскости с наложенной на неё текстурой с прозрачными областями. Эта технология применяется в трёх случаях.

Оптимизация

Спрайты могут применяться для оптимизации графического ядра, когда отрисовка трёхмерной детализованной модели слишком накладна и может привести к сильному падению скорости рендеринга. Таковыми являются:

• Объекты, присутствующие в сцене в большом количестве и которые, будучи трёхмерными, имели бы большое количество граней и очень сильно влияли бы на производительность - например, публика (рис. 1), трава и т. д.
• Удалённые объекты, которые вблизи рисуются полигональными моделями.

Спецэффекты

Для большей правдоподобности изображения используется большое количество сравнительно маленьких спрайтов (так называемая система частиц).

Живая съёмка

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

• Живые актёры, например в realMyst (рис. 4).
• Рычаги управления в симуляторах самолётов, поездов и т. д., сфотографированные в реальной кабине.

Стоит заметить, что в некоторых спрайтовых играх, таких, как Rise of the Triad , спрайты фотографировались с актёров, а не с моделей, игрушек или рисунков.

Появление шейдеров частично снимает потребность в живой съёмке - многие нюансы фотоизображения уже можно передать полигональными моделями в реальном времени.

Разрушение иллюзии

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

Терминология

• Billboard - спрайт, постоянно повёрнутый лицом к камере (по аналогии с рекламными щитами на автодорогах, которые повёрнуты под наиболее выгодным углом).
• Impostor - спрайт, который заменяет трёхмерную модель на большом удалении.