Спрайт css: создание, применение — учебник CSS

Sprites CSS уроки для начинающих академия

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

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

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

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

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

Вместо того, чтобы использовать три отдельных изображения, мы используем это одиночное изображение («img_navsprites.gif»):

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

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

Пример

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

Пример объяснил:

• <img src="img_trans.gif"> — Только определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS
• width: 46px; height: 44px; — Определяет часть изображения, которое мы хотим использовать
• background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)

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

Спрайты изображений-создание списка переходов

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

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

Пример

#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;
    background: url(‘img_navsprites.gif’)
0 0;
}

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

#next {
    left: 129px;
    width: 43px;
    background: url(‘img_navsprites.gif’)
-91px 0;
}

Пример объяснил:

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

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

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

Спрайты изображений-эффект Hover

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

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

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

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

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

Пример

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

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

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

Пример объяснил:

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

Генератор 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-свойства бэкграунд-позишн (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. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

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

CSS спрайты для увеличения скорости загрузки сайта

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

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

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

Что такое CSS спрайты, их польза и предназначение на сайте

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

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

CSS Sprite — это способ уменьшить количество изображений путём объединения нескольких изображений в одно. Затем используетcя CSS-свойство позиционирования background-position для отображения только той части изображения, которая вам нужна.

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

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

CSS Sprites Generator и тонкости, которые нужно знать

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

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

• применяя свойство repeat-x располагайте элементы спрайта по вертикали или размещайте одно повторяющееся фоновое изображение крайним правым в случае горизонтального спрайта;
• применяя свойство repeat-y располагайте элементы спрайта по горизонтали или размещайте одно повторяющееся фоновое изображение крайним нижним в случае вертикального спрайта.

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

Порядок создания CSS спрайта с помощью генератора

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

Переходим на страницу онлайн генератора спрайтов CSS Sprites Generator и загружаем заранее подготовленные файлы нажатием конки Choose files или простым перетаскиванием на страницу методом Drag & Drop.

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

Настройки состоят из двух параметров:

• Padding between elements (px) — отступ между элементами в пикселях,
• Align elements — выравнивание элементов.

Используйте отступы между элементами, чтобы при масштабировании страницы элементы не «наезжали» друг на друга. Ниже разберёмся с вариантами выравнивания элементов.

Binary Tree — бинарное дерево — наиболее эффективный по размеру алгоритм размещения элементов:

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

Diagonal (Alternative) — диагональ (альтернатива) — то же самое, что диагональ, но используется диагональ в другом направлении:

Top-down — сверху вниз — элементы расположены вертикально поочерёдно сверху вниз:

Left-right — слева направо — элементы расположены горизонтально поочерёдно слева направо:

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

После выбора и загрузки файлов на странице CSS Sprites Generator вы увидите готовые стили, которые необходимо скопировать и добавить в файл style.css. На основе примера я получил следующий код:

.bg-RSS {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -10px -10px;
}
 
.bg-Twitter {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -115px -10px;
}
 
.bg-Mail {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -220px -10px;
}

Дело остаётся за малым — нажатием кнопки Download скачать готовый файл спрайта с именем css_sprites.png и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.

В конечном итоге результатом работы онлайн генератора стало такое изображение, в котором собраны воедино все три иконки:

В принципе, на этом создание спрайта завершено. На выходе мы получили файл изображения и готовые стили. А что делать дальше? За основу примера я выбрал иконки, которые являются ссылками на внешние сайты, поэтому каждой ссылке необходимо присвоить свой класс для тега <a> , например: <a href="..."></a>

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

Представьте ситуацию, в которой необходимо заменить одно изображение на другое — придётся менять стили всех элементов, так как изменятся координаты. Избежать подобных проблем позволит создание нескольких спрайтов, объединяющих группы элементов (иконки меню, иконки навигации и т.д.). А вы используете спрайты?

CSS Спрайты изображений. Уроки для начинающих. W3Schools на русском

Что такое спрайты изображений?

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

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

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

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

Вместо того, чтобы использовать три отдельных изображения, мы используем это одно изображение («img_navsprites.gif»):

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

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

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

• <img src="img_trans.gif"> — Определяет только маленькое прозрачное изображение, потому что атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS
• width: 46px; height: 44px; — Определяет часть изображения, которую мы хотим использовать
• background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его положение (left 0px, top 0px)

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

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

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

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

Пример

#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;
  background: url(‘img_navsprites.gif’)
0 0;
}

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

#next {
  left: 129px;
  width: 43px;
  background: url(‘img_navsprites.gif’)
-91px 0;
}

Попробуйте сами »

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

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

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

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

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

Попробуйте сами »

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

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

Спрайты css. Ускоряем загрузку страниц.

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

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

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

Как сделать спрайт правильно?

