Überblenden wie in der Bildbearbeitung
In Bildbearbeitungsprogrammen wie Photoshop ist das Überblenden von Ebenen ein bewährter Effekt seit Generationen: Zwei Fotos in Ebenen übereinander vermischen sich: Das obere Foto oder die Schrift über dem Foto wird teilweise semitransparent. Die Berechnung kombiniert die Farben miteinander und lässt die untere Ebene durchscheinen.
Neben einem einfachen Effekt trennt das Überblenden die oben liegende Schrift besser vom Hintergrund. Für das Webdesign bringt die Überblendung eine besser Trennung von Schrift über Hintergrundbildern, vor allem, wenn Farbe und Helligkeit des Hintergrundbilds beim Design nicht bekannt sind. mix-blend-mode mischt nicht nur die Farben von Schrift und dahinter liegendem Bild, sondern auch die Farben übereinander liegender Bilder oder Grafiken.
.herb {
mix-blend-mode: normal;
position: absolute;
font-size: clamp(1.2rem, -0.875rem + 8.333vw, 4rem);
}
Mathematik für Farbkanäle
Das Überblenden der Farben operiert teilweise auf den Farbkanälen der Farben (bei 8-Bit-Farben auf Werten zwischen 0 und 255) und es ist kaum möglich, den Effekt ohne Erfahrung in der Farbtheorie vorauszusagen. Kurz gesagt: Muss man ausprobieren.
- normal
- Normal – Voreinstellung
- multiply
- Multipliziert bei jedem Farbkanal den Kanalwert der oberen Farbe mit dem Kanalwert der darunter liegenden Farbe und teilt das Ergebnis durch den Höchstwert für 8-Bit-Pixel. Das Ergebnis ist niemals heller als das Original.
- screen
- Die Kanalwerte der übereinander liegenden Farben werden je nach Helligkeit der Untergrundfarbe multipliziert bzw. negativ multipliziert. Wirkt additiv (Lichtermischung wie bei Farbstrahlern).
- overlay
- Multipliziert die Farben, aber erhält dabei Lichter und dunklen Töne der Untergrundfarbe. Erzeugt den Eindruck, als wäre die obere Ebene aus farbigem Glas.
- darken
- Abdunkeln: Nimmt den niedrigen (dunkleren) Wert aus Quellfarben-Kanal und Untergrund-Kanalwert.
- lighten
- Aufhellen: Nimmt den höheren (helleren) Wert aus Quellfarben-Kanal und Untergrundfarben-Kanalwert.
- color-dodge
- Nimmt die Werte jedes Farbkanals und hellt die obere Farbe auf. Je dunkler der obere Farbton, desto geringer die Wirkung.
- color-burn
- Nimmt die Werte jedes Farbkanals und dunkelt die obere Farbe ab. Je heller der obere Farbton, desto geringer die Wirkung.
- hard-light
- Die Kanalwerte der Eingabefarben werden je nach der ursprünglichen Quellfarbe multipliziert oder negativ multipliziert.
- soft-light
- Verdunkelt die Farbkanalwerte der Hinterfarbe oder hellt sie auf, je nach Farbton der oberen Farbe.
- difference
- Zieht bei jedem Farbkanal entweder den dunkleren vom helleren des oberen Tons ab oder den helleren vom dunkleren Wert des unteren Tons ab, je nachdem, wer den jeweils helleren Wert hat. Helle Farbtöne auf der oberen Ebene werden invertiert, je dunkler der Ton oben, desto unsichtbarer.
- exclusion
- Wenn die Quellfarbe Weiß ist, ist die Ergebnisfarbe die Komplementärfarbe der Untergrundfarbe. Wenn die Quellfarbe Schwarz ist, ist die Untergrundfarbe die Ergebnisfarbe.
- hue
- Dem Farbton der oberen Farbe wird die Luminanz und Sättigung der Untergrundfarbe zugewiesen.
- saturation
- Dem Farbton der oberen Farbe wird die Luminanz und Farbe der Untergrundfarbe zugewiesen.
- color
- Dem Farbton der oberen Farbe wird die Luminanz der Untergrundfarbe zugewiesen.
- luminosity
- Dem Farbton der oberen Farbe werden Farbton und die Sättigung der unteren Farbe zugewiesen, die Luminanz der oberen Farbe bleibt erhalten. Gegenstück zu color.
background-blend-mode
Macht im Grunde genommen dasselbe wie mix-blend-mode, nur eben über einem Hintergrundbild. Mehrere Hintergrundbilder übereinander werden ebenfalls miteinander verrechnet wie Schrift über Hintergrundbildern.
Da Verläufe ebenfalls der CSS-Eigenschaft background-image und mehrere Hintergrundbilder übereinander schon lange kein Thema mehr sind, erzielt background-blend-mode Farbeffekte aus der Kombination von Bildern, Verläufen und Schrift.
.background-blend {
background-image: url(img/monaccofish.webp),
linear-gradient(to bottom, khaki, black);
background-size:cover;
background-blend-mode: difference;
}
Auch hier sind Vorhersagen, wie die Überblendung wirkt, ein Blick in die Glaskugel. Auf jeden Fall übertrifft der eine oder andere Effekt die einfachen Overlays mit einer Farbe oder einem semitransparenten weiß oder schwarz.
