Как создать спрайт css

Руководство по спрайтам изображений в CSS

Спрайты — это двумерные изображения, которые состоят из объединения небольших изображений в одно большое с определенными координатами X и Y.

Чтобы отобразить одно изображение из объединенного, вы можете использовать CSS-свойство background-position , определяющее точное положение отображаемого изображения.

Преимущество использования CSS Image Sprite

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

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

Сокращение количества HTTP-запросов оказывает существенное влияние на сокращение времени отклика; это делает веб-страницу более отзывчивой для пользователя.

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

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

Весь процесс создания этого примера объясняется ниже.

Создание спрайта изображений

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

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

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

Как отобразить иконку из Image Sprite

Теперь подробнее. Используя CSS, мы можем отобразить только ту часть изображения, которая нам нужна.

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

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

Теперь возникает вопрос, как мы получили эти значения пикселей для background-position ? Давайте разберемся. Первое значение — горизонтальное положение, а второе — вертикальное положение фона.

Поскольку верхний левый угол значка Internet Explorer касается левого края, его горизонтальное расстояние от начальной точки, т. е. верхний левый угол спрайта изображения, равен 0 , и, поскольку он расположен на 5-й позиции, его вертикальное расстояние от начального точка спрайта изображения равна 4 x 50px = 200px , потому что высота каждой иконки равна 50px .

Просто поиграйте со значением свойства background-position из следующих примеров, и вы быстро узнаете, как оно работает.

Создание меню навигации с использованием CSS Image Sprite

В предыдущем разделе мы узнали, как отобразить отдельную иконку из спрайта изображения.

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

Основная HTML-разметка для навигации

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

Применение CSS на навигации

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

Шаг 1: Сброс структуры списка

По умолчанию неупорядоченные списки HTML отображаются с маркерами. Нам нужно удалить маркеры по умолчанию, установив атрибут list-style-type в значение none . Так же определим несколько свойств типографики для повторяющихся элементов .

Шаг 2. Настройка общих свойств для каждой ссылки

На этом этапе мы установим все общие CSS-свойства, которыми будут обладать ссылки, color , background-image , display , padding и т.д.

Шаг 3: Установка состояния по умолчанию для каждой ссылки

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

Например, иконка Firefox находится в начальной точке, то есть в верхнем левом углу спрайта изображения, поэтому нет необходимости сдвигать фоновое изображение. Следовательно, вертикальное и горизонтальное положение фона в этом случае будет равно 0 . Аналогично, вы можете определить background-position для других иконок внутри спрайта изображения.

ul.menu li.firefox a < background-position: 0 0; >ul.menu li.chrome a < background-position: 0 -100px; >ul.menu li.ie a < background-position: 0 -200px; >ul.menu li.safari a < background-position: 0 -300px; >ul.menu li.opera a

Шаг 4: Добавление состояний наведения для ссылок

Добавление состояний наведения имеет тот же принцип, что и добавление вышеуказанных ссылок. Просто переместите их верхний левый угол в начальную точку (то есть в верхний левый угол) спрайта изображения, как мы делали выше. Вы можете просто рассчитать background-position , используя следующую формулу:

Вертикальная позиция в режиме наведения = Вертикальная позиция в нормальном состоянии — 50px

ul.menu li.firefox a:hover < background-position: 0 -50px; >ul.menu li.chrome a:hover < background-position: 0 -150px; >ul.menu li.ie a:hover < background-position: 0 -250px; >ul.menu li.safari a:hover < background-position: 0 -350px; >ul.menu li.opera a:hover

Готово! Вот окончательный код HTML и CSS после объединения всех шагов:

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Разработка сайтов для бизнеса

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник