Mischmodi

The CSS Podcast – 024: Blend Modes

Duotone ist eine beliebte Farbbehandlung in der Fotografie, wodurch ein Bild so aussieht, als würde es nur aus zwei kontrastierenden Farben bestehen: eine für Spitzlichter und eine andere für dunkel. Wie gehen Sie dabei aber mit CSS vor?

Mit Mischmodi und anderen erlernten Techniken wie Filtern und Pseudoelementen können Sie diesen Effekt auf jedes Bild anwenden.

Was ist ein Mischmodus?

Mischmodi werden häufig in Designtools wie Photoshop verwendet, um durch das Mischen von Farben aus zwei oder mehr Ebenen einen Kompositionseffekt zu erzielen. Indem Sie die Art und Weise ändern, wie sich Farben mischen, können Sie wirklich interessante visuelle Effekte erzielen. Sie können Mischmodi auch als Dienstprogramm verwenden, um z. B. ein Bild mit weißem Hintergrund zu isolieren, sodass es einen transparenten Hintergrund zu haben scheint.

Sie können die meisten in einem Designtool verfügbaren Zusammenführungsmodi mit CSS über die Eigenschaften mix-blend-mode oder background-blend-mode verwenden. Mit mix-blend-mode wird ein ganzes Element überlagert, mit background-blend-mode wird der Hintergrund eines Elements überlagert.

Sie verwenden background-blend-mode, wenn Sie mehrere Hintergründe für ein Element haben und alle Hintergründe ineinander übergehen möchten.

mix-blend-mode wirkt sich auf das gesamte Element aus, einschließlich seiner Pseudoelemente. Ein Anwendungsfall ist das erste Beispiel eines Duoton-Bildes, bei dem Farbebenen über seine Pseudoelemente auf das Element angewendet werden.

Mischmodi lassen sich in zwei Kategorien unterteilen: trennbare und nicht trennbare. Bei einem trennbaren Mischmodus wird jede Farbkomponente, z. B. RGB, einzeln betrachtet. Bei einem nicht trennbaren Mischmodus werden alle Farbkomponenten gleich behandelt.

Browserkompatibilität

mix-blend-mode

background-blend-mode

Trennbare Mischmodi

Normal

Dies ist der standardmäßige Mischmodus. Es ändert sich nichts daran, wie ein Element mit anderen verschmelzen kann.

Multiplizieren

Der Mischmodus „multiply“ ist mit dem Stapeln mehrerer Folien übereinander vergleichbar. Weiße Pixel erscheinen transparent und schwarze Pixel schwarz. Alles dazwischen multipliziert die Leuchtdichtewerte (hell). Das bedeutet, dass Licht viel heller und dunkler und dunkler werden – meist führt zu einem dunkleren Ergebnis.

.my-element {
  mix-blend-mode: multiply;
}

Display

Die Verwendung von screen multipliziert die light-Werte. Dies ist ein umgekehrter Effekt von multiply und führt in den meisten Fällen zu einem helleren Ergebnis.

.my-element {
  mix-blend-mode: screen;
}

Overlay

In diesem Mischmodus (overlay) werden multiply und screen kombiniert. Dunkle Basisfarben werden dunkler und helle Grundfarben werden heller. Farben im mittleren Bereich, z. B. Grau mit 50 %, sind nicht betroffen.

.my-element {
  mix-blend-mode: overlay;
}

Abdunkeln

Der Mischmodus darken vergleicht die dunkle Leuchtkraft des Quell- und Hintergrundbilds und wählt die dunkelste der beiden aus. Dazu werden für jeden Farbkanal RGB-Werte anstelle der Leuchtdichte (wie es multiply und screen wären) verglichen. Mit darken und lighten werden bei diesem Vergleichsprozess häufig neue Farbwerte erstellt.

.my-element {
  mix-blend-mode: darken;
}

Aufhellen

Die Verwendung von lighten bewirkt genau das Gegenteil von darken.

.my-element {
  mix-blend-mode: lighten;
}

Farbe dodge

