Планета гаджетов / технологий
Содержание
Рассказывает Сара Драснер
Мы продолжаем разбирать различные приёмы при работе с цветом в веб-разработке. Смотрите также первую часть про генерацию цвета и различные эффекты.
Есть несколько способов собрать много потрясающих цветовых эффектов в одном месте.
Если вы остаётесь в рамках изученного в прошлой части, то для получения цветов вы можете использовать либо циклы for
в Sass (или другом препроцессоре CSS) или JavaScript, либо Math.Random()
и Math.floor()
. Math.floor()
или Math.ceil()
нужны, потому что когда мы не возвращаем целое число, мы получаем ошибку, а не цвет.
Хорошим правило: не стоит изменять все три величины одновременно. Обычно одну величину я изменяю сильно, вторую — чуть-чуть, а третью не трогаю вовсе. В частности, для этого отлично подойдёт HSL, ведь если пройтись циклом по величине тона от 0 до 360, то получится полный круг. Кроме того, браузеры способны обрабатывать и такие значения, как -480 или 600.
@mixin colors($max, $color-frequency) { @for $i from 1 through $max { border: 1px solid hsl(($i — 10)*($color*1.25), ($i — 1)*($color / $color-frequency), 40%); @include colors(20,2); |
Этот код я использовала в этой демке:
И в этой тоже, хотя и с другой областью (листайте вниз очень быстро):
В демке ниже я использовала Math.random()
в пределах значений RGB для получения большого количества цветов в одной области. Это VR-демка, созданная при помощи React. Да, можно было бы задать цвет циклами, но я хотела сделать его рандомным, чтобы выделить движение.
class App extends React.Component { const items = [], amt1 = 5, amt2 = 7; for (let i = 0; i < 30; i++) { let rando = Math.floor(Math.random() * (amt2 — 0 + 1)) + 0, addColor1 = parseInt(rando * i), addColor2 = 255 — parseInt(7 * i), updateColor = `rgb(200, ${addColor1}, ${addColor2})`; items.push(<Entity geometry=«primitive: box; depth: 1.5; height: 1.5; width: 6» material={{color: updateColor}} ... key={i}> </Entity>); |
GreenSock создал инструмент для анимации относительных цветовых величин, что весьма полезно, поскольку вы можете взять несколько элементов и анимировать их в зависимости от их текущих цветовых координат. Эти три черепашки наглядно покажут, о чём я говорю:
TweenMax.to(«.turtle2 path, .turtle2 circle, .turtle2 ellipse», 1.5, {fill:«hsl(+=0, +=50%, +=0%)»}); |
Если вы знакомы с эффектами слоёв в Photoshop, то вам знакомы режимы наложения слоёв. Почти каждый сайт в 90-х использовал их (да, и мой тоже). Они совмещают два слоя, а всего доступно 16 режимов наложения. Мы не будем разбирать их все, но основные моменты рассмотрим.
Верхнее изображение или цвет называется источником, source
, а нижний слой — целью, destination
. Область между ними — это то место, где происходит вся магия, и называется она backdrop
. Смешение происходит по определённым формулам.
Формула режима наложения зависит от типа эффекта. Например, для произведения (multiply): destination × source = backdrop
. Другие эффекты — это различные комбинации базовых математических операций. Линейное наложение — это A+B−1
, а «выгорание цвета» — это 1−(1−B)÷A
. На самом деле, знать эти формулы не обязательно.
Вот подробная документация, а ниже вы можете увидеть простую и наглядную демку:
Кроме того, вот отличная статья, демонстрирующая впечатляющие эффекты, возникающие при наложении нескольких режимов друг на друга. Ниже мы рассмотрим совместное использование режимов наложения и фильтров.
Фильтры CSS предоставляют много классных цветовых эффектов. Вот статья, которая показывает, как работают основные фильтры. Кроме того, есть ещё вот такой интересный сайт.
У моей знакомой есть отличная статья, описывающая создание похожих изображений при помощи feColorMatrix
, примитива фильтра в SVG, который можно применить и к HTML-элементам. Это очень мощный инструмент, позволяющий тонкую настройку цветов. Вот базовый пример использования:
<filter id=«imInTheMatrix»> <feColorMatrix in=«SourceGraphic» type=«matrix» values=«0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0″ /> <path filter=«url(#imInTheMatrix)» … /> |
Также матрицу можно расширить и изменять тон, насыщенность и многое другое:
<filter id=«imInTheHueMatrix»> <feColorMatrix in=«SourceGraphic» |
Также с основами SVG можно ознакомиться, прочитав книгу SVG Colors, Patterns & Gradients или воспользовавшись этой подробной демкой.
Цвет становится цветом только тогда, когда он используется по отношению к другому цвету. Вот что делает работу с цветом по-настоящему трудной. И тут возникает вопрос доступности. Светло-зелёный цвет на чёрном фоне может быть доступным, но на белом он абсолютно нечитаем.
Доступность цвета можно измерить несколькими инструментами. Вот мои любимые:
Также очень удобно изначально настраивать свою палитру цветов в соответствии с доступностью, и в этом вам может помочь инструмент Color Safe. Ну а после завершения работы доступности странички поможет оценить WAVE (Web Accessibility Tool).
На цвет влияет атмосфера, и это важно учитывать, если вы хотите создать какую-то иллюзию глубины. Цвета, которые находятся ближе к вам, более насыщены и контрастны, а отдалённые, напротив, более размыты.
Тени вовсе не серые — их цвет зависит от цвета света. Есть источник света имеет жёлтый оттенок, тень будет казаться фиолетовой. Это стоит учитывать при работе с тенями.
В браузерах есть нативные селекторы цвета для их динамического выбора. Вы можете написать <input type="color">
или <input type="color" value="#ff0000">
. Это легко использовать, но стоит помнить, что в различных браузерах это реализовано немного по-разному. Эта демка покажет, как можно использовать эту фичу совместно с фильтрами для динамического выделения частей изображения.
Мы рассмотрели много различных аспектов работы с цветом, и я надеюсь, что эта статья станет для вас отличным отправным пунктом для дальнейшего изучения и экспериментов.
Перевод статьи «A Nerd’s Guide to Color on the Web»Иван Бирюков, страж правописания