CSS спрайты: применение в вёрстке сайтов с примерами

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

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

За установку фона в CSS отвечает свойство background.

Синтаксис

background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

Выбрать нужную область спрайта можно с помощью свойства background-position.

Синтаксис

background-position: [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>] | inherit

Пример №1

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

.star-rating span.fill {
display: inline-block;
width: 16px;
height: 16px;
background: url('http://seogrot.com/examples/responsive-web-design/stars.png') 0 0;
}
.star-rating span.half {
display: inline-block;
width: 16px;
height: 16px;
background: url('http://seogrot.com/examples/responsive-web-design/stars.png') 0 50%;
}
.star-rating span {
display: inline-block;
width: 16px;
height: 16px;
background: url('http://seogrot.com/examples/responsive-web-design/stars.png') 0 100%;
}

Чтобы показать звёздочки на странице, нужно прописать соответствующие классы для элементов div и span:

<div class="star-rating">
<span class="fill"></span>
<span class="fill"></span>
<span class="half"></span>
<span class="half"></span>
<span></span>
</div>

Результат:

Пример №2

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

.heart1 {
	width: 30px; 
	height: 25px;
	background: url(http://seogrot.com/examples/heart.png) top left;
}
.heart1:hover {
	background-position: bottom left;
}
.heart2 {
	width: 30px; 
	height: 25px;
	background: url(http://seogrot.com/examples/heart.png) top right;
}
.heart2:hover {
	background-position: bottom right;
}

Чтобы показать сердечки на странице, нужно прописать соответствующие классы для элементов div:

<div class="heart1"></div>
<div class="heart2"></div>

Результат:

На сегодня всё. Если появились какие-то вопросы, задавайте в комментариях.