Coole Farbeffekte im Web mit dem CSS-Blendmode

Farbeffekte mit CSS Blendmode ganz ohne Photoshop.
Das Artikelbild zeigt Sie Euch ein Bild auf dem der Effekt noch herkömmlich mit Photoshop erzeugt wurde. Aber es geht für das Web auch anders, Ihr könnt mit CSS gleich bzw. ähnliche Effekte erreichen. Ganz ohne Photoshop oder anderer Software.

Wie funktioniert das mit dem CSS Blendmode?

(1.) Sucht Euch das Foto aus welches Ihr in Eure Webseite einbinden wollt.

(2.) Mit HTML-Markup bindet Ihr das Bild als Hintergrundbild in Eure Seite ein. Das macht Ihr zum Beispiel mit einem div HTML Element wie in unserem folgenden Beispiel gezeigt.

<div class="blendmode_image"></div>

Wichtig ist dass Ihr dem div Element eine Klasse vergebt. In unserem Fall nennen wir die Klasse blendmode_image

(3.) Nun folgen in der CSS-Datei die wichtigen Angaben zum stylen des Bildes. Dem div Element geben wir eine Größe. Das Bild selbst wird als Hintergrundbild definiert und es wird eine Effektfarbe, hier habt Ihr freie Wahl, definiert. Zum Schluss kommt der eigentliche Effekt.

.blendmode_image {
max-width: 1440px;
height:960px;
background-image: url('../adresse/zu/eurem/bild.jpg');
background-size: cover;
background-position-x: center;
background-color: #2139ec;
background-blend-mode: difference;
}

Und das war es dann eigentlich auch schon. Es gibt für den Blendmode neben „difference“ aber noch folgende weitere Effekte die Ihr nutzen könnt:

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

(4.) Das ganze sieht nun so aus:

Ist das nicht Klasse? So könnt Ihr mit wenigen Zeilen HTML und CSS Code schnell und einfach Bildeffekte erzeugen.