Это статья про веб-технологии и 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 градусов в обратном направлении
Для примера поменяем цвета у эмодзи из стандартного набора:
А вот простой код, который за это отвечает:
<!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%:
Для перевода в чёрно-белый оттенок используют команду filter: grayscale(), где в скобках указывают число от 0 до 1. Например, фильтр с параметром 0,5 приглушит все цвета наполовину, а с единицей — сделает полноценную чёрно-белую картинку:
Насыщенность цветов управляется командой filter: saturate() по такому принципу:
- если в скобках единица, то насыщенность не меняется;
- если меньше единицы — цвета приглушаются и всё работает так же, как и команда
filter: grayscale(); - если больше — цвета становятся насыщеннее в такое количество раз.
Например, если поставить насыщенность 0, то фото станет чёрно-белым, как в предыдущем случае, а если 3 — все цвета станут в 3 раза насыщеннее:
<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-переменными, то можете уже сами сделать первую версию такого редактора.
