Динамическое управление цветами с помощью относительных цветов CSS

Динамическое управление цветами с помощью относительных цветов CSS

От автора: относительные цвета CSS обеспечивают динамическую манипуляцию цветами, которую я всегда хотел получить в обычном CSS, с того времени как цветовые функции Sass впервые появились на сцене ( darken(), lighten() и т. д.).

Позвольте мне объяснить подробнее, почему это так важно для меня.

Динамические цвета в CSS через прозрачность

Я писал о создании оттенков цвета с помощью переменных CSS, где подробно описывается, как создавать динамические цвета с использованием пользовательских свойств и вспомогательной цветовой функции альфа-канала. Например:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Вы не можете «переводить» значение цвета пользовательского свойства от одного типа к другому:

Динамические цвета в CSS с использованием значений цвета HEX невозможны. Хотя у вас есть возможность указать альфа-канал для цвета HEX, вы можете сделать это только декларативно (т.е. #ff000080). В CSS нет понятия конкатенации строк.

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

Однако с относительными цветами в CSS все меняется! Вы можете объявить значение пользовательского свойства, используя любой желаемый цветовой тип (шестнадцатеричный, rgb, hsl, lch, или даже с помощью ключевого слова, например green), и на лету преобразовать его в любой другой цветовой тип:

Это работает даже с ключевыми словами!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Я не знаю, поразило ли это вас так же сильно, как и меня, но уделите минуту, чтобы подумать об этом. Представьте себе возможности, которые начинают открываться с таким синтаксисом.

Динамические цвета в CSS через calc()

Динамическое изменение цвета с использованием альфа-канала имеет свои недостатки. Прозрачные цвета переходят в цвета, на которых они расположены. Вы можете получить «немного более светлый» вариант, изменив непрозрачность цвета, но он будет не везде одинаковым. Это зависит от того, поверх какого цвета или цветов он находится.

Динамическое управление цветами с помощью относительных цветов CSS

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

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

Учтите, что при таком подходе, не поддерживаются шестнадцатеричные значения цвета. С относительными цветами CSS в сочетании с calc(), настроить динамическое изменение цвета теперь очень просто.

Круто! Приведу еще несколько примеров для полноты:

Удивительно! Цветовые функции Sass, позвольте мне указать вам на выход!

Вывод

Деструктуризация? Приведение типов? Эти слова принадлежат посту о CSS? CSS — это язык программирования? Единственное, что нам сейчас нужно, это возможность определять пользовательские функции в CSS — тогда вы сможете создавать свои собственные многоразовые функции lighten() и darken(). Но я отвлекся.

Поддержка этого синтаксиса предоставлена в Safari Technology Preview 122. На момент написания этой статьи это все еще экспериментальная функция, поэтому вы должны включить ее в строке меню «Разработка> Экспериментальные функции» (Develop > Experimental Features).

Автор: Jim Nielsen

Источник: blog.jim-nielsen.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментирование закрыто.