Effektvolle Überlagerung
Mit background- bzw. mix-blend-mode sind in modernen Browsern aussergewöhnliche Effekte für Bilder und Schrift eingezogen.
zuerst erschienen am 22. Juli 2020
In Grafikprogrammen wie Adobe Photoshop existieren die sog. "blend modes" — oder auch Mischmodi — schon seit Jahrzehnten. Dabei werden Objekte nicht nur einfach übereinander gelegt, sondern deren Farben je nach gewähltem Mischmodus miteinander kombiniert. Häufig wird auch nur ein Objekt mit einer Hintergrundfarbe gemischt.
Sehr bekannt ist der Effekt durch Andy Warhols berühmte Serie mit einem Portraitfoto von Marilyn Monroe, die er 1962 kurz nach dem Tod der Schauspielerin mit dem "Marilyn Diptych" begann. Das Original ist heute in der Tate Gallery of Modern Art in London zu bewundern.
Mittlerweile können auch moderne Browser derartige Effekte darstellen, ohne dass man auf entsprechend vorbearbeitete Bilder zurückgreifen muss, was vor allem für sog. "hover"-Effekte beim Überfahren mit dem Mauszeiger eine sehr viel elegantere Lösung darstellt.
Laut caniuse.com werden die CSS-Eigenschaften mix-blend-mode sowie background-blend-mode bei über 90% der Nutzer korrekt dargestellt — aussen vor ist mal wieder der Internet Explorer (falls Sie damit unterwegs sind, werden Sie im Folgenden entsprechend keine Effekte sehen).
Für 90% der Besucher lohnt der Aufwand durchaus, man sollte aber prüfen, ob die Elemente auch bei Deaktivieren der Effekte noch sicht- bzw. lesbar sind. Dazu nutzen Sie am besten den Entwicklermodus Ihres Browsers.
Vor diesen neuen CSS-Eigenschaften war die Deckkraft (opacity) die einzige Möglichkeit, einen Hintergrund durch ein darüber positioniertes Element "durchscheinen" zu lassen:
FAST!
0.33;
#fff
Hier hat der Text nur ⅓ Deckkraft, entsprechend "blass" ist die Darstellung. Natürlich kann man die Deckkraft erhöhen, aber entsprechend weniger scheint vom Hintergrund durch.
Unser Favorit: Ineinanderkopieren — overlay
Im Vergleich fällt der Mischmodus overlay viel kraftvoller ins Auge. Er ist unser persönlicher Favorit:
FAST!
overlay;
#fff
Ein overlay ist vereinfacht ausgedrückt ein Mix aus multiply — bei Hintergrund dunkler als 50% Grau — und screen.
Insgesamt stehen neben normal, was "keine Vermischung" bedeutet, 15 unterschiedliche Modi zur Auswahl. Hier alle weiteren mix-blend-mode Werte im Beispiel:
Multiplizieren — multiply
FAST!
multiply;
#6495ed
Multiplizieren mit weißen Elementen ist so ähnlich wie eine beliebige Zahl mit 1 zu multiplizieren, der Text hier würde quasi "unsichtbar", da er exakt die Farbe des Hintergrunds erhalten würde.
Negativ Multiplizieren — screen
FAST!
screen;
#6495ed
Bei screen ergibt sich mit weiß immer wieder weiß, daher sollte bei diesem Modus eine andere Farbe gewählt werden.
Abdunkeln — darken
FAST!
darken;
#00fff4
Weiß kann schlecht Abdunkeln und dieser Modus ist eher auf hellem Hintergrund sinnvoll, denn darken übernimmt für jedes Pixel den jeweils dunkleren Wert.
Aufhellen — lighten
FAST!
lighten;
#f00
Fürs Aufhellen ist 100% Weiß hingegen "zu stark", ggf. muss man einfach in den Entwicklertools ein wenig nach der richtigen Farbe suchen. Als Gegenteil von darken übernimmt lighten den jeweils helleren Pixel der übereinanderliegenden Objekte.
Farbig Abwedeln — color-dodge
FAST!
color-dodge;
#005fb2
Beim farbigen Abwedeln — einem aus der Fotoentwicklung entlehnten Begriff — ist ebenfalls die passende Farbwahl entscheidend. Das mit color-dodge aufliegende Objekt schützt quasi den Hintergrund vor Belichtung.
Farbig Nachbelichten — color-burn
FAST!
color-burn;
#1994ff
Dieser ebenfalls aus der Fotoentwicklung stammende Begriff funktioniert wie ein "Verstärker" und dunkelt den Hintergrund ab.
Hartes Licht — hard-light
FAST!
hard-light;
#1994ff
Bei hard-light wirkt alles, was heller als 50% Grau ist, aufhellend auf den Hintergrund, alles dunklere hingegen abdunkelnd.
Weiches Licht — soft-light
FAST!
soft-light;
#1994ff
Die gleiche Farbe wirkt bei soft-light entsprechend "weicher" auf den Hintergrund ein.
Differenz — difference
FAST!
difference;
#fff
Die Differenz der Tonwerte der beiden Objekte: Ein weißer Vordergrund invertiert bei difference somit den Hintergrund.
Ausschluss — exclusion
FAST!
exclusion;
#f44336
Ein weißer Auftrag würde bei exclusion ebenfalls invertieren, mittlere Werte vermindern den Kontrast.
Farbton — hue
FAST!
hue;
#fff
Ein farbloses Objekt — egal welcher Wert, hauptsache grau — mit hue entzieht quasi dem Hintergrund seine Farbe.
Sättigung — saturation
FAST!
saturation;
#f00
Die mit saturation aufgelegte Schrift verstärkt die Sättigung, dabei kommt es nur auf die Sättigung der Schriftfarbe an, nicht auf deren Farbwert.
Farbe — color
FAST!
color;
#03ff00
Bei color werden Farbton und Sättigung des Vordergrunds mit der Helligkeit des Hintergrunds gemischt.
Luminanz — luminosity
FAST!
luminosity;
#f00
Bei luminosity kommt es nur auf die Luminanz des überlagernden Objekts an.
Fazit zum mix-blend-mode
Wie man an den Beispielen sehen kann, ergeben nicht alle Mischmodi in jedem Fall einen schönen Effekt — man muss ein wenig ausprobieren. Mit ein wenig Geduld aber lassen sich bislang im Web nur selten gesehene Eindrücke erwecken.
Bewegt sich das Bild hinter einem mit mix-blend-mode überlagerten Text, so kommen die Effekte noch stärker zur Geltung — etwa wenn man statt nur einem Bild eine Slideshow verwendet.