CSS Sprites и их использование


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

CSS Спрайт

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

Вот простой пример: Имеем картинку

и такой нехитрый код:
<style type="text/css">
<!--
a.example:link, a.example:visited {
  display: block;
  width: 127px;
  height:25px;
  line-height: 25px;
  color: #000;
  text-decoration: none;
  background: #fc0 url(/images/articles/im-ro.png) no-repeat left top;
  text-indent: 25px;
  color: #000;
}
a.example:hover {
  background-position: right top;
  color: #fff;
}

-->
</style>
<p><a href="#" class="example">About Us</a></p>
Вот как это работает:

About Us

В этом примере мы просто меняем позицию background'а.

Сложный rollover-эффект

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

и вот такой код:
  <style>
* {	margin:0; padding:0; /* Reset all margins and paddings to 0 */ }
.share li{
	float:left; /* Allows list to display horizontally */
	display:inline; /* Fixes the IE double margin bug */
	margin:20px 0px 0px 20px; /* Margins around each list item */
}
.share li a{
	display:block; /* Links must be set to display as a block */
	width:50px; /* Height and width of each link block */
	height:50px;
	background:url(/images/articles/sprite_icons.png) top left no-repeat;
}
#newPage a{ background-position:  0px 0px; }
#newPage a:hover{ background-position:  0px -50px; }
#cutTool a{ background-position:  -50px 0px; }
#cutTool a:hover{ background-position:-50px -50px; }
#pasteTool a{ background-position:  -100px 0px; }
#pasteTool a:hover{ background-position: -100px -50px; }
#pageSecurity a{ background-position:  -150px 0px; }
#pageSecurity a:hover{ background-position:-150px -50px; }
  </style>

<ul class="share"> 
	<li id="cutTool"><a href="#"></a></li>
	<li id="pageSecurity"><a href="#"></a></li>
	<li id="pasteTool"><a href="#"></a></li>
	<li id="newPage"><a href="#"></a></li>
</ul>

Вот что получилось:

CSS Image map

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

Классические примеры без использованию техники CSS Sprites. Заметны задержки при отображении отдельных областей на общей картинке.

Области не пересекаются. Размер картинок, показываемых при наведении, совпадает с размером исходных картинок.

Карта монитора

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

Карта города

А вот тут уже области разные

Разные области

Статичные картинки

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

Набор иконок. Основной опасностью таких файлов является «наложение» фоновых картинок одного блока на фон другого. Лучше всего это видно при увеличении размера шрифта: блок становится выше или длиннее, и запаса полей данного изображения уже не хватает, в результате у одного элемента отображается сразу несколько иконок. Непорядок. Как с ним бороться, я расскажу ниже в общих советах по созданию ресурсных картинок для CSS sprites.

Иконки

Аналогичная проблема

Иконки

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

Полезные советы

Итак, самое вкусное. Для начала я бы советовал разбить все фоновые картинки на 5 групп:
  • Анимированные картинки
  • Те, которые предполагается распространять по всем направлениям (repeat)
  • Те, которые предполагается распространять по горизонтали (repeat-x)
  • Те, которые предполагается распространять по вертикали (repeat-y)
  • И те, которые предполагается показывать только один раз (no repeat)

    Выделение первой группы опционально, она может быть объединена с пятой, но тут уже надо решать на конкретных случаях (да и автор сайта выше решил, что 20 Кб его посетители переживут, и не побоялся их объединить). Откуда взялось разделение на остальные группы? Из очень простых соображений: если картинка будет повторяться по какому-то направлению, то по этому направлению она должна быть она-единственная в своем «окне», иначе повторяться будет не только она одна. Также я бы порекомендовал ориентироваться на общий размер файла в 10-20 Кб, если файл получается больше, то лучше подключать больше одного.

    Далее, все картинки из группы 2 оставляем, как есть (вообще говоря, можно подумать над их преобразованием в стилевые правила для самых простых случаев, но это уже тема для отдельной дискуссии на тему особых извращений). Все картинки из группы 3 можно склеить по вертикали (тогда в своем горизонтальном окне они будут единственны), все картинки из группы 4 — по горизонтали. Что же делать с группой 5?

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

    Описанная выше проблема с изменением размера надписей в фиксированных кнопках (фон у них фиксированный, поэтому мы не можем их раздвигать при увеличении шрифта, и он обрезается) может быть преодолена путей разбиения фона на 4 части (угловые) и задания соответствующего цвета фона для всех элементов. Однако, это повлечет наличие, как минимум, 4 вложенных элементов для отображения каждого угла. Не во всех случаях это допустимо семантически (да, можно генерить дополнительную разметку JavaScript'ом, но насколько оно того будет стоить? Лучше решать в каждом конкретном случае).

    © webo.in

    Оценить Статью:  
    1   2   3   4   5   6   7   8   9   10    

    « Назад
  • SAPE все усложнил?

    MainLink - простая и прибыльная продажа ссылок!

    Последние поступления:

    Linux Optimization

    Размещена 30 июля 2012 года

    Prelink

    читать далее…

    Размещена 06 апреля 2012 года

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

    Размещена 01 января 2012 года

    Иду по лесу… Дождь, ветер, ночь… Замерз весь… Смотрю — машина стоит, подхожу, в окошко смотрю — там никого. Дверцу попробовал — открыто, ну я залез и сижу… вдруг машина поехала! Я в шоке… машина едет, я сзади сижу, за рулем никого… тут рука волосатая появляется откуда-то, порулила и исчезла… у меня волосы на попе зашевелились… тут деревня показалась, вот уже дома первые… тут машина останавливается, в салон другой мужик заглядывает и говорит:
    — а ты че тут делаешь???
    — да вот, еду…
    — ах**ть просто!!! я толкаю, а он б*** едет!

    Запуск приложений на отдельном X-сервере

    Размещена 18 ноября 2011 года

    Запуск игр в отдельном X сервере на примере Warcraft

    читать далее…

    Размещена 10 октября 2011 года

    Обсуждение новости "В Японии изобрели устройство для имитации поцелуев":

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

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