Динамическое изменение цвета на странице выглядит красиво и необычно даже сейчас. Реализовать их можно разными способами, в том числе и через CSS. Современная версия позволяет использовать примитивные функции и задавать условия при написании стилей. Часто под “динамическим” в веб-разработке подразумевается что-то, сделанное на JavaScript либо с его частичным использованием. Однако сейчас в CSS это можно реализовать вообще без использования сторонних скриптов.

Зачем может понадобиться динамичный фон

В первую очередь это необычно и красиво. Также изменение цветов можно сделать частью пользовательского интерфейса, например, реализовав таким образом разные подсказки. Человек будет пролистывать страницу и в ходе прогресса фон блоков будет меняться. Изменения также могут “следовать” за курсором или вообще не быть привязанными к чему-либо на сайте. Также динамичные цвета часто используются на интерактивных сайтах, где, например, можно задать цвет изделия.

Однако, практически во всех случаях, динамичные или вычисляемые цвета делаются на сайте, чтобы упростить его администрирование. Так, владелец ресурса с помощью изменения одной переменной может сразу поменять цветовую гамму всех компонентов на страницах.

По поводу оптимизации переживать не стоит. Стили, записанные в CSS весят немного и не создают ощутимой нагрузки на серверную часть. Расчет изменения цветов на стороне пользователя тоже не требует серьезных мощностей “железа”, поэтому из-за слабого видеочипа страница явно не зависнет. Исключение могут представлять только проекты с очень сложной системой динамического изменения цвета, но кроме интересного дизайна, такая система ничего не даст.

Вообще, это можно сделать с помощью ванильного CSS, даже без использования препроцессоров. Весь необходимый функционал уже заложен в новых версиях языка, которые также поддерживаются всеми популярными браузерами. Реализация с использованием препроцессоров более удобна, так как ее легче настраивать и масштабировать при необходимости. Однако она требует подготовки и хорошее знание работы препроцессоров.

Для примера будут рассмотрены варианты как на чистом CSS, так и с использованием популярных препроцессоров.

Реализация с помощью ванильного CSS

В этом случае вам потребуется только редактор кода без каких-либо дополнительных плагинов и прочего. Создайте файлы index и style. Далее используйте один из предложенных вариантов в зависимости от поставленных задач.

Поменять прозрачность

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

Чтобы его применить, вам нужно знать, как создавать цвета с использованием пользовательских свойств CSS и альфа-канала. Работать придется преимущественно с альфа-каналом, так как в рассматриваемом варианте не поддерживается кодировка HEX. Для примера сделаем примитивный код изменения цвета:

:root {
--color: 255 255 0;
}
.selector {
background-color: rgb(var(--color) / 0.5);
}

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

Свойство --color здесь это основной цвет, от которого будут происходить все изменения. В background-color он прописывается в качестве переменной и делится на половину своей прозрачности.

Однако представленный выше код не идеален, так как для корректной работы нужна максимальная поддержка альфа-каналов: rgb(), rgba(), hsla(). В представленном случае поддерживаются только первые два. Вот так будет выглядеть усовершенствованный сегмент этого кода:

:root {
--color-rgb: 255 255 0;
--color-hsl: 5 30% 20%;
}
.selector {
background-color: rgb(var(--color-rgb) / 0.5);
background-color: hsl(var(--color-hsl) / 0.5);
}

Здесь уже была добавлена поддержка hsla(). Обратите внимание, что в ней цвет задается в процентах, а не фиксированных величинах. Если же вы попробуете задать цвет в обычном HEX, то на выходе получите просто белый фон, так как HEX не поддерживает динамичного изменения цветов. Даже указание альфа-канала для HEX особо не поможет, так как в CSS не предусмотрена конкатенация.

Если задать цвета в HEX, то выходе в любом случае будет белый цвет

Однако объявление пользовательских свойств допустимо с использованием типов: rgb, rgba, hsla, hsl, hex. Они свободно преобразуются между собой.

К рассмотренному выше коду можно привязать какой-нибудь триггер, чтобы фон изменялся в динамики, например, при наведении курсора мыши, клика по какой-нибудь кнопке на сайте. Чтобы изменение цвета происходило более плавно используйте transition. В нем можно прописать задержки в миллисекундах, сделать ключевые точки и так далее.

Использовать функцию calc()

В новой версии CSS можно полноценно пользоваться примитивными функциями без использования сторонних препроцессоров и других инструментов. У задания динамичных цветов с использованием прозрачности есть существенный недостаток – прозрачный цвет не всегда смешивается так как вам это нужно. Также изменения цветов могут быть неоднородными, так как на итоговый цвет влияют цвета, находящиеся за редактируемым блоком. Ликвидировать эти недостатки можно только одним способом – отказавшись от использования непрозрачности.

Сделать это можно двумя способами – прописать для каждого канала индивидуальные значения, что сильно увеличит объем кода:

:root {
/* Определите отдельные каналы определенного цвета */
--color-h: 0;
--color-s: 100%;
--color-l: 50%;
}
.selector {
/* Динамическое изменение отдельных каналов */
color: hsl(
var(--color-h),
calc(var(--color-s) - 10%),
var(--color-l)
);
}

Однако в этом случае значения формата HEX все равно не поддерживаются. Если необходимо получить небольшой код с поддержкой всех форматов, то лучше использовать функцию calc. С ее помощью выражение выше записывается таким образом:

:root {
--color: #ff0000;
}
.selector {
color: hsl(from var(--color) h calc(s - 10%) l);
}

Использовать фильтры в CSS

Приведенные выше варианты позволяют добиться динамического изменения цвета на странице, но они больше подходят для упрощения администрирования сайта. Функция filter позволяет же делать интересные вещи на стороне пользователя, например, настраивать изменение прозрачности, цвета элементов в зависимости от поведения пользователя (наведение курсора, прокрутка страницы, да и просто зацикленная анимация).

Пускай этот метод предоставляет больше возможностей, у него есть некоторые недостатки:

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

Применять можно следующие фильтры: яркость, контраст, оттенки серого, насыщенность, сепия, поворот цвета, инверсия, размытие, прозрачность, отбрасываемая тень. Еще фильтры можно объединять и анимировать их.

Пример доступных фильтров в ванильном CSS

Вот пример кода такой анимации, которая будет воспроизводиться на странице по умолчанию:

animation: haunted 3s infinite;
}

@keyframes haunted {
0% {
filter: brightness(20%);
}
48% {
filter: brightness(20%);
}
50% {
filter: sepia(1) contrast(2) brightness(200%);
}
....
96% {
filter: brightness(400%);
}
}

Динамические значения изменения цвета или других эффектов настраиваются в процентах. Такие сложные конструкции позволяют сделать необычное оформление сайта, но их сложнее обслуживать.

Реализация динамичных цветов с помощью CSS-препроцессоров

CSS-препроцессоры добавляют в ванильный CSS новые функции и возможности, что упрощает создание и поддержку динамичных цветов. Дальнейшие манипуляции будут рассмотрены на примере препроцессора SASS. Перед началом манипуляций с цветами рекомендуется сделать заготовку, разложив все значения по цветовой модели HSL (hue, saturation и lightness). Например, для красного цвета разложение по HSL будет выглядеть так:

--colorPrimary-h: 0;
--colorPrimary-s: 100%;
--colorPrimary-l: 50%;
--colorPrimary: var(--colorPrimary-h), var(--colorPrimary-s), --colorPrimary-l);

На примере этого цвета и рассмотрим дальнейшие корректировки.

Корректировка с использованием HSL

Для начала используем самые примитивные функции: lighten и darken. Записываются они так:

--lighten-percentage: 20%;
--darken-precentage: 15%;

Первое значение определяет отклонение в сторону яркости, а второе в сторону затемнения. Для придания динамичности используем функцию calc, в которой будем складывать значения основного цвета со значениями яркости/затемнения:

--colorPrimary--light: var(--colorPrimary-h), var(--colorPrimary-s),
calc(var(--colorPrimary-l) + var(--lighten-percentage)));

Хоть полученное выражения и выглядит сложно, в нем вы просто увеличиваете яркость красного цвета на 20%. Если его нужно затемнить, то в последнюю скобку пропишите darken-precentage вместо lighten-percentage.

Смешивание цветов

За него отвечает функция mix. Принцип работы чем-то похож на сложение цвета и яркости, но теперь складывать придется именно цвета, точнее их части. Для начала нужно задать два цвета в палитре HSL:

--color-1-h: 0;
--color-1-s: 100%;
--color-1-l: 50%;

--color-2-h: 50;
--color-2-s: 80%;
--color-2-l: 50%;

Теперь получим средние значения для обоих цветов. Не забывайте, что вы работаете в палитре HSL, поэтому записывать придется три формулы. Получим среднее значение для нового цвета:

--avg-1-2-h: calc((var(--color-1-h) + var(--color-2-h)) / 2);
--avg-1-2-s: calc((var(--color-1-s) + var(--color-2-s)) / 2);
--avg-1-2-l: calc((var(--color-1-l) + var(--color-2-l)) / 2);

Однако среднее значение это не совсем микс цвета. Чтобы его получить, выполните последнюю формулу:

--mixed-color: hsl(var(--avg-1-2-h), var(--avg-1-2-s), var(--avg-1-2-l));

Работа с функцией color-contrast

В этом случае цвет вычисляется на основе логических значений, что позволяет получить большую интерактивность. Реализация в SASS делается с помощью функции color-contrast. Она принимает такие значения: базовый цвет, который выступает в качестве контрастного, значения light и dark. Полученные данные функция смешивает в нескольких вариациях и возвращает из них самый контрастный вариант. Контролировать уровень контрастности на выходе можно с помощью специального условия:

--contrastThreshold: 50%;

В рассмотренном примере итоговая контрастность не может превышать 50%. Обратите внимание, что нужно дополнительно посчитать контраст для light и dark. Он не должен превышать установленного порога, иначе получится белый или черный цвет на выходе. Если порог выше яркости основного цвета, возвращается значение light, так как мы умножаем значение lightness на - 100. Например, значение lightness составляет 40, а contrastThreshhold 50. Разница равна -10. Умножаем это значение на -100 и получаем 1000. На выходе будет белый цвет, так как любое значение выше 100 это белый.

Когда значение lightness выше contrastThreshhold, получаем обратную ситуацию. Если lightness 90, а contrastThreshold 50, разница составляет 40. Умножаем это значение на -100 и получаем -3000. Это чёрный цвет, так как lightness ниже нуля.

Чтобы эффективно использовать этот вариант настройки динамического цвета, вам придется проводить предварительные расчеты.

Использование color-contrast отлично подходит для сайтов, где пользователю приходится взаимодействовать с палитрами или настраивать цветовое оформление

Заключение

Использование динамичных цветов оправдано для упрощения администрирования сайта. Так, в админ-панели владелец может изменить лишь один параметр и все остальное подстроится под него. Чуть реже динамичные цвета используются для интересного оформления страниц и придания им интерактивности. Рассмотренные в статье примеры можно также использовать вместе со скриптами JavaScript, расширяя их возможности и делая дизайн сайта более отзывчивым для пользователя.