Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 19. August 2014

CSS3-Background-Blends: Überblendungseffekte wie mit Photoshop, aber in purem CSS3

Kein Beitragsbild

Seit CSS3 ist es möglich, mehrere Hintergründe auf ein Element anzuwenden. Dabei werden diese Hintergrundgrafiken oder -farben einfach übereinander gelegt. Sind Transparenzen innerhalb der Hintergründe vorhanden, sorgen sie dafür, dass der darunter liegende Hintergrund hindurchscheint. Mit den neuen CSS3-Überblendungseffekten gibt es nun weitere Möglichkeiten, mehrere Hintergründe miteinander zu kombinieren.

Anzeige

background-blending-mode_collage

Hintergründe anlegen und Effekt auswählen

Zunächst einmal müssen mehrere Hintergründe per „background“-Eigenschaft angelegt werden. Sollen mehrere Hintergrundgrafiken und beziehungsweise oder -farben verwendet werden, werden diese einfach per Komma voneinander getrennt hintereinander aufgelistet. Anschließend gibt man über die Eigenschaft „background-blend-mode“ die Art der Überblendung an.

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: multiplay;
}

background-blending-mode_multiply
Original-Grafiken und per „multiply“ übereinander gelegte Grafiken

Im Beispiel werden zwei JPEG-Dateien als Hintergrundgrafiken verwendet. Da JPEG-Dateien keine Transparenz besitzen, wird ohne Überblendungeffekt nur die erste der beiden angegebenen Dateien angezeigt. Durch die Angabe der Eigenschaft „background-blend-mode“ mit dem Wert „multiply“ werden beide Grafiken miteinander multipliziert.

Überblendungseffekte wie in Photoshop

Neben dem „Multiplizieren“-Effekt gibt es weitere Überblendungseffekte. Sie alle erinnern an die Überblendungseffekte für Ebenen aus Photoshop. Das überrascht nicht, da Adobe an der Entwicklung dieser Effekte für CSS3 mitgewirkt hat. So lassen sich Hintergründe mit den Effekten „Weiches Licht“ („soft-light“) und „Hartes Licht“ („hard-light“), „Abdunkeln“ („darken“) und „Aufhellen“ („lighten“), „Negativ muliplizieren“ („screen“), „Ineinanderkopieren“ („overlay“), „Farbig abwedeln“ („color-dodge“) und „Farbig nachbelichten“ („color-burn“), „Differenz“ („difference“), „Ausschluss“ („esclusion“), „Farbwert“ („hue“), „Farbe“ („color“), „Sättigung“ („saturation“) und „Luminanz“ („luminosity“) anwenden.

Damit sind fast alle Überblendungseffekte aus Photoshop abgedeckt. Wer die CSS3-Effekte mit denen aus Photshop im Einsatz miteinander vergleicht, wird exakte Übereinstimmungen feststellen.

Beim Einsatz von „background-blending-mode“ ist zu beachten, dass der Effekt sich immer auf alle Hintergründe auswirkt.

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: lighten;
}

background-blending-mode_lighten
Original-Grafiken und per „lighten“ übereinander gelegte Grafiken

Im Beispiel wird der „Aufhellen“-Effekt auf beide JPEG-Grafiken angewendet. Dies führt dazu, dass der Hintergrund insgesamt nur weiß ist. Um den Effekt nur auf den ersten definierten Hintergrund anzuwenden, muss angegeben werden, dass der zweite Hintergrund ohne Effekt dargestellt werden soll.

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: lighten, normal;
}

Im zweiten Beispiel wird für jeden der beiden Hintergründe ein eigener Effekt definiert, wobei der Wert „normal“ dafür sorgt, dass kein Überblendungseffekt angewendet wird. Es ist natürlich auch möglich, für jeden Hintergrund einen ganz anderen Effekt anzuwenden.

body {
  background: url("wolken.jpg"), url("burg.jpg"), url("sonstwas.jpg");
  background-blend-mode: lighten, multiply, normal;
}

Der letzte Hintergrund sollte jedoch immer auf „normal“ gesetzt sein, da kein weitere Hintergrund folgt, auf den der Überblendungseffekt dafür angewendet werden könnte. Für einfache Hintergründe ist es in der Regel nicht nötig, die Überblendungseffekte per CSS3 zu definieren, da sie sinnvoller direkt in Photoshop angelegt und die Grafiken entsprechend exportiert werden. Aber für animierte Übergänge („transition“-Eigenschaft) können damit schöne Effekte erzielt werden.

Ob nur Hintergrundgrafiken oder auch -farben verwendet werden, spielt keine Rolle. Jeder definierte Hintergrund wird als eine Ebene betrachtet, auf der ein Effekt angewendet wird. Auch CSS3-Verläufe werden berücksichtigt.

body {
  background: url("wolken.jpg"), red;
  background-blend-mode: lighten, normal;
}

Browserunterstützung

Derzeit unterstützen Chrome ab Version 35, Firefox ab Version 30 und Opera ab Version 22 die Eigenschaft „background-blend-mode“. Dies sind die derzeit aktuellen Versionen der drei Browser. Für Safari ist eine Unterstützung ab Version 8 angekündigt.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare

  1. Mhm, sehe aber keinen großen Mehrwert darin!

  2. Achtung, Fehlerteufel im ersten Code-Beispiel: „multiplay“ anstatt „multiply“. ;)

    @ati: Geb dir recht, IE wird wie immer unseren Fortschritt wahrscheinlich für längere Zeit hemmen (obwohl seit Jahrzehnten versprochen wird, dass mit der nächsten Version alles besser wird).

  3. Nett, gut zu wissen, aber in Anbetracht der Browser-Unterstützung z.Zt. sinnlos. Vielleicht wird es de IE 23 unterstützen und der IE 38 richtig darstellen. Bis dahin lasse ich, so interessant ich das auch finde, lieber die Finger davon.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.