Как работает CSS-функция color-mod
Development | Комментировать запись
В препроцессорах типа Sass уже давно есть функции для работы с цветом. Эта возможность настраивать и изменять цвета должна скоро появиться в CSS благодаря модулю CSS Color Level 4. С его помощью вы сможете применить к базовым цветам несколько регуляторов цвета. Этот модуль очень удобно сочетать с переменными CSS, потому что это позволяет определить базовые цвета как переменные, а затем применить регуляторы там, где это необходимо.
Примечание: Обратите внимание, что функция управления цветом раньше называлась просто color. Недавно в спецификации название было изменено на color-mod.
Вот пример использования функции color-mod:
.box {
// добавим немного красного
color: color-mod(rgb(147,123,25) red(218));
}
Также ее можно использовать с HEX-значением в качестве основного цвета:
.box {
color: color-mod(#937b19 contrast(25%);
}
и даже с вычисляемыми свойствами (переменными CSS):
:root {
--base-color: #937b19;
}
.box {
color: color-mod(var(--base-color) tint(59%));
}
Из приведенных выше фрагментов получится цвет rgb(218, 123, 25).
В рамках одной цветовой функции можно использовать несколько регуляторов цвета:
.box {
color: color-mod(purple lightness(62%) red(218) blue(202) whiteness(25%));
}
Регуляторы цвета
Функция color-mod поддерживает следующие регуляторы цвета:
- alpha: задает значение альфа-прозрачности в диапазоне от 0% до 100%.
- red, green и blue (rgb): принимает значение от 0 до 255. В стартовом rgb(140, 254, 255) начальное значение красного – 140, а это значит, что любое значение выше 140 увеличивает количество красного в цвете, а любое значение ниже 140 уменьшает его. Зеленый и синий работают точно так же.
- blackness и whiteness: определяют черноту и белизну в значениях от 0% до 100%.
- contrast: задает контраст в диапазоне от 0% до 100%.
- saturation: определяет насыщенность цвета в диапазоне от 0% до 100% (где 0% – это серый).
- lightness: светлота также определяется значением от 0% до 100%, где 0% – черный, а 100% – белый.
- tint: оттенок, принимает значение от 0% до 100%.
- hue: начальный тон, принимает значение от 0 до 360.
- shade: тень определяется значением от 0% до 100% (100% – черный).
- blend: позволяет смешивать цвета. Вот пример использования этого регулятора:
.box {
color: color-mod(hotpink blend(yellow 59%));
}
Поддержка браузерами
Модуль CSS Colors Level 4 все еще находится на стадии разработки в процессе рекомендации, а поддержка функции color-mod еще не реализована ни в одном браузере. Хорошая новость в том, что вы можете начать использовать ее уже сегодня благодаря PostCSS и плагину cssnext – пока функция не поддерживается в браузерах, он преобразует стили таким образом, чтобы они все равно работали.
Также советуем обратить внимание на ColorMe.io –это отличный инструмент, который поможет вам составить цвета.
Читайте также: Градиент и изображения-границы на чистом CSS
Tags: CSS