Wenn Sie color-dodge verwenden, wird die Hintergrundfarbe aufgehellt, um die Quellfarbe widerzuspiegeln. Rein schwarze Farben haben in diesem Modus keinen Effekt.

.my-element {
  mix-blend-mode: color-dodge;
}

Farblich brennen

Der Mischmodus color-burn ist dem Mischmodus multiply sehr ähnlich, erhöht aber den Kontrast, was zu gesättigten Mitteltönen und weniger Spitzlichtern führt.

.my-element {
  mix-blend-mode: color-burn;
}

Hartes Licht

Die Verwendung von hard-light sorgt für einen lebendigen Kontrast. Dieser Mischmodus blendet entweder die Anzeige ein oder multipliziert die Leuchtdichtewerte. Wenn der Pixelwert heller als 50% Grau ist, wird das Bild aufgehellt, so als ob es gefiltert wäre. Wenn es dunkler ist, wird es multipliziert.

.my-element {
  mix-blend-mode: hard-light;
}

Weiches Licht

Der Mischmodus „soft-light“ ist eine weniger harte Version von „overlay“. Das funktioniert ähnlich wie bei geringerem Kontrast.

.my-element {
  mix-blend-mode: soft-light;
}

Differenz

Die Funktionsweise von difference lässt sich ähnlich wie mit einem Negativ auf Fotos darstellen. Der Mischmodus difference nimmt den Differenzwert der einzelnen Pixel auf und kehrt die Lichtfarben um. Wenn die Farbwerte identisch sind, werden sie zu Schwarz. Differenzen in den Werten werden invertiert.

.my-element {
  mix-blend-mode: difference;
}

Ausschluss

Die Verwendung von exclusion ist difference sehr ähnlich, aber statt Schwarz für identische Pixel wird 50% Grau zurückgegeben, was zu einer weicheren Ausgabe mit weniger Kontrast führt.

.my-element {
  mix-blend-mode: exclusion;
}

Nicht trennbare Mischmodi

Sie können sich diese Mischmodi wie HSL-Farbkomponenten vorstellen. Jede erhält einen bestimmten Komponentenwert aus der aktiven Ebene und vermischt ihn mit anderen Komponentenwerten.

Farbton

Im Mischmodus hue wird der Farbton der Quellfarbe auf die Sättigung und Leuchtkraft der Hintergrundfarbe angewendet.

.my-element {
  mix-blend-mode: hue;
}

Sättigung

Das funktioniert wie hue, aber wenn Sie saturation als Mischmodus verwenden, wird die Sättigung der Quellfarbe auf den Farbton und die Leuchtkraft der Hintergrundfarbe angewendet.

.my-element {
  mix-blend-mode: saturation;
}

Farbe

Im Mischmodus color wird eine Farbe aus dem Farbton und der Sättigung der Quellfarbe und der Leuchtkraft der Hintergrundfarbe erstellt.

.my-element {
  mix-blend-mode: color;
}

Leuchtkraft

Schließlich ist luminosity das Gegenteil von color. Sie erzeugt eine Farbe mit der Leuchtkraft der Ausgangsfarbe und dem Farbton und der Sättigung der Hintergrundfarbe.

.my-element {
  mix-blend-mode: luminosity;
}

Das Attribut isolation

Wenn Sie für das Attribut isolation den Wert isolate festlegen, wird ein neuer Stapelkontext erstellt, der verhindert, dass das Attribut mit einer Hintergrundebene übergeht. Wie Sie im Z-Indexmodul gelernt haben, wird diese Ebene beim Erstellen eines neuen Stapelkontexts zur Basisebene. Das bedeutet, dass Mischmodi auf übergeordneter Ebene nicht mehr angewendet werden. Elemente innerhalb eines Elements, für das isolation: isolate festgelegt ist, können jedoch weiterhin zusammengeführt werden.

Dies funktioniert nicht mit background-blend-mode, da das Hintergrundattribut bereits isoliert ist.

Wissen testen

Testen Sie Ihr Wissen über Mischmodi