CSS function color-mix
Опис
Функція color-mix() в CSS відкриває можливість змішування двох кольорів в заданому просторі кольорів. Цей метод забезпечує динамічне поєднання кольорів, надаючи дизайнерам та розробникам гнучкість у створенні унікальних та гармонійних кольорових схем.
Основна суть функції color-mix() полягає в тому, що вона приймає п'ять параметрів: method, color1, p1, color2 і p2. Специфікація цих параметрів наступна:
method: визначає простір кольорів, в якому відбувається інтерполяція.color1іcolor2: вказують кольори, які треба змішати.p1іp2: вказують відсоток кожного кольору для змішування, при чому їх сума нормалізується до 100%. Якщо відсотки відсутні, значення за замовчуванням - 50% для кожного кольору.
Приклад використання:
div {
background-color: color-mix(in srgb, red, blue, 30%);
}
У цьому прикладі color-mix() змішує червоний колір із синім у просторі sRGB, використовуючи 30% синього кольору. Результатом є унікальний відтінок, що містить обидва кольори, з домінуючим червоним та 30% синього. Такий підхід дозволяє створювати багато різних відтінків, використовуючи лише два основних кольори, та контролювати їх змішування на різних етапах дизайну.
- Порада
-
Експериментуйте з різними методами інтерполяції кольорів та відсотками, щоб досягти бажаного ефекту змішування кольорів.
автор: Bond
Синтаксис
color-mix(<method>, <color1> [ <p1> ] [ <color2> [ <p2> ] ]);Функція color-mix може отримувати 3 значень:
-
<method> -
Вказує простір кольорів та метод інтерполяції. Приймає значення:
автор: Bondin srgb,in srgb-linear,in lab,in oklab,in xyz,in xyz-d50,in xyz-d65,in hsl,in hwb,in lch,in oklch. -
<color1>, <color2> -
Параметри, що визначають кольори, які треба змішати. Приймають значення відповідно до формату кольору, наприклад,
автор: Bond#34c9eb,red,rgb(255, 0, 0), тощо. -
<p1>, <p2> -
Відсоток кожного кольору для змішування. Приймають значення від
автор: Bond0%до100%.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 113 | 16.2 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 113 | 16.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на квадрат, щоб побачити ефект зміни кольору.
Другий квадрат змішує колір використовуючи функцію color-mix().
Коментарі
Коментарів ще немає — будьте першим!