dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS: color-mix и color-contrast

стили для родителя,содержащего определенный дочерний элемент

dr.Brain

время чтения 1 мин.

Photo by Albert Stoynov on Unsplash

В CSS появились новые возможности управления значением <color>: color-mix() и color-contrast()

Пока еще экспериментальная функциональная нотация color-contrast() берет указанное значение цвета и сравнивает его с остальным списком, выбирая наиболее контрастное значение:

color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

Функциональная нотация color-mix() принимает два цветовых значения и возвращает результат их смешивания в заданном цветовом пространстве и количестве.

color-mix(in lab, plum 60%, #f00 50%)

Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.