Содержание

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

Использование 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 — приложение-генератор для Мака

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

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пкс дальше вниз

SVG-спрайты

Вы здесь: Главная — CSS — CSS3 — SVG-спрайты

В очередной раз, просматривая вакансии на HTML-верстальщика, на предмет поиска темы для новой статьи, в списке требований работодателя, наткнулся на пункт – использовать в верстке SVG-спрайты.

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

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

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

Почему SVG-спрайты – это хорошо?

Почему они так нравятся работодателям и заказчикам? Все дело в скорости загрузки сайта: чем меньше HTTP-запросов к серверу, тем быстрее работает сайт. Чем быстрее работает сайт, тем больше его любят поисковые системы и посетители.

Используя на сайте SVG-спрайты, вы убиваете сразу двух зайцев – получаете меньший вес у графики (SVG формат в разы легче, чем PNG и JPG) и меньше запросов к серверу.

В этом коде целых три HTTP-запроса, на больших экранах появится замыливание и весят иконки в PNG формате больше:

<img src="icons/pinterest.png" alt="">
<img src="icons/twitter.png" alt="">
<img src="icons/facebook.png" alt="">

А здесь один запрос, при масштабирование векторная графика не теряет в качестве и меньше весит.

<svg>
  <use xlink:href="sprite.svg#facebook"></use>
</svg>

Как сделать SVG-спрайт?

  1. Скачиваем на сайте flaticon две иконки pinterest + github, в формате SVG. Теперь нужно два SVG-файла объединить в один.
  2. В редакторе кода создадим sprite.svg и пропишем следующий код.

    3. <svg display="none" xmlns="http://www.w3.org/2000/svg">
      <symbol viewBox="0 0 455.731 455.731">
        <g>
          <path ..здесь код отрисовки pinterest../>
        </g>
      </symbol>
      <symbol viewBox="0 0 512 512">
        <g>
          <path ..здесь код отрисовки github../>
        </g>
      </symbol>
    </svg>
  3. Значения атрибутов viewBox, копируем из pinterest.svg и github.svg.
  4. Открываем содержимое двух скачанных файлов и копируем внушительный код отрисовки иконки, тега path и вставляем между тегами <g></g>. Мы вынесли код иконок в отдельный файл sprite.svg.

    5. Важно: Удаляем из path, инлайн стиль с цветом заливки style=»fill:#FFFFFF;. Иначе, потом мы не сможем поменять дефолтный цвет иконки на свой, в CSS стилях.

  5. Открываем заготовленный HTML файл и вставляем, туда ссылки на id иконок.

    6. <svg>
      <use xlink:href="sprite.svg#pinterest"></use>
    </svg>
    <svg>
      <use xlink:href="sprite.svg#github"></use>
    </svg>

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

SVG-спрайты vs иконочных шрифтов

Чем SVG-спрайты лучше иконочных шрифтов, ведь все иконки можно упаковать в один файл и загружать с одним HTTP-запросом? Перечислим некоторые преимущества:

  • проще управлять позиционированием
  • удобнее делать многоцветные иконки
  • можно делать анимированные иконки

Поддержка браузерами

Формат SVG поддерживается всеми современными браузерами и начиная с
IE 11+.

Пример SVG-спрайта

Код на Github:

ссылка
  • Создано 03.07.2019 10:56:16
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Что такое 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 псевдоэлементы – эффективный тандем

Перевод статьи: 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: 510

Графика в вебе, img, background-image, CSS-спрайты

Не забывайте важное правило: в вебе запрещено использовать в именах файлов и URL:
1) Пробелы (используем дефис вместо пробела)
2) Нижнее подчёркивание, так же используем дефис, так как в вебе принято нижним подчёркиванием указывать ссылки и нижнее подчёркивание ссылки (декоративным) сливается с нижним подчёркиванием (в имени файла), что создаёт трудности понять, находится ли перед нами пробел или нижнее подчеркивание.
3) Кириллицу (Русские буквы) а так же другие за исключением латиницы (Английские буквы). Связано с особенностью работы некоторых веб-серверов.
4) Спецсимволы запрещённые файловой системой.

Для генерации спрайтов подойдет любой онлайн сервис, который можно найти в гугле по запросу: «sprites generator online», вот дам пару ссылок для самых ленивых 🙂 Генераторы создают имена классам равные именам файлов, так что перед загрузкой переименуйте файлы в нужные названия.
Генератор позволяющий настраивать имена для CSS классов, очень удобно
Ещё один генератор, на этот раз только позволяет дописывать префиксы.

Раз мы дошли до префиксов, хотелось бы акцентировать внимание когда они используются. Бывает так, что над проектом работают несколько человек, или же проект на столько большой, что схожий материал встречается на разных страницах. Допустим у нас есть форма авторизации .form-auth , которая на одной странице должна быть с зеленым фоном, а на второй с желтым. При этом одну форму может разрабатывать один верстальщик, а вторую — второй. Чтобы стили не перебивали друг друга можно применить 2 подхода:
1) Подключать на одной странице один css файл, тогда как на второй — второй, и стили не пересекутся.
2) Указывать префикс, выглядит это так: .reg-form-auth , обычное ключевое слово разделённое любым спец.символом, в данном случае дефисом, и говорящее само за себя, что данная форма находится в разделе регистрации. Или же .inpost-form-auth — говорит, что разработчиком данной формы был inpost, мой личный никнейм (он же псевдоним). Префикс избавит нас от возможной проблемы, когда некоторые стили присутствуют на всех страницах и подключены в общем css файле (базовом), а так же, когда мы используем иные свойства на внутренних (не на главной) страницах. Или же когда над одной версткой могут работать несколько верстальщиков. Вторая причина когда мы подключаем сторонние библиотеки (код написанный другими программистами), допустим для слайдеров, галерей, и чтобы их библиотеки можно было бы без труда встроить в любой сайт, то они используют в обязательном порядке префиксы. Пример префикса «fa» для вставки на сайте особых иконок от font-awesome, удобная, кстати, вещь, я использую в своих сайтах 🙂 .

Как кроссбраузерно отображать SVG спрайты в HTML (html, svg, svg-спрайт) / husl.ru

Инлайн подключение:

style="display:none" стиль, который вы используете для сокрытия элементов спрайта лучше убрать. Для этой цели в спрайте стандартно используется тег <symbol>, который скрывает элементы svg до вызова их командой <use> в любом месте HTML документа

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

<div>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 viewBox="0 0 1200 490">
	  
		 <symbol>
		   <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M126. 01 242.48L6.36 122.83 126.01 3.18"/>
		 </symbol>	

     <symbol>
	    <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M3.18 3.18l119.65 119.65L3.18 242.48" />
     </symbol>

	    <use x="0" xlink:href="#icon-arrow-left" />
		<use x="850" xlink:href="#icon-arrow-right" />
		
</svg>
<div>

Инлайн подключение самый надёжный способ добавления SVG в HTML, но если код SVG очень большой, то его обычно добавляют как отдельный файл SVG с помощью тега <object> Есть и другие способы добавления svg в HTML

Подключение с помощью <object> svg файла (спрайта) к HTML

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

<object type="image/svg+xml" data="img/sprite. svg">
    Your browser does not support SVG
</object>

Chrome использует сейчас новые технологии, в частности вызов иконок по ID без предварительной загрузки спрайта через <object> но это работает только в Chrome

Поэтому для кроссбраузерности всегда используйте <object> затем вызывайте иконку из спрайта:

<svg viewBox="0 0 57 57">
     <use xlink:href="img/sprite.svg#facebook" ></use> 
</svg>

Firefox наиболее правильно воспроизводит svg, поэтому, если в нем не работает, то значит нужно искать ошибку. Хуже всех понимает svg IE В частности он неправильно (по своему) масштабирует, позиционирует svg. Поэтому двойное масштабирование, позиционирование — в шапке svg файла и при вызове иконки <svg viewBox="0 0 57 57"> может привести к исчезновению изображения.

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

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

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

Применение 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.

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

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

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

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

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

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

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

Итак, вместо трех отдельных изображений мы будем использовать одно изображение. С помощью CSS мы можем отображать только ту часть изображения, которую хотим использовать или отображать. Ниже представлены три изображения спрайтов, созданных с помощью CSS Sprites Generator .В этой статье мы будем использовать первый из них (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 | Спрайты изображений — GeeksforGeeks

< html >

< Головка >

< стиль >

#navlist {

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

}

#navlist li {

маржа: 0;

обивка: 0;

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

позиция: абсолютная;

верх: 0;

}

#navlist li, #navlist a {

высота: 100 пикселей;

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

}

. gfg {

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

слева: 0px;

фон: url (

}

.gfg1 {

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

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

фон: url (

}

.gfg2 {

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

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

фон: url (

}

стиль >

Головка >

< корпус >

< ul id = "navlist" >

< li class = "gfg" > < a href = "#" > a > ли >

< li class = "gfg1" > < a href = "#" > a > ли >

< li class = "gfg2" > < a href = "#" > a > ли >

ul >

корпус >

html >

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

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

Фото Маркуса Списке на 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.Это означает, что в данном случае background:

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, и мы получили эту анимацию в старом стиле. Поверьте, со спрайтами ограничений нет.

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

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

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

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

Перетащите файлы изображений на место ниже или используйте ссылку «Открыть» для загрузки изображений с помощью обозревателя файлов. Затем нажмите «Создать», чтобы создать таблицу спрайтов и таблицу стилей. В этой демонстрации используется несколько API-интерфейсов HTML5, и она совместима только с современными браузерами.

Реализация

После зависимостей Stitches требует таблицы стилей, скрипта и элемента HTML для выполнения работы:

Генератор листа спрайтов автоматически создается в элементах с классом стежков:

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

Документация

Документация доступна здесь.

Зависимости

jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 Новый

Содействие

Лицензия

MIT

Скачать

Последняя версия, 1.3.5, доступен здесь.

Вы можете скачать этот проект в любом архиве. или форматы tar.

Вы также можете клонировать проект с помощью Git, запустив:

  $ git clone git: //github. com/draeton/stitches

CSS Image Sprites Использование и несколько простых трюков

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

Производительность

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

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

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

Уменьшение количества https-запросов снизит полезное использование полосы пропускания, что вызовет у пользователей широкую улыбку, особенно если они используют соединения 2G или 3G с ограниченным пакетом.

Использование CSS с Image Sprite

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

Говоря о координатах изображения, веб-разработчики сочли этот пост и его код полезными для определения координат x и y изображения. Скрипт написан на jQuery и использует расширение.offset (), который возвращает координаты событий мыши.

После того, как мы получим точные координаты, мы можем использовать CSS для установки фонового изображения, используя значения x и y. Используя свойство фона CSS, мы можем легко настроить изображение для ряда элементов, таких как & ltli>, & ltdiv> или & ltnav>.

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

Вот пример!

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

Разметка и CSS

& lt! DOCTYPE html>
& lthtml>
& lthead>
    & lttitle> Спрайты изображений CSS & lt / title>

    & ltstyle type = "text / css">
        #topmenu {width: auto; font: 15px Verdana;}
        #topmenu ul
        {
            маржа: 0; отступ: 0;
        }
        #topmenu li
        {
            дисплей: встроенный блок;
            ширина: 55 пикселей;
            отступ: 5 пикселей 20 пикселей;
            граница: сплошная 1px #CCC;
        }
        #topmenu # n1
        {
            фон: URL-адрес без повторения ('../../css-tutorials/sprite-image.png ') 70px 3px;
        }
        #topmenu # n2
        {
            background: no-repeat url ('../../ css-tutorials / sprite-image.png') 69px -32px;
        }
        #topmenu # n3
        {
            background: no-repeat url ('../../ css-tutorials / sprite-image.png') 69px -66px;
        }
    & lt / style>
& lt / head>
& ltbody>
    & ltp> Показывать меню с разными изображениями, извлеченными из Image Sprite! & lt / p>
    & ltdiv>
        & ltul>
            & ltli> Nav 1 & lt / li>
            & ltli> Nav 2 & lt / li>
            & ltli> Nav 3 & lt / li>
        & lt / ul>
    & lt / div>
& lt / body>
& lt / html>

Попробовать

Выход

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

Если вы веб-разработчик, но не дизайнер, то вы должны спланировать элементы навигатора и, соответственно, попросить своего дизайнера разработать спрайт с умом. Внимательно посмотрите на изображение, и вы заметите, что расстояние между каждым изображением пропорционально высоте каждого навигатора (меню - & ltli>) на нашей странице.

Спрайт динамического изображения CSS

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

Добавьте следующие три строки в раздел «Стиль» своей HTML-страницы. 

#topmenu # n1: hover {background-position: 70px -97px;}
#topmenu # n2: hover {background-position: 69px -132px;}
#topmenu # n3: hover {background-position: 69px -166px;}

В начале нашего дизайна мы установили координаты первого навигатора как 70 пикселей и 3 пикселя, которые отображали первый цветной значок. При наведении указателя мыши на навигатор мы изменим положение фона на «70 пикселей и -97 пикселей», расположение аналогичного изображения с черным и белым цветом. Следуйте аналогичным методам позиционирования для двух других навигаторов.

Заключение

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

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

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

← предыдущийСледующий →


Понравилась статья? Подпишитесь сейчас и получайте все последние статьи и советы прямо в свой почтовый ящик.

No related posts.