Что такое CSS спрайты?

admin

CSS спрайты — это специальная техника, когда мелкие картинки объединяются в один файл и выводятся не с помощью тега <img>, а с помощью CSS. Допустим, у нас есть большой файл с картинками icons.png. Тогда пример использования выглядел бы так:

.icon {background: url(/icons.png); height: 32px; width: 32px;display: inline-block;}
.icon_open {background-position: -64px 0px;}

Допустим, что размер иконок 32х32 и нужная нам иконка идет третей в первом ряду (в спрайте)

<span class="icon icon_open"></span> Открыть что-то

Пример использования в HTML

Compass — удобный инструмент для работы со спрайтами.

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

Останні статті

Всегда перед глазами: 15 лучших тем VS Code на 2026 год

Visual Code от Microsoft, вероятно, один из самых популярных редакторов кода. Разработчики любят его за…

22.02.2026

Киберпанк по-японски: 9 лучших аниме в жанре «технологии нас погубят»

Япония сама по себе — сплошной киберпанк. Это заметил даже культовый писатель жанра Уильям Гибсон,…

21.02.2026

Не просто коробка с бантом. Как оригинально подарить гаджет: 5 незатратных способов

Сам по себе телефон Айфон 17 Про Макс – отличный подарок. У него красивая заводская…

12.02.2026

Лучшие криптобиржи для криптозаймов в 2025 году: где лучше брать кредит под крипту?

На фоне роста спроса на ликвидность в бычьем рынке 2025 года, криптозаймы снова выходят на…

09.07.2025

Что такое прокси-сервер: пояснение простыми словами, зачем нужны прокси

Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…

21.11.2024

Что такое PWA приложение? Зачем необходимо прогрессивное веб-приложение

Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…

19.11.2024