Css спрайт: создание, применение — учебник CSS | Дропшиппинг

Содержание

основные техники и полезные инструменты / Хабр

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.

Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

Применение на практике

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

webdesign tuts

Пример кода для использования спрайтов на странице (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>

<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Также спрайты часто используют для создания простого и кроссбраузерного hover-эффекта (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

До или после?

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

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

Организация элементов дизайна

При подготовке файла со спрайтами стоит максимально уплотнить изображения, а если они одинакового размера (например иконки) — создать сетку, благодаря которой упростится использование спрайтов на сайте:

Готовить файл следует таким образом, чтобы будущие изменения в нем не влияли на расположение уже существующих элементов, иначе придется править весь CSS. PSD-файл со спрайтами обязательно должен быть хорошо маркирован: необходимо понятно называть все слои и группы, а также стараться не сливать слои, которые в будущем могут быть изменены.

Полезные инструменты

Compass

— отличный фреймворк, который умеет создавать спрайты из папки с изображениями. Также использует Sass.

Lemonade — инструмент, позволяющий создавать файлы со спрайтами простым добавлением строчки кода в Sass-файлы.

SpriteMe — букмарклет, который умеет генерировать и просматривать использованные на сайте спрайты.

Вот как выглядит рабочий слой букмарклета:

Fireworks CS6 — последняя версия включает функцию генерации спрайтов.

Полезные сервисы

Spritepad

— drag-and-drop сервис для создания спрайтов

Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами

Glue — командная строка для генерации спрайтов

CSS Sprites — еще один генератор, с расширенными настройками

SpriteRight — приложение-генератор для Мака

Использованные материалы и полезные ссылки:

Как сделать спрайт в 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></div>

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

<div></div>

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

Данная публикация является переводом статьи «How to use CSS sprites» , подготовленная редакцией проекта.

Что такое CSS-спрайты и для чего они нужны?

Итак, что из себя представляют себя CSS-спрайты? Короче говоря это много картинок (обычно небольшого размера), объединенных в одну. Что-то вроде этого:

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

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

Основное назначение CSS спрайтов:

Сокращение числа HTTP-запросов. Чем их меньше, тем меньше нагрузка на сервер и тем быстрее загрузится сайт — всё просто.

На этом многие «веб-мастера» успокаиваются и знать больше про спрайты ничего не хотят.

Ещё одно основное назначение:

Что за хрень?

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

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

Есть выход! И он очевиден!

Дело в том, что если использовать CSS-спрайт, то изображение загрузится сразу и полностью, а в дальнейшем просто будет изменять своё расположение, ну то есть смещаться. И вашим посетителям не придётся каждый раз сталкиваться с этой хренью, когда они захотят воспользоваться «интерактивным» меню.

Приведу пример интерактивной кнопки с использованием CSS-спрайта.

Сначала подготовим изображение:

Теперь нужно прописать CSS-стили для кнопки:

button{
   background:url(css-sprite.png) 0 -55px;
   height:50px;
   width:150px;
   cursor:pointer;
   }
 
button:hover{
   background-position: 0 0;
   }
 
button:active{
   background-position: 0 -109px;
   }

Если вы хоть немножко смыслите в CSS, то этот код должен быть вам понятен. В итоге вот что получается. Демо:

Как видите, никаких задержек нет, кнопка изменяет свой вид моментально при наведении курсора (и при нажатии тоже).

CSS-свойства background и background-position поддерживаются во всех основных браузерах, включая IE (начиная с 6-й версии).

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Как использовать спрайты CSS? | Impuls-Web.ru

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

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

Навигация по статье:

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

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

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

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

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

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

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

.vk { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ }

.vk {

width:40px; /*ширина блока, равная ширине картинки фона*/

height:40px; /*высота блока, равная высоте картинки фона*/

background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/

background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/

}

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

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

Отрицательное значение говорит о том что фон смещается вверх и влево. Если нужно сдвинуть вниз или вправо то используем положительные значения.

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

.twitter { width:40px; height:40px; background:url(images/soc-sprite.png)no-repeat; background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

.twitter {

width:40px;

height:40px;

background:url(images/soc-sprite.png)no-repeat;

background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/

}

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

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

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

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

.soc-button { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ } .vk { background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ } .twitter { background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

.soc-button {

width:40px; /*ширина блока, равная ширине картинки фона*/

height:40px; /*высота блока, равная высоте картинки фона*/

background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/

}

.vk {

background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/

}

.twitter {

background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/

}

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

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

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

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

Недостатки:

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

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

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

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

Как здесь:

Наведи на меня!

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

1.Подготавливаем спрайт с двумя картинками

2.Задаем верхнее изображение в качестве фона

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

.smile {

width:75px; /*ширина блока*/

height:75px; /*высота блока*/

background:url(images/smile.png)no-repeat; /*задаём фоновую картинку*/

background-position: 0px 0px; /*начальная позиция блока*/

}

3.Задаём смещение фона при наведении
.smile:hover { background-position: 0px -80px; }
.smile:hover {
background-position: 0px -80px;
}
Получится вот так:
Наведи на меня!
4.Для интереса можно ещё задать CSS свойство:
transition: all 0.5s ease;
transition: all 0.5s ease;
Его добавляем и к селекторам .smile и .smile:hover и получаем довольно интересный эффект при наведении, а заодно и наглядно видим как происходит смещение фона.

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

Наведи на меня!

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

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

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

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

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

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

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

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

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

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

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

Генератор Css спрайтов

Как использовать:

Подключите стиль спрайта на странице и используйте Div с классом из списка в Css файле

Пример

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sprite.css" /> </head> <body> <div></div> </body> </html>

Нужен быстрый инструмент для создания спрайтов из набора изображений?

Создаете игру или хотите ускорить загрузку вашего сайта?

На выходе вы получите архив со спрайтом и стилями для быстрого встраивания в ваше приложение.

Не требуется установка ПО на компьютер. Достаточно только браузера и выхода в интернет.

Работа доступна как со стационарного ПК, так и с планшета и ноутбука.

Ваши данные доступны только вам. Через некоторое время они удаляются с сервера. Наш сервис ничего не хранит.

Отзывы

Спасибо! Отличный сервис!

Спасибо, не ожидала, что так быстро!

Спасибо! Отличный сервис!

Нет кнопки «Получить»

Удобный сервис

Отличный инструмент!

Добавляет серый фон на прозрачную картинку

Другие сервисы

Создаем CSS спрайты. Примеры | Интересные задачи верстки

Примерный план статьи.

Что такое CSS спрайты?
Терминология
Особенности использования спрайтов
Практические примеры

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

Что такое CSS спрайты?

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

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

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

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

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

Чтобы не путаться давайте сразу обозначим термины:
Спрайт — это одна картинка из файла с несколькими изображениями.
Набор спрайтов — это сам файл с несколькими изображениями.

Особенности использования спрайтов

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

На странице как правило бывают три вида картинок — jpg, png и gif. У всех этих форматов есть два режима загрузки — это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

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

Но! Если финальный файл со всеми спрайтами будет слишком большой, то несмотря на всю прогрессивность и черезстрочность посетителю придется ждать даже частичную загрузку файла. Поэтому я не рекомендую использовать большие наборы спрайтов. Если файл большой то полностью теряется весь смысл спрайтов — ускорять работу сайта. С большими наборами спрайтов пользователю придется ждать столько же, если не больше, как и при использовании обычных раздельных изображений.

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

Примеры использования спрайтов

Теперь поговорим о практике применения спрайтов. Я приведу два примера спрайтов — спрайты с маленькими иконками и спрайты с градиентами. Рабочие примеры обоих спрайтов можно посмотреть здесь:
https://verstaem.com/examples/sprites/index.html

Спрайты с иконками

В одном спрайте у меня будут иконки для:

Списка — одна иконка
Ссылок — три иконки
Формы поиска — одна иконка

То есть первый набор спрайтов у меня будет содержать пять картинок. Все картинки у меня будут одинакового размера — 16 на 16 пикселей. Спрайтами можно делать изображения с разными разрешениями, не обязательно чтобы разрешение всех картинок совпдало. При разном разрешении картинок чуть усложняется объединени этих картинок в один файл.

В итоге первый пример будет выглядеть так:

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы. Как подобрать эти отступы? Можно конечно рассчитать все по пикселям, но наш случай довольно простой, поэтому здесь лучше всего подобрать эти отступы на картинке экспериментальным путем. Сначала объединяем изображения просто на глаз, потом берем самую верхнюю картинку, ставим ее на нужное место. Если картинка находится на своем месте, но при этом откуда то торчит кусок другого изображения, то значит отступ нужно увеличить.

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

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

<ul>
	<li>Пункт списка</li> 
	<li>Еще один пункт списка</li> 
	<li>Пункт списка</li> 
	<li>Еще один пункт списка,<br /> но в две строки</li> 
	<li>Пункт списка</li> 
	<li>Еще один пункт списка</li> 
</ul>

Это html код списка.=»http://verstaem.com/»]? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://verstaem.com/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку — ссылку на мой блог.

Определяем нужную ссылку по href. Этот атрибут у рассматриваемой ссылки должен начинаться со строки http://verstaem.com/. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
Указываем в качестве фонового изображения картинку sprites.png
Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»

Остальные ссылки делаются полностью аналогично. Различаются только селектор выбора конкретной ссылки и расстояние на которое мы будет сдвигать фон.

Домашнее задание

Сохраните мой набор спрайтов. Сохраните файл с пятью иконками. После чего попробуйте сделать форму поиска с иконкой самостоятельно. Нужно сделать так, чтобы слева от формы поиска отображался нужный спрайт из набора. Задание довольно простое, но если возникнут сложности, то готовое решение можно посмотреть здесь, в исходном коде:
http://verstaem.com/examples/sprites/index.html

Спрайты с градиентами

Теперь посмотрим второй пример.

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

Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты — 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

Исходя из таких параметров окна я сделал три разных градиента по 30 пикселей в высоту и 1 в ширину. После чего я объединил все три градиента в один файл. Поставил картинки градиентов друг над другом. В итоге получился файл высотой 90 пикселей и шириной в 1 пиксель. Файл слишком мелкий, в статеьй вы его просто не увидите. Вот тут файл можно открыть отдельно http://verstaem.com/examples/sprites/gradients.png.

Теперь напишем html код окошка:

<div>
	<div></div>
	<div>
		<div></div>
		<div></div>
	</div>
	<div></div>
</div>

Начинаем применять спрайты. Начнем с заголовка окна:

#window-header{
	height:30px; 
	background:#C0C0FF url('gradients.png') 0 0 repeat-x;
}

В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

Точно так же как и заголовок поставим градиент для подвала:

#window-footer{
	height:30px;
	background: #C0FFC0 url('gradients.png') 0 -60px repeat-x;
}

Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

CSS код будет следующий:

#window-body{
	position:relative; 
}
	#window-body-gradient{
		position:absolute; 
		left:0; 
		top:0; 
		width:100%; 
		height:30px; 
		background:url('gradients.png') 0 -30px repeat-x;
	}
	#window-body-text{
		position:relative;
	}

Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

<div>
	<div></div>
	<div></div>
</div>

Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива — 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

Такие длинные пояснения я делаю, чтобы совсем все было понятно. Но на самом деле если вы немного разбираетесь в верстке, то вам наверное будет достаточно посмотреть сами примеры:
http://verstaem.com/examples/sprites/index.html
В очередной раз продублировал ссылку.

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

CSS спрайты — создание и использование, генераторы CSS спрайтов

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

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

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

Чаще всего создают CSS спрайты для иконок, лейблов, значков и прочих мелких изображений, так как на одной большой картинке может поместиться сразу несколько десятков таких элементов. Да и вставлять их в нужные места страницы поодиночке – весьма неблагодарный труд. Кроме того, с их помощью реализуют css эффект hover при наведении на картинку или пункт меню.

Вот парочка примеров «подобных конструкций»:

У использования CSS спрайтов есть два основных преимущества:

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

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

В качестве недостатков CSS спрайта можно назвать:

больше сложностей при написании CSS стилей;
дополнительные временные затраты на создание изображения CSS спрайта из комбинации картинок;
необходимость изменения всего изображения при смене одной из его составляющих (например, какой-то иконки).

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

Создание CSS спрайтов

Давайте разберемся как использовать спрайты CSS. В теории тут все довольно просто.

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

Затем в основном CSS файле сайта к нужным элементам (кнопки, иконки, логотипы, div блоки) прописывается атрибут background:url. В скобках указывается относительный URL-адрес нашего CSS спрайта, к примеру, background:url(«image/sprite.png«).

Следуещий шаг – указание конкретного места (координат) размещения нужной нам картинки в спрайте. Это делается посредством атрибута background—position (о нем детально уже рассказывали). Через двоеточие следует указать позицию нашей картинки в пикселях относительно верхнего левого угла спрайта, к примеру, background—position: -47px -50px. Здесь задается смешение вправо и вниз.

Если по какой-либо стороне смещение составляет 0 пикселей, то обозначение «px» допускается опустить. Можно также указать сторону явно, если смещение происходит только по ней. К примеру, background-position: left 35px (смещение влево на 35 пикселей).

Залил на Codepen конкретный пример как сделать спрайт CSS для иконки, у которой при наведении меняется стиль оформления:

Генераторы CSS спрайтов

В принципе, создать CSS спрайт можно вручную в фотошопе (это всего лишь картинка). Но зачем «изобретать велосипед», если для реализации этой цели уже придумано большое количество готовых программных решений. В частности, существуют специальные онлайн-сервисы генераторы спрайтов CSS. Один из самых популярных из них — CSS Sprites.

CSS Sprites

На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».

После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.

После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.

Dan’s Tools CSS Sprite Generator

Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.

CSS Sprites

В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).

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

CSS-спрайтов изображений

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

Спрайт изображения — это набор изображений, помещенных в одно изображение.

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

Использование спрайтов изображений уменьшит количество запросов к серверу и сохранит пропускная способность.

Спрайты изображений — простой пример

Вместо трех отдельных изображений мы используем одно изображение («img_navsprites.gif «):

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

В следующем примере CSS определяет, какая часть img_navsprites.gif изображение для показа:

Пример

#дом {
ширина: 46 пикселей;
высота: 44 пикс;
фон: url (img_navsprites.gif) 0 0;
}

Попробуй сам »

Объяснение примера:

— определяет только маленькое прозрачное изображение. потому что атрибут src не может быть пустым.Отображаемое изображение будет фоновым изображением, которое мы укажем в CSS
ширина: 46 пикселей; высота: 44 пикс; — Определяет часть изображения, которую мы хотим использовать
фон: url (img_navsprites.gif) 0 0; — Определяет фоновое изображение и его положение (слева 0 пикселей, сверху 0 пикселей)

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

Спрайты изображений — создание списка навигации

Мы хотим использовать изображение спрайта («img_navsprites.gif «), чтобы создать список навигации.

Мы будем использовать список HTML, потому что он может быть ссылкой, а также поддерживает фоновое изображение:

Пример

#navlist {
позиция: относительная;
}

#navlist li {
маржа: 0;
отступ: 0;
стиль списка: нет;
позиция: абсолютная;
верх: 0;
}

#navlist li, #navlist a {
height: 44px;
дисплей: блочный;
}

#home {
left: 0px;
ширина: 46 пикселей;
фон: url (‘img_navsprites.gif ‘) 0 0;
}

#prev {
left: 63px;
ширина: 43 пикселя;
фон: url (‘img_navsprites.gif’) -47px 0;
}

#next {
left: 129px;
ширина: 43 пикселя;
фон: url (‘img_navsprites.gif’) -91px 0;
}

Попробуй сам »

Объяснение примера:

