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

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

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

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

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

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

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

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

Например, если мы возьмём красный цвет, который лежит на нуле градусов, и повернём его на 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

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Меняем цвета и оттенки</title>
  <style type="text/css">

    body {
      font-size: 3rem;
    }

    .green-to-red {
      /*  вращаем круг в противоположную сторону */
      filter: hue-rotate(-120deg);
    }

    .red-to-green,
    .green-to-blue {
      filter: hue-rotate(120deg);
    }

    .red-to-yellow {
      filter: hue-rotate(60deg);
    }


    body {
      margin: 0;
      display: grid;
      /* размещаем всё по центру */
      place-content: center;
      min-height: 100vh;
    }

    html, body {
      /* белый фон */
      background: #fff;
    }
  </style>

</head>
<body>
  <p>Зелёный → красный:
    <br>
    ♻️ ✅ ❎ 🐍 🥦 → <span class="green-to-red">♻️ ✅ ❎ 🐍 🥦</span>
  </p>

  <p>Зелёный → синий:
    <br>
    ♻️ ✅ ❎ 🐍 🥦 → <span class="green-to-blue">♻️ ✅ ❎ 🐍 🥦</span>
  </p>

  <p>Красный → зелёный:
    <br>
    ❤️ ❌ 🚗 🌶 🚨 → <span class="red-to-green">❤️ ❌ 🚗 🌶 🚨</span>
  </p>

  <p>Красный → жёлтый:
    <br>❤️ ❌ 🚗 🌶 🚨 → <span class="red-to-yellow">❤️ ❌ 🚗 🌶 🚨</span>
  </p>
  
</body>
</html>

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

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

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

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

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

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

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

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

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

<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>

Что дальше

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

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Алина Грызлова

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Изучить
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
easy