Florence Maurice

Webthemen

mix-blend-mode für schöne Texteffekte - Bilder und Text mischen (CSS3)

Geschrieben am:

will it blend

mix-blend-mode kann man für Texteffekte nutzen, bei denen der Text mit dem Hintergrund verwoben ist.

Neben background-blend-mode zum Mischen von Hintergründen existiert in CSS3 die Eigenschaft mix-blend-mode. Diese Eigenschaft dient nicht zum Mischen von Hintergründen, sondern zum Vermischen von Eltern- und Kindelementen. So kann man beispielsweise mix-blend-mode für Texteffekte nutzen, bei denen der Text mit dem Hintergrund verwoben ist.

Vorweg die Browserunterstützung: mix-blend-mode funktioniert in Firefox ab Version 32. Im Safari ist es ab 7.1 implementiert, in Chrome ab Version 41.

Sehen wir uns ein Beispiel an: Im HTML-Code gibt es ein div-Element, in dem sich ein p-Element befindet:

<div><p></p></div>

Dem div-Element wird ein Muster als Hintergrundbild zugewiesen, beim p-Element sind Hintergrundfarbe und Textfarbe festgelegt. Außerdem - das ist der entscheidende Punkt - wird über mix-blend-mode beim p-Element (Kindelement) festgelegt, wie das Element mit dem Elternelement (div) gemischt werden soll. Gewählt wird hier mix-blend-mode: hard-light;

div { 
background: url(pattern_131.gif);
}
p {
background: rgba(0, 255, 51, 1);
color: rgba(25, 34, 248, 0.7);
mix-blend-mode: hard-light;
}

Das Ergebnis:

mix-blend-mode hard-light

Im Beispiel wird mix-blend-mode: hard-light; benutzt. Es gibt viele weitere Werte für mix-blend-mode neben dem verwendeten hard-light. Es sind dieselben Werte möglich wie auch bei background-blend-mode, nämlich:

multiply | screen | overlay | darken | 
lighten | color-dodge | color-burn |
hard-light | soft-light | difference |
exclusion | hue | saturation | color | luminosity

Ein kleines Beispiel für die verschiedenen Werte von mix-blend-mode zum Online Ausprobieren - wie gesagt funktioniert es in Firefox ab 32, Safari ab 7.1 oder in Chrome ab 41.

Und hier ein Screenshot des Ergebnisses.

mix-blend-mode Werte