Как вызвать легкого духа

• иконкой‚ стрелкой‚ индикатором загрузки;
• декоративным изображением на кнопке или в меню;
• частью CSS-спрайта (когда множество мелких картинок объединены в одну большую).

Вы «вызываете» лёгкого духа‚ когда заставляете браузер отобразить такой мини-элемент. Ниже разберёмся‚ как это делается на практике.

Подготовка файла-спрайта

Допустим‚ у нас есть три иконки размером 16×16 px‚ объединённые в один PNG-файл icons.png размером 48×16 px.

Структура файла

• позиция 0–15 px: иконка «дом»;
• позиция 16–31 px: иконка «поиск»;
• позиция 32–47 px: иконка «корзина».

Чтобы «вызвать» лёгкого духа‚ создадим пустой <span>‚ который станет «окном» в общий спрайт:

<span class="sprite sprite-home"></span>

Этот элемент ничего не содержит‚ но за счёт CSS получает нужную область спрайта.

CSS: «магия» позиционирования

Ключевая техника — background-position.

.sprite{
 display:inline-block;
 width:16px;
 height:16px;
 background:url('icons.png') no-repeat;
}

.sprite-home{
 background-position:0 0;
}
.sprite-search{
 background-position:-16px 0;
}

.sprite-cart{
 background-position:-32px 0;
}

Теперь‚ добавляя класс .sprite-home‚ мы «вызываем» именно иконку дома; класс .sprite-search — иконку поиска‚ и т.д.

Почему это важно

• Меньше HTTP-запросов. Один файл вместо трёх — экономия времени загрузки.
• Кеширование. Браузер кеширует icons.png и не запрашивает его повторно.

Альтернативы и современные подходы

Если вы работаете в 2026 году‚ рассмотрите:

1. SVG-спрайты — масштабируются без потери качества.
2. CSS-переменные — упрощают динамическое изменение координат.
3. Инструменты сборки (Webpack‚ Vite), автоматически генерируют CSS и спрайты из исходных файлов.

Краткий чек-лист вызова лёгкого духа

• Создайте спрайт-файл.
• Напишите CSS с background-position.
• Проверьте отображение в DevTools → Elements → Styles.

Готово! Теперь ваши лёгкие духи всегда «отзываются» на вызов.