kwork banner 468x60kwork banner 728x90kwork banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180

Руководство по спрайтам изображений в CSS

Спрайты — это двумерные изображения, которые состоят из объединения небольших изображений в одно большое с определенными координатами X и Y.

Чтобы отобразить одно изображение из объединенного, вы можете использовать CSS-свойство background-position, определяющее точное положение отображаемого изображения.

Преимущество использования CSS Image Sprite

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

Использование спрайтов вместо отдельных изображений значительно сократит количество HTTP-запросов, которые браузер отправляет на сервер, что может быть очень эффективо для увеличения общей производительности сайта.

Сокращение количества HTTP-запросов оказывает существенное влияние на сокращение времени отклика; это делает веб-страницу более отзывчивой для пользователя.

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

Принимая во внимание, что в спрайт-версии все изображения объединены в одно, изображение при наведении курсора отображается сразу, что приводит к эффекту плавного переключения.

Весь процесс создания этого примера объясняется ниже.

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

Вы можете создать свой собственный спрайт изображений, используя любой инструмент для редактирования изображений, который вам нравится. В итоге у вас должно получиться что-то похожее на пример ниже.

Для наглядности, в примере мы использовали все значки одинакового размера и расположили их близко друг к другу для простого вычисления смещения.

Спрайт изображений не обязательно должен быть вертикальным. Изображения могут располагаться в любом порядке — горизонтальном, шахматном и т.д.

Как отобразить иконку из Image Sprite

Теперь подробнее. Используя CSS, мы можем отобразить только ту часть изображения, которая нам нужна.

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

.sprite {
    background: url("images/mySprite.png") no-repeat;
}

Теперь мы должны определить класс для каждого элемента, который мы хотим отобразить. Например, для отображения значка Internet Explorer в виде спрайта изображения будет использоваться код CSS.

.ie {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px; /* Icon background position in sprite */
}

Теперь возникает вопрос, как мы получили эти значения пикселей для background-position? Давайте разберемся. Первое значение — горизонтальное положение, а второе — вертикальное положение фона.

Поскольку верхний левый угол значка Internet Explorer касается левого края, его горизонтальное расстояние от начальной точки, т. е. верхний левый угол спрайта изображения, равен 0, и, поскольку он расположен на 5-й позиции, его вертикальное расстояние от начального точка спрайта изображения равна 4 x 50px = 200px, потому что высота каждой иконки равна 50px.

Просто поиграйте со значением свойства background-position из следующих примеров, и вы быстро узнаете, как оно работает.

Создание меню навигации с использованием CSS Image Sprite

В предыдущем разделе мы узнали, как отобразить отдельную иконку из спрайта изображения.

Здесь мы будем использовать то же изображение спрайта, чтобы создать ваше меню навигации.

Основная HTML-разметка для навигации

Для начала создадим необходимую разметку используя неупорядоченный список и классы для каждого элемента.

<ul class="menu">
    <li class="firefox"><a href="#">Firefox</a></li>
    <li class="chrome"><a href="#">Chrome</a></li>
    <li class="ie"><a href="#">Explorer</a></li>
    <li class="opera"><a href="#">Opera</a></li>
    <li class="safari"><a href="#">Safari</a></li>
</ul>

Применение CSS на навигации

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

Шаг 1: Сброс структуры списка

По умолчанию неупорядоченные списки HTML отображаются с маркерами. Нам нужно удалить маркеры по умолчанию, установив атрибут list-style-type в значение none. Так же определим несколько свойств типографики для повторяющихся элементов <li>.

ul.menu {
    list-style-type: none;
}
ul.menu li {
    padding: 5px;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

Шаг 2. Настройка общих свойств для каждой ссылки

На этом этапе мы установим все общие CSS-свойства, которыми будут обладать ссылки, color, background-image, display, padding и т.д.

ul.menu li a {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    padding-left: 60px; /* To sift text off the background-image */
    color: #3E789F;
    background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
}

Шаг 3: Установка состояния по умолчанию для каждой ссылки

Теперь мы должны установить свойства для каждого элемента меню индивидуально, потому что каждый элемент в спрайте изображения имеет различное положение background-position.

Например, иконка Firefox находится в начальной точке, то есть в верхнем левом углу спрайта изображения, поэтому нет необходимости сдвигать фоновое изображение. Следовательно, вертикальное и горизонтальное положение фона в этом случае будет равно 0. Аналогично, вы можете определить background-position для других иконок внутри спрайта изображения.

ul.menu li.firefox a {
    background-position: 0 0;
}
ul.menu li.chrome a {
    background-position: 0 -100px;
}
ul.menu li.ie a {
    background-position: 0 -200px;
}
ul.menu li.safari a {
    background-position: 0 -300px;
}
ul.menu li.opera a {
    background-position: 0 -400px;
}

Шаг 4: Добавление состояний наведения для ссылок

Добавление состояний наведения имеет тот же принцип, что и добавление вышеуказанных ссылок. Просто переместите их верхний левый угол в начальную точку (то есть в верхний левый угол) спрайта изображения, как мы делали выше. Вы можете просто рассчитать background-position, используя следующую формулу:

Вертикальная позиция в режиме наведения = Вертикальная позиция в нормальном состоянии - 50px

ul.menu li.firefox a:hover {
    background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
    background-position: 0 -150px;
}
ul.menu li.ie a:hover {
    background-position: 0 -250px;
}
ul.menu li.safari a:hover {
    background-position: 0 -350px;
}
ul.menu li.opera a:hover {
    background-position: 0 -450px;
}

Готово! Вот окончательный код HTML и CSS после объединения всех шагов:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Sprite Navigation Menu</title>
<style>
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* To sift text off the background-image */
        color: #3E789F;
        background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ul.menu li.chrome a {
        background-position: 0 -100px;
    }
    ul.menu li.ie a {
        background-position: 0 -200px;
    }
    ul.menu li.safari a {
        background-position: 0 -300px;
    }
    ul.menu li.opera a {
        background-position: 0 -400px;
    }
    ul.menu li.firefox a:hover {
        background-position: 0 -50px;
    }
    ul.menu li.chrome a:hover {
        background-position: 0 -150px;
    }
    ul.menu li.ie a:hover {
        background-position: 0 -250px;
    }
    ul.menu li.safari a:hover {
        background-position: 0 -350px;
    }
    ul.menu li.opera a:hover {
        background-position: 0 -450px;
    }
</style>
</head>
<body>
    <ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
    </ul>
</body>
</html>
kwork banner 480x320kwork banner 728x90kwork banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Подробнее

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Подробнее

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Подробнее