• CSS Основы

• Что Такое CSS ?
• Синтаксис CSS
• Селекторы id и class
• Добавление Стилей в HTML Документ

• CSS Оформление

• CSS Фон
• CSS Текст
• Шрифты в CSS
• CSS Ссылки
• CSS Списки
• CSS Таблицы

• CSS Блоки

• CSS Блочная Модель
• CSS Границы
• CSS Контуры
• CSS Поля
• CSS Отступы

• CSS Продвинутый

• Сгруппированные и Вложенные Селекторы
• CSS Размеры
• Отображение и Видимость Элементов
• CSS Позиционирование
• Плавающие Элементы
• CSS Выравнивание
• Псевдо Классы в CSS
• Псевдо Элементы в CSS
• Панель Навигации
• Галерея Изображений
• Прозрачность Изображений в CSS
• Спрайты Изображений
• CSS Медиа Типы
• Атрибутивные
  Селекторы
• Заключение

• CSS Примеры

• CSS Примеры

• CSS Справочники

• CSS Справочник
• CSS Единицы Измерения
• CSS Значения Цветов
• CSS Названия Цветов
• CSS HEX Значения Цветов

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

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

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

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

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

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

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

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

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

• <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;} - поля и отступы устанавливаются в 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-эффекта:

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

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