#navlist {position: relative;} — позиция установлена относительно, чтобы разрешить абсолютное позиционирование внутри него
#navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} — поля и отступы установлены на 0, стиль списка удален, и все элементы списка абсолютное положение
#navlist li, #navlist a {height: 44px; display: block;} — высота всего изображения 44px

Теперь приступим к позиционированию и стилю для каждой конкретной детали:

#home {left: 0px; width: 46px;} — расположен до упора влево, и ширина изображения 46px
#home {background: url (img_navsprites.gif) 0 0;} — Определяет фон изображение и его положение (слева 0 пикселей, сверху 0 пикселей)
#prev {left: 63px; width: 43px;} — расположен на 63 пикселя относительно справа (# ширина дома 46 пикселей + дополнительное пространство между элементами) и ширина 43px.
#prev {background: url (‘img_navsprites.gif’) -47px 0;} — определяет фон изображение 47 пикселей вправо (#home width 46px + линия 1px делитель)
#next {left: 129px; width: 43px;} — расположен от 129 пикселей до справа (начало #prev — 63px + #prev width 43px + дополнительное пространство), а ширина — 43 пикселя.
#next {background: url (‘img_navsprites.gif’) -91px 0;} — Определяет фон изображение 91px вправо (#home width 46px + 1px разделитель строки + #prev width 43px + 1px разделитель строки)

Спрайты изображений — эффект наведения

Теперь мы хотим добавить эффект наведения в наш список навигации.

Совет: Селектор : hover можно использовать для всех элементов, не только по ссылкам.

Наше новое изображение («img_navsprites_hover.gif «) содержит три навигационных изображения и три изображения для использования при наведении курсора:

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

Мы добавляем только три строки кода, чтобы добавить эффект наведения:

Пример

#home a: hover {
background: url (‘img_navsprites_hover.gif’) 0 -45px;
}

#prev a: hover {
background: url (‘img_navsprites_hover.gif ‘) -47 пикселей -45px;
}

#next a: hover {
background: url (‘img_navsprites_hover.gif’) -91px -45px;
}

Попробуй сам »

Объяснение примера:

#home a: hover {background: url (‘img_navsprites_hover.gif’) 0 -45px;} — Для всех трех изображений при наведении указателя мы указываем одинаковую позицию фона, только на 45 пикселей ниже

Как создавать и использовать спрайты изображений CSS

Метод

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

Что такое спрайт

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

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

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

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

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

Примечание: Уменьшение количества HTTP-запросов имеет большое влияние на сокращение времени отклика, что делает веб-страницу более отзывчивой для пользователя.

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

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

Использование техники CSS-спрайтов, продемонстрированной в: [ПРИМЕР — B]; нам удалось уменьшить количество HTTP-запросов на 9 и общий размер файлов изображений на 38,2 КБ по сравнению с [ПРИМЕР — A] ;. Это довольно большое улучшение для такого небольшого примера. Представьте, что вы могли бы сделать на полноценном веб-сайте.

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

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

Мы создали этот спрайт, объединив 10 отдельных изображений в одно изображение (mySprite.png). Вы можете создать свой собственный спрайт, используя любой инструмент для редактирования изображений, который вам нравится.

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

Отображение значка из Image Sprite

Наконец, используя CSS, мы можем отобразить только ту часть спрайта изображения, которая нам нужна.

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

 .sprite {
    фон: url ("images / mySprite.png") no-repeat;
}

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

  .ie {
    ширина: 50 пикселей; / * Ширина иконки * /
    высота: 50 пикселей; / * Высота иконки * /
    дисплей: встроенный блок; / * Отображение значка как встроенного блока * /
    фоновая позиция: 0 -200 пикселей; / * Положение фона значка в спрайте * /
}

Теперь возникает вопрос, как мы получили эти значения пикселей для background-position ? Давайте разберемся.Первым значением является горизонтальная позиция , а вторым — вертикальная позиция фона. Поскольку левый верхний угол значка Internet Explorer касается левого края, его расстояние по горизонтали от начальной точки, т. Е. Верхний левый угол спрайта изображения, составляет 0 , а поскольку он расположен на 5-й позиции , , поэтому его вертикальное положение расстояние от начальной точки спрайта изображения составляет 4 X 50 пикселей = 200 пикселей , потому что высота каждого значка составляет 50 пикселей .

Чтобы отобразить значок Internet Explorer, мы должны переместить его верхний левый угол в начальную точку, то есть в верхний левый угол спрайта изображения (mySprite.png). Кроме того, поскольку этот значок расположен на вертикальном расстоянии 200 пикселей , нам нужно будет сдвинуть все фоновое изображение (mySprite.png) по вертикали вверх на 200 пикселей , что требует от нас применения значения как отрицательного числа, которое составляет -200 пикселей , потому что отрицательное значение заставляет его двигаться вертикально вверх, тогда как положительное значение перемещает его вниз.Однако для этого не требуется смещение по горизонтали, поскольку перед левым верхним углом значка Internet Explorer нет пикселей.

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

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

В предыдущем разделе мы узнали, как отобразить отдельный значок из спрайта изображения.Это самый простой способ использовать спрайты изображений, теперь мы идем на шаг вперед, создавая меню навигации с эффектом наведения , как показано в [ПРИМЕР — B].

Здесь мы будем использовать то же изображение спрайта (mySprite.png) для создания нашего меню навигации.

Базовый HTML для навигации

Мы начнем с создания нашего меню навигации с неупорядоченным списком HTML.

  
      Firefox  
      Chrome  
      Исследователь  
      Opera  
      Safari

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

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

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

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

  ul.menu {
    тип-стиль-список: нет;
}
ul.menu li {
    отступ: 5 пикселей;
    размер шрифта: 16 пикселей;
    семейство шрифтов: "Trebuchet MS", Arial, sans-serif;
}

Шаг 2: Установка общих свойств для каждой ссылки

На этом этапе мы установим все общие свойства CSS, которые будут использоваться всеми ссылками.Например, цвет , фоновое изображение , дисплей , отступ и т. Д.

  ul.menu li a {
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    дисплей: встроенный блок;
    отступ слева: 60 пикселей; / * Чтобы отсеять текст от фонового изображения * /
    цвет: # 3E789F;
    фон: url ("images / mySprite.png") no-repeat; / * Поскольку все ссылки имеют одно и то же фоновое изображение * /
}

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

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

  ul.menu li.firefox a {
    background-position: 0 0;
}
ул.menu li.chrome a {
    фоновая позиция: 0 -100 пикселей;
}
ul.menu li.ie a {
    фоновая позиция: 0 -200 пикселей;
}
ul.menu li.safari a {
    фоновая позиция: 0 -300 пикселей;
}
ul.menu li.opera a {
    фоновая позиция: 0 -400 пикселей;
}

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

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

Вертикальное положение при наведении = Вертикальное положение нормального состояния - 50 пикселей

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

  ul.menu li.firefox a: hover {
    background-position: 0-50 пикселей;
}
ul.menu li.chrome a: hover {
    background-position: 0 - 150 пикселей;
}
ul.menu li.ie a: hover {
    background-position: 0 - 250 пикселей;
}
ul.menu li.safari a: hover {
    background-position: 0 -350px;
}
ul.menu li.opera a: hover {
    background-position: 0 -450px;
}

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

  



 Пример меню навигации спрайтов 
<стиль>
    ул.menu {
        тип-стиль-список: нет;
    }
    ul.menu li {
        отступ: 5 пикселей;
        размер шрифта: 16 пикселей;
        семейство шрифтов: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        высота: 50 пикселей;
        высота строки: 50 пикселей;
        дисплей: встроенный блок;
        отступ слева: 60 пикселей; / * Чтобы отсеять текст от фонового изображения * /
        цвет: # 3E789F;
        фон: url ("images / mySprite.png") no-repeat; / * Поскольку все ссылки имеют одно и то же фоновое изображение * /
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ул.menu li.chrome a {
        фоновая позиция: 0 -100 пикселей;
    }
    ul.menu li.ie a {
        фоновая позиция: 0 -200 пикселей;
    }
    ul.menu li.safari a {
        фоновая позиция: 0 -300 пикселей;
    }
    ul.menu li.opera a {
        фоновая позиция: 0 -400 пикселей;
    }
    ul.menu li.firefox a: hover {
        background-position: 0-50 пикселей;
    }
    ul.menu li.chrome a: hover {
        background-position: 0 - 150 пикселей;
    }
    ul.menu li.ie a: hover {
        background-position: 0 - 250 пикселей;
    }
    ул.menu li.safari a: hover {
        background-position: 0 -350px;
    }
    ul.menu li.opera a: hover {
        background-position: 0 -450px;
    }



    
          Firefox  
          Chrome  
          Исследователь  
          Opera  
          Safari

Генератор спрайтов CSS

Около

Автор: Роборг

Что такое CSS-спрайт?

CSS Sprite — это набор изображений, собранных в один файл изображения.Они используются в качестве метода ускорения загрузки ваших веб-сайтов за счет уменьшения количества HTTP-запросов, которые должны выполнять ваши пользователи. Каждый запрос будет содержать служебные данные HTTP-заголовков (включая файлы cookie) и задержку соединения. Используя один файл изображения вместо нескольких, вы можете значительно сократить время, необходимое для загрузки ваших страниц.

Что я получу и как им пользоваться?

Этот инструмент генерирует:

Файл изображения
Блок кода CSS

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

Часто задаваемые вопросы

Кто это написал?

Грег, он же Роборг — я профессиональный программист PHP в Just Say Please.
Вы можете подписаться на меня в Twitter

Как мне сообщить об ошибке?

На данный момент только через Twitter.

Как долго вы храните мои исходные изображения и спрайты?

Они не хранятся на сервере.

Могу ли я загружать изображения только для личного пользования?

Да.

Есть API?

Да — см. Страницу CSS Sprites API.

Это проект с открытым исходным кодом

На данный момент нет, но если я получу достаточно интереса, я могу очистить код и выпустить его.

Как написан этот сайт?

Генератор спрайтов написан на PHP с использованием функций изображения GD. Прозрачные PNG создаются вручную.

Повышение скорости загрузки сайта | Как использовать CSS-спрайты

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

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

Что такое CSS-спрайты?

Это может быть распространенное заблуждение, что спрайт подразумевает серию небольших изображений. Напротив, спрайт CSS — это одно большое изображение.

Возможно, вы знакомы с техникой CSS для отображения состояния «включено / выключено» для кнопки, которая содержится в одном изображении и позиционируется с помощью атрибута CSS background-position на : hover (см. Учебное пособие по кнопка, использующая спрайты CSS). CSS-спрайты в основном имеют ту же концепцию: изображение отображается на странице с использованием координат, указанных в вашем CSS, и будет видна только эта область.

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

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

Создание простого фонового изображения CSS Sprite

Давайте обсудим эту тему на примере. Используя Photoshop, я создал документ с серией изображений (логотипов компаний) и разделил область на фрагменты по 100 пикселей (см. Изображения ниже). Я сохранил файл и назвал его logos.jpg .

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

Фоновое изображение CSS ориентировано на отображение только первого логотипа, обозначенного зеленой рамкой, координаты которой равны y = 0 и x = 0.

Чтобы расположить их, мы используем атрибут background-position .

Чтобы отобразить второе изображение рядом с первым, все, что необходимо, — это настроить координаты по оси x.

Из-за того, как мы построили изображение (с интервалом в 100 пикселей), все, что нам нужно сделать, это добавить строку CSS, продвигающую ось x на 100 пикселей для отображения каждого логотипа.

CSS для фонового спрайта CSS

 #logos {height: 64px; маржа: 0; отступ: 0; позиция: относительная;}

#logos li {background: url (/logos.jpg) без повтора вверху слева; маржа: 0; отступ: 0; стиль списка: нет; позиция: абсолютная; вверху: 0;}

# логотипы a {height: 64px; дисплей: блок;}
  // Первый логотип 
#logos li a.jaz {background-position: 0 0}
  // Второй логотип 
#logos li a.iberotel {background-position: 0 -100px;}
  // Третий логотип 
#logos li a.solymar {background-position: 0 -200px;}
  // Четвертый логотип 
#logos li a.travcotels {background-position: 0 -300px;}
  // Пятый логотип 
#logos li a.intercity {background-position: 0 -400px;}

Результаты использования CSS-спрайтов

В приведенном выше примере можно было уменьшить размер файла с 52 КБ до 22 КБ и количество HTTP-запросов с 5 до 1. Это хорошая экономия, и это всего лишь один небольшой раздел веб-страницы!

Наш новый метод CSS-спрайтов хорошо тестируется в большинстве современных браузеров.

Дополнительная литература по CSS-спрайтам

Вот список рекомендуемых ресурсов для чтения о CSS-спрайтах.

Список литературы

Доля использования веб-браузеров (май 2010 г.)

Связанное содержимое

CSS-спрайтов | Как создать спрайты изображений

Использование CSS-спрайтов — это способ объединить несколько изображений в один файл изображения для использования на вашем веб-сайте с целью повышения производительности.

Учитывая, что вы создадите отличное изображение, спрайт может показаться немного неправильным, но спрайты должны помочь прояснить ситуацию.Термин «спрайты» происходит от техники компьютерной графики, часто используемой в видеоиграх. Компьютер может сохранять графику в памяти, а затем отображать только части изображения в определенный момент времени.

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

Итак, вместо трех отдельных изображений мы будем использовать одно изображение. С помощью CSS мы можем отображать только ту часть изображения, которую хотим использовать или отображать. Ниже приведены три изображения спрайтов, созданных с помощью CSS Sprites Generator . В этой статье мы будем использовать первый из них (sprites.gif), который имеет размеры 132x43px:

В строках ниже мы предоставим простой пример, в котором мы будем использовать наши спрайты изображений CSS.gif:

 


<стиль>
#дом {
  ширина: 43 пикс;
  высота: 43 пикс;
  фон: url (sprites.gif) 0 0 без повтора;
}
#следующий {
  ширина: 43 пикселя;
  высота: 43 пикс;
  фон: url (sprites.gif) -89px 0 без повтора;
}
#назад {
  ширина: 43 пикс;
  высота: 43 пикс;
  фон: url (sprites.gif) -43px 0 без повтора;
}

Отображаемое изображение будет фоновым изображением, которое мы укажем в CSS width: 43px, соответственно 43px height — определяет часть изображения, которую мы хотим использовать; фон: url (sprites.gif) 0 0 без повтора; — определяет фоновое изображение и его положение (слева 0 пикселей, сверху 0 пикселей) с помощью свойства no-repeat. Атрибут img определяет небольшой прозрачный gif, потому что свойство src нельзя оставлять пустым.Изображение показано выше, рядом с кодом.

Далее мы будем использовать изображение спрайта («sprites.gif») для создания списка навигации. В приведенном ниже примере мы будем использовать список HTML, потому что он может быть ссылкой и принимать фоновое изображение.

Пример:

 


<стиль>
#navlist {
  положение: относительное;
}
#navlist li {
  маржа: 0;
  отступ: 0;
  стиль списка: нет;
  позиция: абсолютная;
  верх: 0;
}
#navlist li, #navlist a {
  высота: 43 пикс;
  дисплей: блок;
}
#дом {
  слева: 0px;
  ширина: 43 пикс;
  фон: url ('sprites.gif ') 0 0;
}
#prev {
  слева: 63px;
  ширина: 43 пикс;
  фон: url ('sprites.gif') -46px 0;
}
#следующий {
  слева: 129 пикселей;
  ширина: 43 пикс;
  фон: url ('sprites.gif') -89px 0;
}

В строках ниже мы хотели бы добавить переходный эффект к нашему списку навигации, который был создан выше. Мы будем использовать эффект наведения на спрайты изображений. Для этого нам также понадобится спрайт наведенного изображения, в нашем случае sprites_hover.gif, который имеет точные размеры, как исходное изображение, sprites.gif. Вы можете создать любой эффект на изображении при наведении курсора. Следовательно, изображение, которое мы будем использовать, содержит три небольших навигационных изображения и три маленьких изображения, которые будут использоваться для эффекта, который мы хотим использовать, а именно для эффектов загрузки.Учитывая, что это одно изображение, а не отдельные файлы, в основном скорость загрузки изображения не будет задерживаться. Мы добавим несколько строк кода, чтобы добавить эффект наведения:

 #home a: hover {
  фон: url ('sprites_hover.gif') 0 -43px;
}

Полный пример приведен ниже:

 


<стиль>

/ * позиция устанавливается относительно, чтобы разрешить абсолютное позиционирование внутри нее * /
#navlist {
  положение: относительное;
}
/ * маржа установлена на 10 пикселей, стиль списка удален, все элементы списка позиционируются абсолютно, верхняя граница поля установлена на 20 пикселей * /
#navlist li {
  маржа: 10 пикселей;
  стиль списка: нет;
  позиция: абсолютная;
  верх: 20 пикселей;
  отступ слева: 2 пикселя;
}

/ * высота всех изображений 43px * /
#navlist li, #navlist a {
  высота: 43 пикс;
  дисплей: блок;
}

/ * Позиционируется до упора влево, ширина изображения составляет 43 пикселя, а фоновое изображение - спрайты.gif и его позиция слева 0 пикселей, сверху 0 пикселей и без повтора * /
#дом {
  слева: 0px;
  ширина: 43 пикс;
  фон: url ('sprites.gif') 0 0 без повтора;
  
}
/ * Позиционируется на 63 пикселя слева, ширина изображения - 43 пикселя, а фоновое изображение - sprites.gif, и его положение - на 44 пикселя справа от исходного изображения * /
#следующий {
  слева: 63px;
  ширина: 43 пикс;
  фон: url ('sprites.gif') -44px 0 без повтора;
}
/ * Расположен на 129 пикселей слева, ширина изображения - 43 пикселей, а фоновое изображение - спрайты.gif и его положение находится на 89 пикселей справа от исходного изображения * /
#назад {
  слева: 129 пикселей;
  ширина: 43 пикс;
  фон: url ('sprites.gif') -89px 0 без повтора;
}
/ * Позиционируется в 0, ширина изображения - 43 пикселя, а фоновое изображение - sprites_hover.gif * /
#home a: hover {
  фон: url ('sprites_hover.gif') 0 -43px;
  маржа слева: 1px;
}
/ * Позиционируется на 44 пикселя справа от исходного изображения при наведении курсора, при этом ширина изображения составляет 43 пикселя, а фоновое изображение - sprites_hover.gif * /

#next a: hover {
  фон: url ('sprites_hover.gif') -44px -43px;
  маржа справа: 5 пикселей;
  отступ: 1 пиксель;
}
/ * Расположен на расстоянии 89 пикселей справа от исходного изображения при наведении курсора, ширина изображения - 43 пикселей, а фоновое изображение - sprites_hover.gif * /
#back a: hover {
  фон: url ('sprites_hover.gif') -89px -43px;
  маржа справа: 5 пикселей;
}

Заключение

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

Три способа анимации изображения листа спрайтов с помощью CSS или JS | автор: Sagar Shrestha

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

В этом примере мы будем использовать следующий лист спрайтов:

HTML:

CSS:

 # sprite-image {
 height: 325px; 
 ширина: 184 пикселей; 
 фон: url ("...ссылка на изображение выше ... ") 
 0px 0px; 
}

Приведенный выше код CSS отобразит первое изображение или спрайт из таблицы спрайтов.

Обратите внимание, что высота каждого спрайта составляет 325 пикселей, а ширина составляет 184 пикселя. (Ширина каждого спрайта = общая ширина листа спрайтов / общее количество спрайтов)

JavaScript:

Демо:

Используя CSS steps () , легко контролировать количество ключевых кадров, отображаемых в продолжительность анимации. Она разбивает лист спрайтов на равные части, называемые шагами, в зависимости от установленного нами значения.

Давайте воспользуемся steps () , чтобы создать простую анимацию листа спрайтов.

HTML:

CSS:

 # sprite-image {
 height: 325px; 
 ширина: 184 пикселей; 
 background: url ("... ссылка на изображение выше ...") 
 0px 0px; 
 анимация: воспроизведение шагов 0,8 с (8) бесконечно; 
} 
 @keyframes play {
 100% {
 background-position: -1472px; 
} 
}

Так как лист спрайтов содержит 8 спрайтов изображений, количество шагов будет равно 8.Мы анимируем фоновое положение листа спрайтов. Общая ширина таблицы спрайтов составляет 1472 пикселей, анимация выполняется справа налево.

Демо:

Phaser — это быстрая, бесплатная и увлекательная игровая среда HTML5 с открытым исходным кодом, которая предлагает рендеринг WebGL и Canvas в настольных и мобильных веб-браузерах. Игры можно компилировать для iOS, Android и собственных приложений с помощью сторонних инструментов. Вы можете использовать JavaScript или TypeScript для разработки. Чтобы узнать больше о структуре Phase, щелкните здесь.

Код:

Демонстрация:

Их легко выучить, и их приятно знать

Златан Бекрич

Фото Маркуса Списке на Unsplash

Спрайты изображений присутствуют здесь с 1970-х годов. Они использовались для первых компьютерных анимаций на Atari и других консолях. Со временем они все меньше и меньше использовались разработчиками интерфейса, которые хотели более продвинутой (читай: реалистичной) графики для 3D и виртуальной реальности.

Однако в последние годы они вернулись.

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

За последние несколько лет Facebook, Twitter, Instagram и многие другие социальные сети выросли как сумасшедшие. По мере роста возникла потребность в оптимизации везде, где это возможно, и уменьшении размера запросов к серверу. Именно тогда спрайты изображений CSS вернулись в мейнстрим.

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

Итак, что вы делаете, чтобы уменьшить количество запросов к серверу и уменьшить пропускную способность? Обратитесь к спрайтам изображений CSS.

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

Давайте посмотрим на пример с флагами:

Исходное изображение

Теперь давайте посмотрим, как это работает:

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

Сначала мы выбрали div с идентификатором first. У нашего div будет высота и ширина, которые будут отображаться на нашей странице. В качестве фона мы загрузим изображение с URL-адресом («https://i.postimg.cc/R0N7nkH9/flags.png») .

Следующее, что нужно сделать, это уменьшить / увеличить наше фоновое изображение с помощью . background-size: 1400px. (Мы можем использовать фактический размер пикселя, процент, em или rem.) Этот параметр позволит нам «увеличивать» изображение до точки, в которой будет отображаться только определенная часть изображения.

Наконец, два параметра, которые идут после фона :

URL («https://i.postimg.cc/R0N7nkH9/flags.png»), переместят часть основного изображения, которая будет виден по осям X и Y. Это означает, что в данном случае фон :

URL («https://i.postimg.cc/R0N7nkH9/flags.png») -86px -87px; мы будем показывать часть, которая смещена от верха изображения на 87 пикселей сверху и 86 пикселей слева.

Первое число ( -86px ) обозначает ось X, где отрицательное значение означает движение слева направо, а положительное — движение справа налево. Вторые числа (-87px) используются для смещения сверху вниз, где применяются инвертированные правила, положительное число означает движение снизу вверх, а отрицательное, конечно, идет сверху вниз.

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

Достаточно хорошо? ОК, продолжим.

Теперь давайте заполним div идентификатором секунды. Будут применяться те же правила для настройки, и единственное изменение будет заключаться в том, что в этом случае мы останемся на исходной оси X (0 пикселей), и направление Y будет идти от нижней части к верхней (89 пикселей). Опять же, если вы проверите исходное изображение, вы можете увидеть, что (Узбекистан) сначала снизу, а сначала слева.

И последнее, но не менее важное…

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

Настал момент истины….

В приведенном выше случае мы двигались по осям X и Y, чтобы показать определенные части изображения с флажками. Справа налево и вниз мы получили Боснию (ось X), снизу и слева (ось Y) мы получили Таиланд и Узбекистан. Как вы видели, мы используем только одно изображение, а это означает только один запрос изображения.

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

основные техники и полезные инструменты / Хабр

Применение на практике

До или после?

Организация элементов дизайна

Полезные инструменты

Полезные сервисы

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

Что такое CSS-спрайты и для чего они нужны?

Миша

Как использовать спрайты CSS? | Impuls-Web.ru

Навигация по статье:

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

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

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

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

Генератор Css спрайтов

Отзывы

Создаем CSS спрайты. Примеры | Интересные задачи верстки

Что такое CSS спрайты?

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

Особенности использования спрайтов

Примеры использования спрайтов

Спрайты с иконками

Домашнее задание

Спрайты с градиентами

CSS спрайты — создание и использование, генераторы CSS спрайтов

Создание CSS спрайтов

Генераторы CSS спрайтов

CSS-спрайтов изображений

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

Спрайты изображений — простой пример

Пример

Спрайты изображений — создание списка навигации

Пример

Спрайты изображений — эффект наведения

Пример

Как создавать и использовать спрайты изображений CSS

Что такое спрайт

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

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

Отображение значка из Image Sprite

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

Базовый HTML для навигации

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

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

Шаг 2: Установка общих свойств для каждой ссылки

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

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

Генератор спрайтов CSS

Около

Что такое CSS-спрайт?

Что я получу и как им пользоваться?

Часто задаваемые вопросы

Кто это написал?

Как мне сообщить об ошибке?

Как долго вы храните мои исходные изображения и спрайты?

Могу ли я загружать изображения только для личного пользования?

Есть API?

Это проект с открытым исходным кодом

Как написан этот сайт?

Последние новости

августа 2017

мая 2014

Янв 2014

июл 2011

ноя 2010

Повышение скорости загрузки сайта | Как использовать CSS-спрайты

Что такое CSS-спрайты?

Создание простого фонового изображения CSS Sprite

CSS для фонового спрайта CSS

Результаты использования CSS-спрайтов

Дополнительная литература по CSS-спрайтам

Список литературы

Связанное содержимое

CSS-спрайтов | Как создать спрайты изображений

Заключение

Три способа анимации изображения листа спрайтов с помощью CSS или JS | автор: Sagar Shrestha

Их легко выучить, и их приятно знать

Итак, что вы делаете, чтобы уменьшить количество запросов к серверу и уменьшить пропускную способность? Обратитесь к спрайтам изображений CSS.

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