palette-mix()

Ограниченная доступность

Эта функция не относится к базовым, так как она не работает во всех популярных браузерах.

Экспериментальная функция: Это экспериментальная технология
Перед использованием в продакшене внимательно изучите таблицу совместимости с браузерами.

Функцию palette-mix() CSS функция можно использовать для создания нового значения font-palette путем смешивания двух font-palette значений с указанными процентами и методами интерполяции цветов.

Синтаксис

/* Blending font-defined palettes */
font-palette: palette-mix(in lch, normal, dark)

/* Blending author-defined palettes */
font-palette: palette-mix(in lch, --blues, --yellows)

/* Varying percentage of each palette mixed */
font-palette: palette-mix(in lch, --blues 50%, --yellows 50%)
font-palette: palette-mix(in lch, --blues 70%, --yellows 30%)

/* Varying color interpolation method */
font-palette: palette-mix(in srgb, --blues, --yellows)
font-palette: palette-mix(in hsl, --blues, --yellows)
font-palette: palette-mix(in hsl shorter hue, --blues, --yellows)

Значения

Функциональная запись:

palette-mix(method, palette1 [p1], palette2 [p2])

method

Метод <color-interpolation-method>, определяющий цветовое пространство интерполяции.

palette1, palette2

Значения font-palette, которые необходимо смешать. Это могут быть любые font-palette значения, включая функции palette-mix(), normal, dark, и light.

p1, p2 Необязательно

Значения <percentage> от 0% до 100%, определяющие количество каждой палитры для смешивания. Они нормируются следующим образом:

Если оба p1 и p2 отсутствуют, то p1 = p2 = 50%.
Если p1 отсутствует, то p1 = 100% - p2.
Если p2 отсутствует, то p2 = 100% - p1.
Если p1 = p2 = 0%, функция недопустима.
Если p1 + p2 ≠ 100%, тогда p1' = p1 / (p1 + p2) и p2' = p2 / (p1 + p2), где p1' и p2' — результаты нормирования.

Примеры

Использование `palette-mix()` для смешивания двух палитр

Этот пример демонстрирует, как использовать функцию palette-mix() для создания новой палитры путем смешивания двух других.

HTML

HTML содержит три абзаца для применения информации о шрифтах:

<p class="yellowPalette">Yellow palette</p>
<p class="bluePalette">Blue palette</p>
<p class="mixedPalette">Mixed palette</p>

CSS

В CSS импортируется цветовой шрифт из Google Fonts и определяются два настраиваемых значения font-palette с использованием правила @font-palette-values. Затем к абзацам применяются три разных значения font-palette — --yellow, --blue, и новая зеленая палитра, созданная с использованием palette-mix() для смешивания синей и желтой палитр.

@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

@font-palette-values --blueNabla {
  font-family: Nabla;
  base-palette: 2; /* this is Nabla's blue palette */
}

@font-palette-values --yellowNabla {
  font-family: Nabla;
  base-palette: 7; /* this is Nabla's yellow palette */
}

p {
  font-family: "Nabla";
  font-size: 4rem;
  text-align: center;
  margin: 0;
}

.yellowPalette {
  font-palette: --yellowNabla;
}

.bluePalette {
  font-palette: --blueNabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blueNabla 55%, --yellowNabla 45%);
}

Результат

Вывод выглядит следующим образом:

Спецификации

Спецификация
CSS Fonts Module Level 4 # typedef-font-palette-palette-mix

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`palette-mix`	121	121	Нет	107	Нет	121	Нет	81	Нет	25.0	121

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-palette/palette-mix