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>
Вот как это работает:
В этом примере мы просто меняем позицию 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 групп:Выделение первой группы опционально, она может быть объединена с пятой, но тут уже надо решать на конкретных случаях (да и автор сайта выше решил, что 20 Кб его посетители переживут, и не побоялся их объединить). Откуда взялось разделение на остальные группы? Из очень простых соображений: если картинка будет повторяться по какому-то направлению, то по этому направлению она должна быть она-единственная в своем «окне», иначе повторяться будет не только она одна. Также я бы порекомендовал ориентироваться на общий размер файла в 10-20 Кб, если файл получается больше, то лучше подключать больше одного.
Далее, все картинки из группы 2 оставляем, как есть (вообще говоря, можно подумать над их преобразованием в стилевые правила для самых простых случаев, но это уже тема для отдельной дискуссии на тему особых извращений). Все картинки из группы 3 можно склеить по вертикали (тогда в своем горизонтальном окне они будут единственны), все картинки из группы 4 — по горизонтали. Что же делать с группой 5?
Тут нам нужно понять, для какой цели будет использовать каждая картинка. Если она будет изображать фиксированную по размерам кнопку, то ее можно размещать в любом месте итогового ресурсного файла, если она будет использована как иконка для списка (размещение в левом верхнем углу элемента), то мы должны очистить все пространство правее и ниже ее, чтобы при любом увеличении такого элемента (а «растут» элементы у нас всегда вниз и вправо) ничего лишнего не выводилось. Как пример можно привести картинку с последнего ресурса. В таком случае в иконки располагаются не вертикально, а «лесенкой».
Описанная выше проблема с изменением размера надписей в фиксированных кнопках (фон у них фиксированный, поэтому мы не можем их раздвигать при увеличении шрифта, и он обрезается) может быть преодолена путей разбиения фона на 4 части (угловые) и задания соответствующего цвета фона для всех элементов. Однако, это повлечет наличие, как минимум, 4 вложенных элементов для отображения каждого угла. Не во всех случаях это допустимо семантически (да, можно генерить дополнительную разметку JavaScript'ом, но насколько оно того будет стоить? Лучше решать в каждом конкретном случае).
« Назад