1. На первом этапе создания необходимо группировать картинки по типам (jpg, gif, png и тд) , поскольку объединять изображения разных типов в одно невозможно.
2. При помощи любого графического редактора (я обычно использую фотошоп) сливаем все маленькие картинки в одну.
3. При помощи css свойства background-position выводим в необходимых местах страницы нужную нам часть картинки.

Практические замечания по использованию css спрайтов

• Если небольшие элементы дизайна сайта (пункты меню, различные кнопки и тд) меняют свой фон при наведении на них мыши или клике по ним мы должны пользоваться методом, поскольку это не просто оптимизирует загрузку страницы, а позволяет нам избежать бага с «пустой» кнопкой, когда после наведения на что-то мы пару секунд видим пустое место, а после появляется картинка. При использовании спрайтов файл картинки один, следовательно загружается он один раз при переходе на страницу и смена фона при наведении происходит мгновенно, ведь меняется лишь область картинки показываемая пользователю.
• Метод используется для картинок из оформления сайта, а не из содержательной его части. Не стоит склеивать картинки несущие на себе смысловую нагрузку и тд. Разница в загрузке 3 или 5 файлов никак не повлияет на скорость подгрузки страницы, а может иметь ряд негативных последствий с точки зрения сео. Подробнее о этом можно почитать тут.
• Если область показа картинки предполагает, что вокруг картинки будет свободное пространство, то это также нужно учитывать при склейке спрайта, оставляя необходимые зазоры по краям.
• Сохраняйте исходники с не слитыми слоями при склейке картинки. Возможна ситуация, когда в дальнейшем вам, к примеру, придется поменять размер пары элементов дизайна, тогда при отсутствии исходника придется ради пары мелких правок перерисовывать спрайт с нуля.
• Не переборщите с размером картинки. Знайте во всем меру, ведь если ваш файл будет весить несколько мегабайт, то возможна ситуация, когда пользователь будет наблюдать экран без оформления несколько секунд после его загрузки.
• Применяйте фантазию при создании спрайтов. Правильно расположить в нем иконки не так просто, как может показаться на первый взгляд. К примеру, при расположении иконок слева от элемента дизайна можно склеить спрайт лесенкой, что ограничит зону видимости других картинок спрайта и в целом файл спрайта останется компактным. (ниже линиями помечены зоны видимости иконок).

Подводя итоги

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

Оценок: 4 (средняя 5 из 5)

• 2111 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Спрайты и CSS псевдоэлементы – эффективный тандем

Перевод статьи: Sprites and CSS pseudo-elements the perfect pair.
Автор: Rick Harris.

Важность использования спрайтов в веб-разработке вполне очевидна и не нуждается в дополнительном объяснении. И если у вас уже есть опыт применения этой технологии в своих проектах, то вам, вероятно, уже известно, что она имеет и отрицательные моменты. Наиболее универсальным подходом для вставки небольших изображений и иконок (по крайней мере, для их временного отображения) можно назвать метод, который для достижения необходимого эффекта предусматривает использование пустых элементов <span> с последующим применением к ним необходимого CSS кода. Этот способ, конечно же, абсолютно неприемлем с точки зрения семантики и может вызвать трудности связанные с обслуживанием сайта в будущем. Если же вы избрали семантически корректный путь веб-разработки и в процессе реализации спрайтов используете исключительно CSS методы, то перед вами предстанут трудности другого вида – чрезвычайно точное проектирование структуры карты CSS спрайта, исключающее дефекты отображения иконок, связанные с позиционированием. Более того, если в будущем вы пожелаете добавить к уже сформированному спрайту несколько изображений, то вы во всей красе ощутите неудобство этого способа.

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

Пример.

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

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

<a href=»http://facebook.com/my-fb-page»>
Facebook
</a>

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

.fb-link {
padding-left: 20px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

В этом случае, при определенной степени везения и отсутствии эффекта наложения соседних иконок, входящих в общую карту спрайта, мы получим желаемый результат. Но если, всё-таки, какое-либо соседнее, находящееся рядом с требуемой иконкой Facebook, изображение появится в рамках фона форматируемого элемента, в нашем случае ссылки (), то это приведет к нежелательным последствиям. Есть, конечно же, способ, позволяющий избежать подобных проблем – это упомянутый выше, семантически неправильный, использующий пустой <span> элемент:

<a href=»http://facebook.com/my-fb-page»>
<span></span> Facebook
</a>

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

.fb-link.icon {
display: inline-block;
width: 16px;
height: 16px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

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

.fb-link:before {
content: » «;
display: inline-block;
width: 16px;
height: 16px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

Во втором случае мы добавили лишь одну строку content: » «, что является обязательным условием использования псевдо-элементов – без определения свойства content и даже если его значением будет пустая строка, они отображаться не будут. В результате такого форматирования, не нарушая никаких семантических требований, мы получили все преимущества использования пустого <span> элемента с целью безопасного применения CSS спрайтов.

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

Важное отступление, касательно реализации в IE.

Следует иметь в виду, что псевдо-элементы абсолютно не поддерживаются в IE7 и ниже. Для некоторых разработчиков это является камнем преткновения. Чтобы решить проблему, просто применяйте условные операторы (хаки, комментарии). В большинстве случаев для посетителей, пользующихся ранними версиями IE (седьмая и ниже) всегда можно предоставить несколько упрощенный вариант страницы. Для придания более привлекательного вида такой странице, можно поэкспериментировать со свойством border-radius или другими, поддерживаемыми в IE.

Post Views:
662

Как создавать и использовать спрайты изображений 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 пикселей; / * Высота иконки * /
    дисплей: встроенный блок; / * Отображение значка как встроенного блока * /
    background-position: 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) для создания нашего меню навигации.

Foundation 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 {
    background-position: 0 -200 пикселей;
}
ul.menu li.safari a {
    фоновая позиция: 0 -300 пикселей;
}
ul.menu li.opera a {
    фоновая позиция: 0 -400 пикселей;
}  

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

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

Вертикальное положение при наведении = Вертикальное положение нормального состояния - 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 {
        background-position: 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  
    
 
  

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

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

Фото Маркуса Списке на 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 пикселей слева.

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

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

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

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

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

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

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

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

Важно знать, что при построении спрайтов это базовое изображение должно содержать те же части изображений для вашего удобства. Как в этом случае, когда мы движемся влево и вправо, вверх и вниз по размеру части плюс пустое пространство. Узбекистан (89 пикселей) и Таиланд (178 пикселей) имеют разницу в 89 пикселей, что является их фактическим размером (87 пикселей) плюс пустое пространство (1 пиксель + 1 пиксель).

Да, вы тоже можете делать анимацию.

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

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

Это так просто 🙂

Надеюсь, вам понравилась эта статья.

Следите за новостями…

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

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

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

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

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

В строках ниже мы предоставим простой пример, в котором мы будем использовать наше изображение CSS sprites.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-спрайты

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

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

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

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

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

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

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

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

Давайте обсудим эту тему на примере. Используя 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.междугородний {background-position: 0 -400px;} 

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

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

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

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

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

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

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

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

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

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

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

HTML:

CSS:

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

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

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

JavaScript:

Демо:

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

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

HTML:

CSS:

 # sprite-image {
 height: 325px; 
 ширина: 184 пикс; 
 фон: url ("...ссылка на изображение выше ... ") 
 0px 0px; 
 animation: play 0.8s steps (8) infinite; 
} 
 @keyframes play {
 100% {
 background-position: -1472px; 
} 
 } 

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

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

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

Код:

Демо:

CSS | Спрайты изображений — GeeksforGeeks

< html >

< голова >

0 9000 000000000000000

#navlist {

позиция: относительная;

}

#navlist li {

маржа: 0;

заполнение: 0;

стиль списка: нет;

Положение: абсолютное;

верх: 0;

}

#navlist li, #navlist a {

height: 100px;

дисплей: блок;

}

.gfg {

ширина: 100 пикселей;

слева: 0px;

фон: url (

}

.gfg1 {

width: 100px;

px фон: url (

}

.gfg2 {

ширина: 100 пикселей;

слева: 240 пикселей;

фон: url (

}

style >

0 000 < корпус >

< ul id = «navlist» >

< li10 класс = "gfg" > < a href = "#" > a > li >

< класс = "gfg1" > < a href = 9001 0 "#" > a > li >

< li класс = "gfg2" > a href = "#" > a > li >

ul > body >

html >

Easy Spritesheet Animations с CSS

Вы когда-нибудь думали о создании анимации спрайта CSS без использования JS?

Все мы с детства видели традиционную анимацию в действии.Будь то анимационный фильм или двухмерная видеоигра, традиционная анимация была ее неотъемлемой частью.

В этом типе анимации для создания анимации воспроизводится последовательность отдельных кадров.

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

Этот метод включает воспроизведение спрайта, содержащего несколько состояний определенной последовательности.

Ходячий кот: спрайтовая анимация с использованием CSS

Интересно, не правда ли?

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

Основная идея CSS Sprite Animation

В общем, для реализации спрайтовой анимации нам нужны три важные вещи:

1. Окно просмотра анимации для отображения нашей последовательности
2. Спрайт, содержащий различные состояния последовательности
3. Технология воспроизведения спрайта как анимации

Что я собираюсь использовать?

Я использую элемент разделения HTML (

  #cat {
  ширина: 399 пикселей; / * Ширина области просмотра * /
  высота: 200 пикселей; / * Высота области просмотра * /
  маржа: 2em auto; / * Небольшая маржа * /
  фон: прозрачный URL ('/ путь / к / спрайту.png ') 0 0 без повтора; / * Наш спрайт как фон области просмотра * /
  анимация: подиум 1с шагов (12) бесконечность; / * Анимация * /
}

/ * Ключевые кадры анимации для спрайта * /
@keyframes подиум {
  100% {background-position: 0 -2393px; }
}