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

will-it-blend

Neben background-blend-mode zum Mischen von Hintergründen gibt es die Eigenschaft mix-blend-mode, diese 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, wo der Text mit dem Hintergrund verwoben ist.

Zu beachten ist allerdings: Im Gegensatz zu background-blend-mode funktioniert mix-blend-mode nicht im Firefox 30, sondern erst ab Version 32. Im Safari ist es ab 7.1 implementiert. Im Chrome geht es erst, wenn man das entsprechende Flag aktiviert. Hierfür muss man Folgendes in der Adresszeile von Chrome eingeben:
chrome://flags/#enable-experimental-web-platform-features
Danach kann man das entsprechende Häkchen setzen.
Ein kleines Beispiel: 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 Hintergrund zugewiesen, beim p-Element sind Hintergrund- und Textfarbe festgelegt. Außerdem – das ist der entscheidende Punkt – wird über mix-blend-mode festgelegt, wie das Element mit dem Elternelement gemischt werden soll:

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

Es gibt viele weitere Werte für mix-blend-mode neben dem verwendeten hard-light. Es sind dieselben 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 im Chrome mit dem entsprechenden Flag.

Und hier ein Screenshot des Ergebnisses (vergrößerte Ansicht durch Klick auf das Bild).

mix-blend-mode Werte

Kommentare sind geschlossen.