Kategorien
Design HTML/CSS

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

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.

Anzeige

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.

3 Kommentare zu “CSS3-Background-Blends: Überblendungseffekte wie mit Photoshop, aber in purem CSS3”

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.

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

Schreibe einen Kommentar

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