Как в CSS масштабировать спрайты?

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

Как уменьшить размер CSS спрайта?

Для начала давайте вспомним что такое спрайты и зачем они вообще делаются:
CSS спрайт — это способ объединить несколько изображения в одно, чтобы уменьшить кол-во запросов к серверу и уменьшить размер страницы.

Как это выглядит вы уже поняли из превью этой статьи 🙂 . Обычная запись бекграунда со спрайтовым изображением выглядит так:

.ico-soc {
	background: url('../img/icons_sprite.webp') no-repeat 0 0;
	display: inline-block;
	vertical-align: middle;
	width: 40px;
	height: 40px;
	border-radius: 50px;
}

То есть, общее изображение и стили у нас будут одинаковыми, но по второму классу мы будем менять позицию:

.ico-soc.ico-soc-fb {
	background-position: 0 -50px;
}

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

.ico-soc-mini {
	background: url('../img/icons_sprite.webp') no-repeat 0 0;
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	border-radius: 50px;
	transition: 0.3s all;
	zoom: 0.75;
	-moz-transform: scale(0.75);
	-moz-transform-origin: 0 0;
}

В .ico-soc-mini — уменьшился размер с 40px до 30px. Значит — в процентах это -25%, именно эту величину мы отобразили в соответствующем свойстве — 0.75. Меняются только zoom и -moz-transform.

Давайте теперь уменьшим до 20px:

.ico-soc-minimal {
	background: url('../img/icons_sprite.webp') no-repeat 0 0;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	border-radius: 50px;
	transition: 0.3s all;
	zoom: 0.5;
	-moz-transform: scale(0.5);
	-moz-transform-origin: 0 0;
}

Теперь 0.5, думаю вы понимаете почему.

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

Используете ли вы такой метод в своих проектах? Или у вас есть решение получше? 🙂 Если да, делитесь им в комментариях.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *