palette-mix()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Die palette-mix()
-CSS-Funktion kann verwendet werden, um einen neuen font-palette
-Wert zu erstellen, indem zwei font-palette
-Werte nach festgelegten Prozentsätzen und Farbinterpolationsmethoden miteinander gemischt werden.
Syntax
/* 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)
Werte
Funktionale Notation:
palette-mix(method, palette1 [p1], palette2 [p2])
method
-
Eine
<color-interpolation-method>
, die den Interpolationsfarbraum angibt. palette1
,palette2
-
Die
font-palette
-Werte, die zusammen gemischt werden sollen. Diese können beliebigefont-palette
-Werte sein, einschließlichpalette-mix()
-Funktionen,normal
,dark
undlight
. p1
,p2
Optional-
<percentage>
-Werte zwischen0%
und100%
, die die Menge jeder Palette angeben, die gemischt werden soll. Sie werden wie folgt normalisiert:- Wenn sowohl
p1
als auchp2
weggelassen werden, dannp1 = p2 = 50%
. - Wenn
p1
weggelassen wird, dannp1 = 100% - p2
. - Wenn
p2
weggelassen wird, dannp2 = 100% - p1
. - Wenn
p1 = p2 = 0%
, ist die Funktion ungültig. - Wenn
p1 + p2 ≠ 100%
, dannp1' = p1 / (p1 + p2)
undp2' = p2 / (p1 + p2)
, wobeip1'
undp2'
die Normalisierungsergebnisse sind.
- Wenn sowohl
Beispiele
Verwenden von palette-mix()
, um zwei Paletten zu mischen
Dieses Beispiel zeigt, wie Sie die Funktion palette-mix()
verwenden, um eine neue Palette durch das Mischen von zwei anderen zu erstellen.
HTML
Das HTML enthält drei Absätze, auf die unsere Schriftinformationen angewendet werden:
<p class="yellowPalette">Yellow palette</p>
<p class="bluePalette">Blue palette</p>
<p class="mixedPalette">Mixed palette</p>
CSS
Im CSS importieren wir eine Farb-Schriftart von Google Fonts und definieren zwei benutzerdefinierte font-palette
-Werte unter Verwendung der @font-palette-values
-At-Regel. Wir wenden dann drei verschiedene font-palette
-Werte auf die Absätze an — --yellow
, --blue
und eine neue grüne Palette, erstellt mit palette-mix()
, um die blauen und gelben Paletten zusammen zu mischen.
@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%);
}
Ergebnis
Die Ausgabe sieht wie folgt aus:
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # typedef-font-palette-palette-mix |
Browser-Kompatibilität
BCD tables only load in the browser