Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 27 Спрайты Изображений


« Назад Далее »

Спрайты Изображений

Спрайт изображений - это коллекция картинок, вставленных в одиночное изображение.

Веб страница с большим количеством изображений может занять значительное время при загрузке и генерирует множество запросов к серверу.

Использование спрайтов изображений уменьшит количество запросов к серверу и сохранит пропускную способность.


Спрайты Изображений - Простой Пример

Вместо использования трех отдельных изображений, мы используем это одиночное изображение ("img_navsprites.gif"):

навигационные картинки

С помощью CSS, мы можем показать только часть изображения, которая нам потребуется.

В следующем примере CSS указывает, какую часть изображения "img_navsprites.gif" следует показать:

Пример

img.home
{
width:46px;
height:44px;
background:url(images/img_navsprites.gif) 0 0;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Объяснение примера:

  • <img class="home" src="images/img_trans.gif" /> - Всего-навсего определяет небольшое прозрачное изображение т.к. атрибут src не может быть пустым. Показываемое изображение будет фоновым рисунком, который мы указали в CSS
  • width:46px;height:44px; - Определяет порцию изображения, которую мы хотим использовать
  • background:url(images/img_navsprites.gif) 0 0; - Определяет фоновый рисунок и его положение (слева 0px, сверху 0px)

Это простейший способ использования спрайтов изображений, теперь мы хотим расширить его путем использования ссылок и hover-эффектов.


Спрайты Изображений - Создание Списка Навигации

Мы хотим использовать спрайт изображенгий ("img_navsprites.gif") для создания списка навигации.

Мы будем использовать HTML список, т.к. в нем можно использовать ссылки, а также он поддерживает фоновое изображение:

Пример

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('images/img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('images/img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('images/img_navsprites.gif') -91px 0;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Объяснение примера:

  • #navlist{position:relative;} - позиция устанавливается в относительную чтобы реализовать абсолютное позиционирование внутри нее
  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - поля и отступы устанавливаются в 0, стиль списка (list-style) удаляется , и все пункты списка абсолютно позиционированы
  • #navlist li, #navlist a{height:44px;display:block;} - высота всех изображений равна 44px

Теперь начинаем позиционировать и оформлять каждую специфическую часть:

  • #home{left:0px;width:46px;} - Размещается слева и ширина изображения устанавливается в 46px
  • #home{background:url(images/img_navsprites.gif) 0 0;} - Определяет фоновый рисунок и его положение (left 0px, top 0px)
  • #prev{left:63px;width:43px;} - Размещается правее на 63px (ширина #home 46px + некоторое дополнительное пространство между элементами), и ширина устанавливается в 43px.
  • #prev{background:url('images/img_navsprites.gif') -47px 0;} - Определяет фоновое изображение на 47px правее (ширина #home 46px + 1px ширина разделятеля (вертикальной линии между рисунками)
  • #next{left:129px;width:43px;}- Размещается правее на 129px (начало #prev равно 63px + ширина #prev 43px + дополнительное пространство), и ширина устанавливается в 43px.
  • #next{background:url('images/img_navsprites.gif') no-repeat -91px 0;} - Определяет фоновый рисунок на 91px правее (ширина #home 46px + 1px вертикальный разделитель + ширина #prev 43px + 1px вертикальный разделитель )

Спрайты Изображений - Эффект Hover

Теперь мы хотим добавить эффект hover к нашему списку навигации.

Наше новое изображение ("img_navsprites_hover.gif") содержит три рисунка для навигации и три рисунка, необходимых для hover-эффектов:

навигационные изображения

Поскольку это одно единственное изображение, а не шесть отдельных файлов, не будет никакой паузы при загрузке когда пользователь перемещает указатель мыши над рисунком.

Мы добавляем всего три строчки кода для реализации hover-эффекта:

Пример

#home a:hover{background: url('images/img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('images/img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('images/img_navsprites_hover.gif') -91px -45px;}

Попробуйте сами »

Объяснение примера:

  • Поскольку пункт списка содержит ссылку, мы можем использовать псевдо-класс :hover
  • #home a:hover{background: transparent url(images/img_navsprites_hover.gif) 0 -45px;} - Для всех трех hover-изображений мы указываем ту же самую фоновую позицию,  только со сдвигом вниз на 45px




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru