Перекрашиваем картинки с помощью CSS

Журнал «Код»·3 Mar 2022

Фотошопим кодом в браузере

Перекрашиваем картинки с помощью CSS, image #1

Это статья про веб-технологии и CSS — штуку, благодаря которой наши сайты выглядят красиво. Раньше CSS был простым инструментом оформления веб-страниц: можно было поменять цвет текста, фона, выровнять картинки или настроить расположение элементов на странице. Сейчас современный CSS может гораздо больше:

А ещё он может поменять цвет любого элемента на странице — перекрасить его в сепию, сделать чёрно-белым или добавить насыщенности. Про это и будет сегодняшняя статья.

Меняем оттенок цвета

Каждое изображение на экране состоит из пикселей, у каждого пикселя свой цвет. Цветов много, но их все можно представить в виде цветового круга оттенков. А если этот круг разбить на секторы, то можно понять, как поменяется тот или иной цвет, если мы повернём этот круг на сколько-то градусов:

Перекрашиваем картинки с помощью CSS, image #2

Например, если мы возьмём красный цвет, который лежит на нуле градусов, и повернём его на 60 градусов против хода часовой стрелки, то получим жёлтый цвет, а если на 120, то он превратится в зелёный. В это же время синий пиксель, который лежал на 240 градусах, после первого смещения превратится в фиолетовый (240 + 60 = 300), а после второго — в красный (240 + 120 = 360, или 0).

Зная это, мы можем пропорционально менять все цвета в изображении, просто поворачивая его на нужное количество градусов по кругу оттенков. Для этого в CSS используется команда filter: hue-rotate (), где в скобках указываются градусы, на которые поворачиваем круг. Например:

filter: hue-rotate(120deg); ← поворачиваем круг на 120 градусов

filter: hue-rotate(-60deg); ← поворачиваем круг на 60 градусов в обратном направлении

Для примера поменяем цвета у эмодзи из стандартного набора:

Перекрашиваем картинки с помощью CSS, image #3

А вот простой код, который за это отвечает:

Перекрашиваем картинки с помощью CSS, image #4

Сепия, чёрно-белое фото и насыщенность

Сепия — это имитация старой напечатанной фотографии, когда всё состоит из оттенков коричневого цвета (сепии). Чтобы сделать такой эффект, используют команду filter: sepia(100%). Если нужно сохранить некоторые оттенки цветов, можно ослабить фильтр и указать, например, не 100%, а 50%:

Фото из статьи в Википедии про фотографию. На 50% ещё виден красный оттенок у кепки и зёлёный у травы

Для перевода в чёрно-белый оттенок используют команду filter: grayscale(), где в скобках указывают число от 0 до 1. Например, фильтр с параметром 0,5 приглушит все цвета наполовину, а с единицей — сделает полноценную чёрно-белую картинку:

Перекрашиваем картинки с помощью CSS, image #6

Насыщенность цветов управляется командой filter: saturate() по такому принципу:

если в скобках единица, то насыщенность не меняется;
если меньше единицы — цвета приглушаются и всё работает так же, как и команда filter: grayscale();
если больше — цвета становятся насыщеннее в такое количество раз.

Например, если поставить насыщенность 0, то фото станет чёрно-белым, как в предыдущем случае, а если 3 — все цвета станут в 3 раза насыщеннее:

Перекрашиваем картинки с помощью CSS, image #7

Решение

<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Сепия, чёрно-белое фото и насыщенность
</title>
  <style type="text/css">
  	body {
  		margin: 20px;
  	}
  	img {
  		max-width: 48vw;
  	}
  	.sepia-50 {
  		filter: sepia(75%);
  	}

  	.sepia-100 {
  		filter: sepia(100%);
  	}

  	.bw-50 {
  		filter: grayscale(0.5);
  	}

  	.bw-100 {
  		filter: grayscale(1);
  	}

  	.sat-0 {
  		filter: saturate(0);
  	}

  	.sat-50 {
  		filter: saturate(0.5);
  	}

  	.sat-300 {
  		filter: saturate(3);
  	}

  </style>

</head>
<body>
	<h2>Сепия 50%</h2>
	<img src="pic.jpg">
	<img src="pic.jpg" class="sepia-50">

	<h2>Сепия 100%</h2>
	<img src="pic.jpg">
	<img src="pic.jpg" class="sepia-100">

	<h2>Чёрно-белое 50%</h2>
	<img src="pic.jpg">
	<img src="pic.jpg" class="bw-50">

	<h2>Чёрно-белое 100%</h2>
	<img src="pic.jpg">
	<img src="pic.jpg" class="bw-100">

	<h2>Насыщенность 0%</h2>
	<img src="pic.jpg">
	<img src="pic.jpg" class="sat-0">

	<h2>Насыщенность 50%</h2>
	<img src="pic.jpg">
	<img src="pic.jpg" class="sat-50">

	<h2>Насыщенность 300%</h2>
	<img src="pic.jpg">
	<img src="pic.jpg" class="sat-300">


</body>
</html>

HTML

Что дальше

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

998 views·26 shares

998 views