Здравствуйте уважаемые посетители! С сожалением, должен сообщить о переносе старта первого специального проекта как минимум на неделю. Вмешался человеческий фактор… но, не волнуйтесь, от идей, предложенных на форуме, мы не отказались.
Итак, наша сегодняшняя статья, как и обещалось, будет посвящена элементам, называемым «CSS Sprites» (или CSS Спрайты)…
Итак, в начале, разберёмся, сто же такое спрайт.
В принципе, спрайт – одно изображение, в состав которого включено некоторое количество более мелких изображений. По структуре, спрайт можно сравнить с мозаикой или пазлом. С помощью специального атрибута, для каждого объекта выбирается часть этой картинки, которая и показывается.
Конечно, Вы имеете полное право спросить: «Зачем создавать спрайт, если можно просто воспользоваться несколькими картинками, как это делается обычно?». Ответ будет довольно простым: спрайт подгружается один раз и при наведении курсора на элемент изменения происходят мгновенно, без подгрузки другой картинки. Это существенно улучшает его восприятие и уменьшает количество HTTP запросов, что в свою очередь ускоряет загрузку страницы. Само собой, у спрайтов есть ограничения. Наш объект должен быть фиксирован по ширине и /или высоте.
Спрайты очень часто используются в меню, или других элементах, изменяющихся при наведении мыши. В практическом примере к этой статье, мы будем делать именно меню для сайта.
Итак, с теорией мы разобрались. Теперь пришло время применить спрайты на практике.
Здесь, мы будем создавать вертикальное меню, состоящее из 5 элементов. Сделаем его, используя маркированный список.
По традиции, создадим файлы index.html и style.css. В код веб-страницы запишем стандартное начало:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Российская школа CSS. Спрайты
</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
Замечательно… Теперь, приступим к формированию меню
<ul id="menu">
<li><a href="/">Ссылка 1</a></li>
<li><a href="/">Ссылка 2</a></li>
<li><a href="/">Ссылка 3</a></li>
<li><a href="/">Ссылка 4</a></li>
<li><a href="/">Ссылка 5</a></li>
</ul>
</body>
</html>
Наш список-меню готов. Теперь, перейдём к оформлению. Отменим в CSS оформление для всего списка:
ul {
list-style:none;
}
Готово. Теперь зададим вид пункта меню, без наведения на него мыши:
#menu li a {
padding:7px 10px;
color:#666;
text-decoration: none;
display: block;
font:13px Arial;
font-weight:bold;
background: url(menu.png);
width:200px;
margin:3px;
}
Здесь – мы использовали изображение menu.png. Это – и есть спрайт. Оно выглядит следующим образом:
Теперь зададим стили для меню при наведении на него мыши и при клике на него:
#menu li a:hover {
color: #fff;
background: url(menu.png) 0 -30px;
}
#menu li a:active {
color: #fff;
background: url(menu.png) 0 -60px;
}
Заметим, что -30px и -60 px – указание, на сколько пикселей надо сместиться по спрайту.
Итак, всё готово. Конечно, это меню – не верх совершенства, но если всё сделано правильно, то получите такое меню:
Вот и всё на сегодня.
Спасибо за внимание!Автор: Алексей Савинов, Российская школа CSS
-----------------------------------
ДемоПравила копирования материалов статьиПерейти в категорию статей по CSSУважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!
Спрайт должен быть такой же, как и здесь: вертикальный. Значения циферок -30 и -60 в бэкграунде тогда не меняюся (ну то есть меняются под свою высоту кнопки). Вот в принципе и всё)) Должно быть кроссбраузерно.
Хотя титл лучше составлять более корректно 
