Як веб-розробники, ми часто використовуємо CSS для маніпулювання та стилізації кольорів, але завжди шукаємо більш інтуїтивні способи їх змішування та маніпулювання ними. Ось тут і з'являється функція CSS color-mix(), яка пропонує новий, потужний спосіб змішувати кольори безпосередньо в CSS.
Перегляньте мої приклади на codepen для функції color-mix(), щоб побачити живу демонстрацію теми, яку обговорюється в цій статті:
https://codepen.io/Nicolas-Wanner/pen/jENQjNQ
Що таке функція color-mix()?
Функція color-mix() в CSS дозволяє змішувати два кольори разом на основі заданого співвідношення.
Ось приклад використання color-mix():
element {
background-color: color-mix(in sRGB, red 50%, yellow);
}
У цьому прикладі red і yellow змішуються в рівних частинах (50% кожного). Результат — оранжевий відтінок.
Але ми можемо змішувати не тільки суцільні кольори, але й кольори з будь-яким прозорим значенням кольору:
element {
background-color: color-mix(in sRGB, red 50%, transparent);
}
Ще одна чудова особливість полягає в тому, що ми можемо використовувати будь-який колір як CSS змінну.
element {
background-color: color-mix(in srgb, var(--my-color) 50%, #000);
}
Розуміння параметрів color-mix()
Функція починається з вказівки колірного простору. Це необов'язково, але може бути корисно для контролю того, як відбувається змішування. in sRGB — це найбільш поширений колірний простір для веб-дизайну і представляє стандартну RGB модель кольору, тому для наших потреб ми можемо завжди використовувати цей колірний простір.
Підтримка браузерами та обмеження
З моменту випуску у 2023 році, color-mix() підтримується в усіх основних сучасних браузерах.
Висновок
Функція color-mix() в CSS — це потужний інструмент для змішування кольорів. Ми можемо зробити будь-який колір світлішим, темнішим або прозорішим безпосередньо в CSS. Найкраща частина, на мою думку, полягає в тому, що нам не потрібно знати, який тип кольору використовується, що може бути особливо корисно при маніпулюванні CSS змінними.
Перекладено з: Understanding CSS color-mix()