Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 6. CSS Sprites (CSS Спрайты)
Не нравится(-) 84 Нравится(+)
2-08-2008, 02:55 - Razer (Статьи по CSS)
Статья по CSS 6. CSS Sprites (CSS Спрайты)

Здравствуйте уважаемые посетители! С сожалением, должен сообщить о переносе старта первого специального проекта как минимум на неделю. Вмешался человеческий фактор… но, не волнуйтесь, от идей, предложенных на форуме, мы не отказались.
Итак, наша сегодняшняя статья, как и обещалось, будет посвящена элементам, называемым «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. Это – и есть спрайт. Оно выглядит следующим образом:
Статья по CSS 6. CSS Sprites (CSS Спрайты)


Теперь зададим стили для меню при наведении на него мыши и при клике на него:
#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 6. CSS Sprites (CSS Спрайты)

Вот и всё на сегодня. Спасибо за внимание!




Автор: Алексей Савинов, Российская школа CSS
-----------------------------------
Демо
Правила копирования материалов статьи
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 34864 раз(а) и написали 27 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!