Спрайт css: Страница не найдена

Разное 

Содержание

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

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

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

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

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

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

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites. gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>
<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

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

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.

  
 gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>
<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

 До или после?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • CSS Sprite Sheets: Best Practices, Tools and Helpful Applications — tutplus.com
  • CSS Image Sprites — w3schools.com
  • CSS Sprites: What They Are, Why They’re Cool, and How To Use Them — css-tricks.com
  • Using CSS Sprites to optimize your website for Retina Displays — Maykel Loomans

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

HTML5CSS. ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

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

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

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

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

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

Вместо того, чтобы использовать три отдельных изображения, мы используем это одиночное изображение («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

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css

размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

CSS спрайт технология спрайт — Русские Блоги

CSS спрайт технология спрайт

Фон из технологии Genie


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

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

Спиртовые Технологии

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

Использование технологии Genie

CSS-спрайты фактически объединяют некоторые фоновые изображения на веб-странице в большое изображение (изображение спрайта). Однако каждому веб-элементу обычно требуется только небольшое изображение в отдельной позиции в изображении спрайта. Чтобы точно найти изображение в изображении спрайта, Для небольшого изображения вам нужно использовать свойства background-image, background-repeat и background-position CSS для позиционирования фона. Самое важное — использовать свойство background-position для точного позиционирования.

Сделать спрайт

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Использование технологии CSS sprite</title>
	<style>
	.mobile {
		width: 15px;
		height: 20px;
		background: url(images/jd.png) 0 -100px no-repeat;
	}
	.shoping {
		width: 57px;
		height: 49px;
		background: url(images/jd.png) 0 -438px no-repeat;
	}
	</style>
</head>
<body>
	<div></div>
	<hr>
	<div></div>
</body>
</html>


Назови свое имя

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Назови свое имя</title>
	<style>
	span {
		background: url(images/abcd.jpg) no-repeat;
		float: left;
	}
	span:first-child {
		width: 139px;
		height: 109px;
		background-position: -115px -560px;
	}
	span:nth-child(2) {
		width: 106px;
		height: 116px;
		background-position: -388px -138px;
	}
	span:nth-child(3) {
		width: 105px;
		height: 118px;
		background-position: 0 -272px;
	}
	</style>
</head>
<body>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</body>
</html>

Король Слава Эльф Иллюстрация

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Король Слава Эльф Иллюстрация</title>
	<style>
	a {
		float: left;
		width: 198px;
		height: 53px;
		background: url(images/sp. png) no-repeat;
		background-position: -389px -303px;
		text-align: center;
		line-height: 53px;
		color: #fff;
		font-weight: 700;
		text-decoration: none;
	}
	a:hover {
		background-position: -170px -300px;
	}
	</style>
</head>
<body>
	<a href="#">Вознаграждение выкуп</a>
</body>
</html>


Интеллектуальная рекомендация

Общие переменные в потоке (1)

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

Выпущен новейший IoT-модуль Digi серии XBee3

（http://www.bitconn.com/form_1/После регистрации купите модуль XBee, отправьте оценочную USB-плату и соответствующие материалы на китайском языке или подайте заявку на бесплатный оценочный комплект) D…

Как работает цикл событий в браузере / nodeJS

Как мы все знаем, одна из самых больших функций JS — однопоточная. Это означает, что если команда выполняется сверху вниз в JS, если предыдущая команда занимает слишком много времени, появится состоян…

Расширенное использование SQL

Продолжение предыдущего «Основного применения SQL»:https://blog.csdn.net/weichi7549/article/details/98478335 Таблицы базы данных, используемые в следующих примерах: Таблица веб-сайтов: таб…

Меню выпадения ответов jQuery

 …

Вам также может понравиться

Домашнее задание 2010 года Любимое Galgame рекомендуется

2009-2010 годы почти китайские работы в выброшении Группа GAL Hanhua также возникает весной. Оригинальный блог — первым, кто порекомендует Gal Game. Напишите рекомендационную статью в конце 2010 года….

[Android] Использование Android Studio (8) — // Код TODO

Во-первых, предыдущий Серия статей Android Studio, в основном объясняющая, как использовать эту IDE, оригинальный релиз и блог-сад, просьба поддержать оригинального автора. Во-вторых, оригинал Первоис. ..

Простой способ вступить в силу сразу после изменения git .gitignore

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

TP6 Сторонний пакет расширения файловых систем

1. Установка Официальный сайт:https://gitee.com/thans/thinkphp-filesystem-cloud Два: добавить конфигурацию в config/filesystem.php Три: начинать использование (FileSystem :: Disk(‘public’)Изменить на …

День 2 Резюме — Оператор, если утверждение и вложенное

Оператор Оператор: оператор данных, оператор сравнения, логический оператор, оператор назначения Сравнить оператор > ,<,==,!=,>=,<= Все результаты всех операторов логически Логические опер…

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

  • Анимированный баннер Анимация 3D обложка Картинка Коллаж Слои Маски Инструменты выделения Надпись и Текст CSS-спрайты Видеокурсы Photoshop

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

Разберём код CSS для отдельных фрагментов спрайта, а изображения будем готовить в Photoshop. Оговорюсь: подойдёт любая графическая программа, главное, понять механизм работы css-спрайтов. Для их создания применимы и сервисы, генерирующие спрайты, — о них в конце материала.

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

Допустим, нам надо сделать css спрайт из трёх иконок-указателей. Описание создания начального изображения опускаю, всё просто: 30px на 30px, прозрачный фон — круг с оливковой заливкой — белая галочка:

Спрайт у нас должен получиться размером 30px на 90px. Создаём для него новое изображение, пока 30 на 30, копируем в него начальное. Далее начальное поворачиваем на 90° по часовой стрелке: «Изображение — Вращение изображения». Теперь нужно увеличить размер будущего спрайта по вертикали до 60рх:

Делается это просто: «Изображение — Размер холста» (Alt+Ctrl+C), задаём высоту 60px, а в «Расположении» нажимаем средний верхний квадратик, чтобы стрелки получились как на скриншоте. Жмём OK — это увеличит (продлит) изображение по вертикали вниз:

Повторим процедуру для третьей иконки-указателя. Теперь о коде CSS. Вот как он будет отличаться для 3-х элементов:

элемент1 { background: url(pics/button.png) 0 0 no-repeat;
padding-left: 30px;}
элемент2 { background: url(pics/button.png) 0 -30px no-repeat;
padding-left: 30px;}
элемент3 { background: url(pics/button.png) 0 -60px no-repeat;
padding-left: 30px;}

По сути, для всех трёх элементов различается только значение background-position, точнее его второе значение. Оно отрицательное и отвечает за смещение нашего изображения button.png по вертикали. Код дан условно, остальные свойства для различных случаев будут разные. Отступ слева подходит для следующего примера с андроидами.

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

Теперь о нюансах. Например, иконка служит фоновой картинкой для заголовков h2-h6. Мы можем рассчитать её размер для высоты одной строки. А если заголовок образовал вторую строку, то вылезет следующая иконка:

Решение простое. Чтобы это предотвратить, можно явно задать высоту заголовка height, но это подходит не для всех случаев. Или сделать отступы между изображениями, а для точности использовать направляющие: «Просмотр — Линейка» (Ctrl+R). Просто зажимаем курсор на горизонтальной линейке и тащим вниз направляющую (бирюзовую), а совмещаем её с градуировкой вертикальной линейки:

Таких направляющих можно сделать сколько надо, в т.ч. вертикальных. В Photoshop есть ещё пара инструментов, которые могут пригодиться: «Просмотр — Показать — Быстрые направляющие» (розовые на скрине ниже). Они становятся видимыми при передвижке иконки инструментом «Перемещение» (V) и служат для выравнивания с «соседями». Это, кстати, более сложный css спрайт:

Там же находится инструмент Сетка (Ctrl+'). Сетку удобно применять для css спрайта, состоящего из одинаковых по размеру иконок. Чтобы включить-отключить эти инструменты нужно поставить или убрать галочку для пункта «Просмотр — Вспомогательные элементы» (Ctrl+H).

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

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

Вместо Photoshop для изготовления css спрайтов годится любой другой графический редактор. В Сети существует много сервисов для генерации спрайтов: читайте об оптимизации изображений, где даётся описание лучших генераторов css-спрайтов и инструментов для сжатия png, jpg и gif файлов без потери качества.

CSS спрайты существенно увеличивают скорость загрузки сайта — проверить этот показатель можно, используя сервис PageSpeed от Google.

Уроки Photoshop:

  • Анимированный баннер Анимация 3D обложка Картинка Коллаж Слои Маски Инструменты выделения Надпись и Текст CSS-спрайты Видеокурсы Photoshop

Поделиться с друзьями:

О партнёрках

получить

Сайт с нуля

получить

Создаем CSS спрайты.

Примеры | Интересные задачи верстки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это html код списка. Теперь применим к нему наш спрайт:

ul li{
	padding:0 0 0 21px; 
	background:url('sprites.png') 0 -94px no-repeat;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спрайты &?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#8212; это двумерные изображения, которые состоят из объединения небольших изображений в одно большое с определенными координатами X и Y.

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

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

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

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

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

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

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

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

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

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

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

Спрайт изображений не обязательно должен быть вертикальным. Изображения могут располагаться в любом порядке &?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#8212; горизонтальном, шахматном и т.д.

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

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

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

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

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

.ie {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px; /* Icon background position in sprite */
}

Теперь возникает вопрос, как мы получили эти значения пикселей для background-position? Давайте разберемся. Первое значение &?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#8212; горизонтальное положение, а второе &?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#8212; вертикальное положение фона.

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

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

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

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

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

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

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

<ul>
    <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin. ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Firefox</a></li>
    <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Chrome</a></li>
    <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Explorer</a></li>
    <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Opera</a></li>
    <li><a href="?utm_source=artzolin. ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Safari</a></li>
</ul>

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

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

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

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

ul.menu {
    list-style-type: none;
}
ul.menu li {
    padding: 5px;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

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

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

ul.menu li a {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    padding-left: 60px; /* To sift text off the background-image */
    color: ?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#3E789F;
    background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
}

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Sprite Navigation Menu</title>
<style>
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* To sift text off the background-image */
        color: ?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin. ru?utm_source=artzolin.ru#3E789F;
        background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ul.menu li.chrome a {
        background-position: 0 -100px;
    }
    ul.menu li.ie a {
        background-position: 0 -200px;
    }
    ul.menu li.safari a {
        background-position: 0 -300px;
    }
    ul.menu li.opera a {
        background-position: 0 -400px;
    }
    ul.menu li.firefox a:hover {
        background-position: 0 -50px;
    }
    ul.menu li.chrome a:hover {
        background-position: 0 -150px;
    }
    ul.menu li.ie a:hover {
        background-position: 0 -250px;
    }
    ul.menu li.safari a:hover {
        background-position: 0 -350px;
    }
    ul.menu li.opera a:hover {
        background-position: 0 -450px;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="?utm_source=artzolin.ru?utm_source=artzolin. ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Firefox</a></li>
        <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Chrome</a></li>
        <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Explorer</a></li>
        <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin. ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Opera</a></li>
        <li><a href="?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru?utm_source=artzolin.ru#">Safari</a></li>
    </ul>
</body>
</html>

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

❮ Предыдущая Далее ❯

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

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

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

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

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

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

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

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

Пример

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

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

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

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

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

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

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

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

Пример

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

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

#navlist li, #navlist a {
  height: 44px;
  отображение: блок;
}

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

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

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

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3. CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2

О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

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

Рекламные объявления

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Показать значок из спрайта изображения

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

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

Пример
Попробуйте этот код »
 .sprite {
    background: url("images/mySprite.png") без повторов;
}

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

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

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

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

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

Создание меню навигации с помощью спрайта изображения CSS

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

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

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

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

Пример
Попробуйте этот код »

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

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

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

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

Пример
Попробуйте этот код »
 ul.menu {
    тип стиля списка: нет;
}
ул.меню ли {
    отступ: 5px;
    размер шрифта: 16px;
    семейство шрифтов: "Trebuchet MS", Arial, без засечек;
}

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

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

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

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

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

Пример
Попробуйте этот код »
 ul.menu li.firefox a {
    фоновая позиция: 0 0;
}
ul.menu li.chrome {
    фоновая позиция: 0-100px;
}
ul.menu li.ie a {
    фоновая позиция: 0-200px;
}
ul.menu li.safari {
    фоновая позиция: 0-300px;
}
ul.menu li.opera {
    фоновая позиция: 0-400px;
}

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

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

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

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

Пример
Попробуйте этот код »
 ul.menu li.firefox a:hover {
    фоновая позиция: 0-50px;
}
ul.menu li.chrome a: hover {
    фоновая позиция: 0-150px;
}
ul.menu li.ie a:hover {
    фоновая позиция: 0-250px;
}
ul.menu li.safari a:hover {
    фоновая позиция: 0-350px;
}
ul.menu li.opera a:hover {
    фоновая позиция: 0-450px;
}

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

Пример
Попробуйте этот код » 
 

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


<тело>
    <ул>
        
  • Firefox
    • 
        
  • Chrome
    • 
        
  • Проводник
    • 
        
  • Опера
    • 
        
  • Сафари
    •

    Предыдущая страница Следующая страница

    Простое руководство по CSS-спрайтам | Удасити | Тех

    Назад Простое руководство по CSS-спрайтам

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

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

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

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

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

    К счастью, это не так. Спрайт CSS — это плоское 2D-изображение, на которое ссылаются заданные вами координаты x и y. На многие изображения можно ссылаться из координатной плоскости изображения с помощью одного файла спрайта.

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

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

     

    Как использовать спрайт CSS?

     

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

     

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

     

    Вы можете использовать различные методы для создания собственных файлов спрайтов, например, добавляя несколько изображений с помощью Photoshop, Gimp или других инструментов редактирования изображений. Вы даже можете использовать бесплатные онлайн-сервисы, такие как Генератор спрайтов Topals или Мгновенный спрайт для управления процессом. Когда у вас есть набор изображений, объединенных в один файл, ваш спрайт изображения готов к работе. Обратите внимание, что формат PNG отмечен как общий тип файла для использования для спрайтов CSS.

    Приведенные ниже рисунки были созданы для этого процесса.

    Затем все три нарисованных изображения были отредактированы в одно изображение PNG для использования в качестве спрайта. Объединенные изображения показаны в примере ниже.

    Использование файла CSS-спрайта

     

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

    Теги элементов 0035 div размещаются в теле документа. Классы используются, чтобы помочь с кодированием CSS для изображений спрайтов. Если вы не знакомы с использованием классов, прочтите HTML/CSS Class and ID Selectors , чтобы получить отличное пошаговое руководство.

    Каждый div имеет класс « spriteContainer ». В div также добавляется второй класс. Эти вторичные классы « doodle1, », « doodle2 » и « doodle3 » помогают выбирать изображения из файла спрайтов. Помните, что вы можете называть классы по своему усмотрению. Соглашения об именах здесь просто для удобства.

    На следующем изображении ниже показан базовый код HTML-документа.

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

    Настройка положения изображения спрайта

     

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

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

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

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

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

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

    Объединив код HTML и CSS, вы получите следующий вывод на странице.

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


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

    ________________________________________________________________________________

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

    Наличие этих навыков поможет вам открыть двери для новых профессиональных возможностей. Запишитесь на курс Udacity Intro to Programming Nanodegree сегодня, чтобы начать путешествие.

    [et_bloom_locked optin_id=»optin_4″]

    [/et_bloom_locked]

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

    Просмотреть обсуждение

    Улучшить статью

    Сохранить статью

    • Уровень сложности: Базовый
    • Последнее обновление: 04 дек, 2018

  • Читать
  • Обсудить

    • Посмотреть обсуждение

    Улучшить статью

    Сохранить статью

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

    • Для более быстрой загрузки страницы, так как используется только одно изображение.
    • Уменьшает пропускную способность, используемую для загрузки нескольких изображений. Таким образом потребляется меньше данных.

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

    Использованное изображение:

    Example:

    < html >

         < head >

             < style >

                #navlist {

                             ;

    }

    #NAVLIST LI {

    Маржа: 0;

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

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

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

                     сверху: 0;

                 }           

                 #navlist li, #navlist a {

    px: 90 1 0 0 4 0 1; height: 90 1 0 0 4 0 1;

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

    }

    . GFG {

    Шид: 100px;

                     left:0px;

                     background: url(

                 }

                 .gfg1 {

                     width: 100px; 

                     left:120px;

    background: url(

                 }

                 .gfg2 {

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

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

                     background: url(

                 } 

             style >

         head >

         < body >

             < ul id = "navlist" >

                 < li class = "GFG" > < A HREF = "#" > A > LI > > 0003

                 < li class = "gfg1" >< a href = "#" > a >< / li >

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

             ul >

         body >

    HTML >

    Выход:


    . Рекомендованные артистики


    . Рекомендованные арт


    .0003

    Страница :

    Что нового

    Повышение скорости сайта | Как использовать спрайты 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 {фон: url(/logos.jpg) без повторов вверху слева; маржа: 0; заполнение: 0; стиль списка: нет; положение: абсолютное; top: 0;} #logos a {height: 64px; отображение: блок;}  // Первый логотип  #logos li a.jaz {background-position: 0 0}  // Второй логотип  #logos li a.iberotel {background-position: 0 -100px;}  // Третий логотип  #logos li a. solymar {background-position: 0-200px;}  // Четвертый логотип  #logos li a.travcotels {background-position: 0-300px;}  // Пятый логотип  #logos li a.intercity {background -position: 0 -400px;}

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

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

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

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

    • Спрайты CSS: поцелуй смерти при нарезке изображений
    • Спрайты CSS: что это такое, чем они хороши и как их использовать
    • Тайна спрайтов CSS: методы, инструменты и учебные пособия — Smashing Magazine

    Ссылки

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

    Сопутствующее содержимое

    • 10 способов улучшить производительность вашей веб-страницы
    • Пять способов ускорить время отклика страницы
    • 30 исключительных методов навигации CSS

    Использование спрайтов изображений CSS и несколько простых приемов

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

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

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

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

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

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

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

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

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

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

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

    Вот пример!

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

    Разметка и CSS

    <!DOCTYPE html>
<html>
<head>
    <title>Спрайты изображений CSS</title>

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

    Попробуйте

    Результат

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

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

    No related posts.

    Автор записи

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *