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!

opacity:

0.33;

color:

  #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!

mix-blend-mode:

overlay;

color:

  #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!

mix-blend-mode:

multiply;

color:

  #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!

mix-blend-mode:

screen;

color:

  #6495ed

Bei screen ergibt sich mit weiß immer wieder weiß, daher sollte bei diesem Modus eine andere Farbe gewählt werden.

Abdunkeln — darken

FAST!

mix-blend-mode:

darken;

color:

  #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!

mix-blend-mode:

lighten;

color:

  #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!

mix-blend-mode:

color-dodge;

color:

  #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!

mix-blend-mode:

color-burn;

color:

  #1994ff

Dieser ebenfalls aus der Fotoentwicklung stammende Begriff funktioniert wie ein "Verstärker" und dunkelt den Hintergrund ab.

Hartes Licht — hard-light

FAST!

mix-blend-mode:

hard-light;

color:

  #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!

mix-blend-mode:

soft-light;

color:

  #1994ff

Die gleiche Farbe wirkt bei soft-light entsprechend "weicher" auf den Hintergrund ein.

Differenz — difference

FAST!

mix-blend-mode:

difference;

color:

  #fff

Die Differenz der Tonwerte der beiden Objekte: Ein weißer Vordergrund invertiert bei difference somit den Hintergrund.

Ausschluss — exclusion

FAST!

mix-blend-mode:

exclusion;

color:

  #f44336

Ein weißer Auftrag würde bei exclusion ebenfalls invertieren, mittlere Werte vermindern den Kontrast.

Farbton — hue

FAST!

mix-blend-mode:

hue;

color:

  #fff

Ein farbloses Objekt — egal welcher Wert, hauptsache grau — mit hue entzieht quasi dem Hintergrund seine Farbe.

Sättigung — saturation

FAST!

mix-blend-mode:

saturation;

color:

  #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!

mix-blend-mode:

color;

color:

  #03ff00

Bei color werden Farbton und Sättigung des Vordergrunds mit der Helligkeit des Hintergrunds gemischt. 

Luminanz — luminosity

FAST!

mix-blend-mode:

luminosity;

color:

  #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. 

Wir verwenden Cookies, um Ihnen den bestmöglichen Service zu gewährleisten. Wenn Sie auf der Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu.

×ausblenden