В нем описывается, как правильный способ смешивания цветов состоит в использовании квадратного корня из среднего значения квадраты значений R, G и B, а не просто брать среднее значение.
Поэтому мне стало любопытно, и я решил проверить, как CSS реализует градиенты с помощью простого красно-зеленого градиента:< /p>
Код: Выделить всё
div {
width: 600px;
height: 600px;
background: linear-gradient(to right, rgb(0,255,0), rgb(255,0,0));
}
Как видите, градиент некрасивый, с темно-желтым посередине.
Я решил реализовать правильный градиент, используя ограничители градиента, повторяющие кривую sqrt, и результат однозначно лучше:
Код: Выделить всё
div {
width: 600px;
height: 600px;
background: linear-gradient(to right,
rgb(000,255,000),
rgb(127,221,000) 25%,
rgb(180,180,000) 50%,
rgb(221,127,000) 75%,
rgb(255,000,000) 100%
);
}
Из-за ограниченного количества остановок результирующий рендер получается немного блочным, но общий градиент выглядит заметно лучше, чем по умолчанию. Добавление еще большего количества остановок еще больше улучшит его:
Код: Выделить всё
div {
width: 600px;
height: 600px;
background: linear-gradient(to right,
rgb(000,255,000),
rgb(090,239,000) 12.5%,
rgb(127,221,000) 25%,
rgb(156,201,000) 37.5%,
rgb(180,180,000) 50%,
rgb(201,156,000) 62.5%,
rgb(221,127,000) 75%,
rgb(239,090,000) 87.5%,
rgb(255,000,000) 100%
);
}
Мой вопрос: есть ли способ добиться более непрерывного градиента, подобного этому, в CSS (либо в стандартном варианте, либо с помощью какого-либо другого инструмента)?
Подробнее здесь: https://stackoverflow.com/questions/793 ... -right-way
