Полупрозрачные CSS спрайты

Один из самых полезных методов вёрстки за последние годы - это незаметные на первый взгляд CSS спрайты. Этот метод стал известным благодаря Дэйву Шеа, который в 2004 году опубликовал статью под названием CSS Sprites: Image Slicing’s Kiss of Death. Техника работы со спрайтами очень проста, и, как только вы поймёте основы, вы сможете применять их где угодно. Обычно спрайты используют для графических меню, но они также подходят и для кнопок, и для стилизованных заголовков.

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

За последние несколько лет спрайты стали одной из самых внедряемых техник в CSS. После появления большого количества статей и книг об ускорении сайтов, многие популярные сайты внедрили этот метод, включая таких гигантов, как Google и Amazon.

Преимущества и Возможные Проблемы

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

Много статей написано о выигрыше в размерах файлов и HTTP-запросах, но довольно редко обсуждаются возможные проблемы. Одной из основных технических проблем является использование памяти, о котором рассказывается в статье “To Sprite Or Not To Sprite”. Другая проблема - CSS и HTML код спрайтов, который может стать крайне запутанным.

Техническое Решение

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

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

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

Неожиданный Поворот

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

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

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

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

Так или иначе, лучше один раз увидеть, чем сто услышать, поэтому …

Пример

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

Изображения

Шрифты

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

Капли

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

Кнопки

Метод создания кнопки является самым гибким и, как мне кажется, самым полезным способом использования. Спрайт содержит два состояния (статичное и наведение) и помещен под текст. Простое изменение свойства background-color позволит получить совершенно другой результат.

Приведённый ниже CSS описывает серую кнопку, у которой есть две других версии, "warning" и "go", красного и зеленого цвета соответственно.

a.button {
	display: block;
	width: 80px; height: 30px;
	margin: 0 20px;
	font-size: 14px; line-height: 30px; color: #fff;
	text-align: center; text-decoration: none;
	background: #4a4a4a url(button.png) no-repeat 0 0;
}
a.button:hover,
a.button:focus,
a.button:active {
	background-position: 0 -40px;
}
a.button.warning {
	background-color: #ea1d22;
}
a.button.go {
	background-color: #309721;
}

Данный CSS-стиль создаёт следующие кнопки:

• Normal
• Button
• Continue
• Go!
• Stop!

Заключение

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

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

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

Я хотел бы упомянуть одну небольшую проблему - IE6. Он не поддерживает полупрозрачные PNG. Конечно, есть fix'ы PNG для IE6, но никто¹ из них не поддерживает background-position, который необходим, если вы используете спрайты. Хотя можно в какой-то мере реализовать данный метод в IE6, используя GIF вместо PNG.

_______________________
1. IE PNG Fix от TwinHelix поддерживает background-position, но требует JavaScript.

Дополнительные Ресурсы

Если вас заинтересовала тема спрайтов, советую посмотреть следующие дополнительные ссылки:

• Fast Rollovers Without Preload – вступительная статья о спрайтах.
• SpriteMe – сервис для генерации спрайтов из изображений на существующем сайте.
• CSS Sprites: Image Slicing’s Kiss of Death – первая статья о спрайтах в List Apart.
• Yahoo! Performance Guideliness – лучшие методы, инструменты и исследования от Yahoo!
• CSS Sprite Generator – инструмент для создания спрайтов из изображений в zip-архиве от Эда Элиота.
• To Sprite Or Not To Sprite – статья о возможных проблемах производительности при работе со спрайтами.

Данная статья - перевод статьи Тревора Морриса Transparent CSS Sprites.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты