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

20.06.2023 Facebook Twitter LinkedIn Google+ Разное

Содержание

Создаем 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 спрайты изображений

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

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

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

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

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

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

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

<style>
#home {
  width: 46px;
  height: 44px;
  background: url('img_navsprites.gif') 0 0;
}
</style>
<img src="img_trans.gif">

Результат:

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

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

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

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

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

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

<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;
  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;
}
</style>
<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>

Результат:

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

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

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

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

Спрайты изображений — Эффект при наведении мыши

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

Стоит сказать, что псевдокласс :hover можно использовать с любыми элементами, а не только с ссылками.

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

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

Чтобы создать нужный эффект, достаточно к коду предыдущего примера добавить всего три строчки, а также заменить img_navsprites.gif на 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;} — для всех трех изображений для эффекта, мы определяем те же самые фоновые позиции, только смещенные на 45px вниз.

Как создавать и использовать спрайты изображений 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 — это способ объединения нескольких изображений в один файл изображения для использования на вашем веб-сайте с целью повышения производительности.

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

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

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

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

    .

     

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


<тело>


    


    
 gif">

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

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

    Пример:

     

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


<тело>
  <ул>
  
    • 
  
    • 

    •

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

     #дома:наведите {
  фон: url('sprites_hover.gif') 0-43px;
}

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

      <голова> <стиль> /*position установлено относительное, чтобы разрешить абсолютное позиционирование внутри него*/
#навлист {
 положение: родственник;
}
/*поле установлено на 10 пикселей, стиль списка удален, все элементы списка имеют абсолютное позиционирование, верхнее поле установлено на 20 пикселей */
#навлист ли {
 поле: 10 пикселей;
 стиль списка: нет;
 положение: абсолютное;
 верх: 20 пикселей;
 отступ слева: 2px;
}  /*высота всех изображений 43px*/
#navlist li, #navlist a {
 высота: 43 пикселя;
 дисплей: блок;
}  /*Позиционировано полностью влево, ширина изображения 43 пикселя, фоновое изображение sprites.gif и его позиция слева 0 пикселей, сверху 0 пикселей и без повтора*/
#дом {
 слева: 0px;
 ширина: 43 пикселя;
 background: url('sprites. gif') 0 0 без повтора; 
}
/*Располагается на 63 пикселя влево, ширина изображения составляет 43 пикселя, фоновое изображение — sprites.gif, а его положение — на 44 пикселя справа от исходного изображения*/
#следующий {
 слева: 63px;
 ширина: 43 пикселя;
 background: url('sprites.gif') -44px 0 без повтора;
}
/*Позиция 129px влево, а ширина изображения — 43 пикселя, а фоновое изображение — sprites.gif, а его положение — 89 пикселов справа от исходного изображения*/
#назад {
 слева: 129 пикселей;
 ширина: 43 пикселя;
 background: url('sprites.gif') -89px 0 без повтора;
}
/*Позиция 0, ширина изображения 43 пикселя, фоновое изображение sprites_hover.gif */
#дома:наведите {
 фон: url('sprites_hover.gif') 0-43px;
 поле слева: 1px;
}
/*Располагается на расстоянии 44 пикселя справа от исходного изображения при наведении курсора, ширина изображения составляет 43 пикселя, а фоновое изображение — sprites_hover.gif */  #далее:наведите {
 фон: url('sprites_hover.gif') -44px -43px;
 поле справа: 5px;
 отступ: 1px;
}
/*Расположение на 89px прямо из исходного изображения при наведении курсора, ширина изображения составляет 43 пикселя, а фоновое изображение — sprites_hover.
    Comments
    Leave Comment