САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Спрайты



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

Спрайт изображения - это набор изображений, помещенных в одно изображение.

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

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


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

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

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

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

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

Пример

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}
Редактор кода »

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

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

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


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

Мы хотим использовать спрайтовое изображение ("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;
    background: url('img_navsprites.gif') 0 0;
}

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

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}
Редактор кода »

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

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

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

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

Спрайты изображений - эффект наведения

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

Совет: Селектор :hover можно использовать для всех элементов, а не только для ссылок.

Новое изображение ("img_navsprites_hover.gif") содержит три изображения навигации и три изображения для использования эффектов наведения:

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

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

Добавляем только три строки кода, чтобы добавить эффект наведения:

Пример

#home a:hover {
    background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
    background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
    background: url('img_navsprites_hover.gif') -91px -45px;
}
Редактор кода »

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

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