kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Blend Modes (Blendmodi)

CSS Blend Modes

Die Blendmodi (auch Mischmodi) aus Photoshop sind weitestgehend bekannt und erfreuen sich u. a. bei der Erstellung fotografischer Effekte größter Beliebtheit. Instagram und Hipstamatic lassen grüßen. Mit CSS Blend Modes können diese Effekte auch im Web realisiert werden. Nach verschiedenen Regeln werden Hintergrundgrafiken miteinander verrechnet. Wir schauen uns in diesem Beitrag die Eigenschaften background-blend-mode und mix-blend-mode an.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

Funktionsweise

Das Prinzip ist denkbar einfach. Mehrere HTML-Elemente oder CSS-Hintergründe werden entsprechend des gewählten Blendmodus miteinander verrechnet. Dabei wird die Eigenschaft background-blend-mode verwendet, wenn verschiedene Hintergrundgrafiken in ein und demselben Element (multiple backgrounds) angesprochen werden sollen.
Wenn hingegen mehrere Elemente miteinander verrechnet werden sollen, z.B. ein <div> mit der Hintergrundfarbe des <body>, wird die Eigenschaft mix-blend-mode verwendet.

Liste der Blend Modes

In großen Teilen sind die CSS Blend Modes identisch mit denen in Photoshop; das Bildbearbeitungsprogramm bietet allerdings noch einige Effekte mehr an. Vergleicht man das visuelle Ergebnis von Photoshop und CSS ist nahezu kein Unterschied zu erkennen.
Folgende Blendmodi sind in CSS verfügbar. Die Liste zeigt jeweils den Effekt bei der Mischung des Bildes mit einem einfarbigen gelben Hintergrund.

Blendmodus normal (Normal)
Blendmodus normal (Normal)
Blendmodus darken (Abdunkeln)
Blendmodus darken (Abdunkeln)
Blendmodus multiply (Multiplizieren)
Blendmodus multiply (Multiplizieren)
Blendmodus color-burn (Farbig nachbelichten)
Blendmodus color-burn (Farbig nachbelichten)
Blendmodus lighten (Aufhellen)
Blendmodus lighten (Aufhellen)
Blendmodus screen (negativ multiplizieren)
Blendmodus screen (negativ multiplizieren)
farbig-abwedeln
Blendmodus color-dodge (farbig abwedeln)
Blendmodus overlay (Ineinanderkopieren)
Blendmodus overlay (Ineinanderkopieren)
Blendmodus soft-light (weiches Licht)
Blendmodus soft-light (weiches Licht)
Blendmodus hard-light (hartes Licht)
Blendmodus hard-light (hartes Licht)
Blendmodus difference (Differenz)
Blendmodus difference (Differenz)
Blendmodus exclusion (Ausschluss)
Blendmodus exclusion (Ausschluss)
Blendmodus hue (Farbton)
Blendmodus hue (Farbton)
Blendmodus saturation (Sättigung)
Blendmodus saturation (Sättigung)
Blendmodus color (Farbe)
Blendmodus color (Farbe)
Blendmodus luminosity (Luminanz)
Blendmodus luminosity (Luminanz)

Beispiel: Text überblenden

<h1>Headline</h1>
h1 {
  font-size: 200px;
  position: relative;
  color:cyan;
}

h1::after {
  content:'Headline';
  position: absolute;
  top:0;
  left:0;
  color:red;
  left:10px;
  mix-blend-mode:multiply;
}

Beispiel anschauen

Beispiel: Bild in Farbe überblenden

Das folgende Beispiel verwendet einen <div> mit zwei Hintergründen. Mehrere Hintergründe stellen dank der CSS3-Eigenschaft »Multiple Backgrounds« kein Problem dar. Der erste Hintergrund ist das Bild des Ammoniten, der zweite Hintergrund ist einfarbig orange.
Die CSS-Eigenschaft für den Blendmodus nennt sich background-blend-mode: BLENDMODUS. Für Webkit Nightly muss zum Veröffentlichungszeitpunkt dieses Beitrags noch ein Vendor-Prefix geschrieben werden. Da unser Beispiel zwei Hintergründe ineinander überblendet, schreiben wir innerhalb von background-blend-mode auch zwei Blendmodi mit Komma getrennt nacheinander. Der erste Blendmodus gilt dann für das Bild des Ammoniten, der zweite Blendmodus bezieht sich auf die Hintergrundfarbe.

Demo anzeigen


div {
  padding:10px;
  height:300px;
  width:400px;
  background: url(ammonit.jpg) 50% 50% no-repeat, orange; /* multiple backgrounds */
  -webkit-background-blend-mode: difference, normal; /* blend mode bg1, bg2 */
  background-blend-mode: difference, normal; 
}

Beispiel: Bild in Bild überblenden

Das Beispiel lässt sich mit einer zweiten Grafik anstelle der Hintergrundfarbe deutlich interessanter gestalten. Die Kombination zweier Grafiken im Modus »Differenz« führt zu folgendem Ergebnis.

Zwei Grafiken im Modus Differenz
Zwei Grafiken im Modus Differenz

Demo anzeigen

Beispiel: Div in Hintergrund überblenden

Das dritte Beispiel verrechnet zwei unterschiedliche HTML-Elemente miteinander. Dazu wird die CSS-Eigenschaft mix-blend-mode verwendet. Per Mouse-Over ändern sich der Blendmodus und die Größe des Elements.


body {
  background:url(pattern.jpg); 
}

div {
  height:200px;
  width:200px;
  background: yellow;
  -webkit-transition:all 1s ease-in-out;
     -moz-transition:all 1s ease-in-out;
          transition:all 1s ease-in-out;
  
   -webkit-mix-blend-mode: color;
           mix-blend-mode: color; 
}

div:hover {
  height:400px;
  width:400px;
  -webkit-mix-blend-mode: exclusion;
          mix-blend-mode: exclusion;
}

Demo anzeigen

Browsersupport

Den jeweils aktuellen Browsersupport entnehmt ihr bitte dieser Website oder dieser Feature-Tabelle.

Links / Quellen

CSS Blend Modes could be the next big thing in Web Design
Interessanter Beitrag zum Thema CSS Blend Modes inkl. verschiedener Beispiele und möglicher Zukunftsaussichten
CSS Background Blend Modes are now available in Chrome Canary and WebKit Nightly
Einführungsartikel von Adobe inkl. verschiedener Beispiele.
Blend Modes
Übersichtsseite auf html.adobe.com zum Thema Blend Modes.
Compositing and Blending Level 1
W3C-Spezifikation zum Thema Blend Modes.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

13 Kommentare

  1. Andre

    Verfasst am 9. Januar 2014 um 9:14 Uhr.

    Sehr schöner Artikel!

    Das wäre ja ein Träumchen, wenn das zukünftig in allen Browsern unterstützt würde. Dann sind die Zeiten vorbei, in denen die Layouter mit ihren Halbtransparenten und Blendmodi die Umsetzer zur Verzweiflung treiben.

    • Dennis

      Verfasst am 11. Januar 2014 um 17:06 Uhr.

      Nervig, wenn es ständig dinge gibt, die keiner braucht. Es ist ratsam derartige Dinge einfach wegzulassen und wich auf das wesentliche zu konzentrieren. ich sehe schon zig Seiten die so was nur nutzen, weil es das gibt. völlig überflüssig.

      • Mo

        Verfasst am 31. Januar 2014 um 10:41 Uhr.

        Aber das wesentliche funktioniert doch schon, warum also nicht Funktionen einbauen, die wir seit Jahren mit Workarounds und Tricks lösen..?

  2. Martin

    Verfasst am 26. Februar 2014 um 13:36 Uhr.

    Schöne Spielerei. Das Beispiel ist allerdings wenig sinnvoll.

    Ein besseres Beispiel wäre ein fotografiertes Objekt mit weißem Hintergrund inkl. natürlichem Schatten. Hier hätte man die Möglichkeit über Multiplizieren den Hintergrund der Webseite, wenn es ein Muster, also keine reine Farbe ist, durchscheinen zu lassen. Das wäre schon sehr praktisch.

    Eine andere Frage die sich mir stellt ist die Performance. Kürzlich wurde gemutmaßt das es CSS-Regions nicht geben wird, weil es zu viele Zeilen Code in der Engine der Browser einnehmen würde. Ich kann mir vorstellen das es sich bei diesen Überblendeffekten ähnlich verhalten könnte.

  3. René

    Verfasst am 9. Juli 2016 um 11:40 Uhr.

    Vielen Dank für diesen wirklich guten Beitrag. Leider führen alle diese neuen Möglichkeiten in ein Desaster der Browserweichenstellerei, da ja nicht alle Browser dieses Feature unterstützen. Für den neuen IE, den Edge, aber auch für den IE11 geht das mit diesen blend-modes nicht. Kurz, sie können nichts damit anfangen und zeigen darum rein gar nichts an. Für mich, als Webdesigner machen solche Sachen, eben Dinge, die nicht von allen Browsern unterstützt werden null Sinn und darum lasse ich sie weg. Wirklich schade, aber ich gehe nicht mehr in die Zeit zurück, in der wir für jeden Browser eine Website bauen mussten damit alle User das Gleiche ansehen durften. Microsoft hat bekannt gegeben, dass sie das blend-mode Zeugs in die Liste aufgenommen haben, jedoch weiss niemand wann dass der Fall sein wird. Trotzdem, vielen Dank, denn der Beitrag verdeutlicht die wunderschönen Möglichkeiten von CSS3 sehr gut. Gruss René

  4. René

    Verfasst am 10. Juli 2016 um 13:41 Uhr.

    Besten Dank für Deine Antwort und ja klar, ich weiss, dass man Abstriche machen muss gegeben durch die verschiedenen Browser, das war immer so und wird immer so bleiben. Aber was soll ich riesige Techniken anwenden, wenn sie ja gar nicht unterstützt werden, ich manöfriere mich da ja selbst in unendlich viel Arbeit herein. Einen CSS-Neuaufbau will man gerade dann nicht machen, wenn man das Rad nicht neu erfinden will, zum Beispiel bei Bootstrap. Hinzukommt, dass man heute mit CMS arbeitet, für die endlos gute Templates bereitgestellt werden, gerade da wird der Aufwand immens, wenn man diese auf die verschiedenen Browser anpassen will. Ich mache das immer so, ich schaue was wird von wem unterstützt und an Hand von diesen Resultaten entwickle ich oder passe an. Für mich ist es ganz einfach und auch das war schon immer so und wird so bleiben, „weniger ist immer mehr“. Die „Wow-Effekte“ sind zeitlich immer begrenzt, also lasse ich das… Gruss René

  5. René

    Verfasst am 10. Juli 2016 um 13:46 Uhr.

    Sorry habe vergessen, Dein Vorschlag mit diesem Progressive Enhancement-Prinzip zeigt genau das, was ich ja bemängle, denn da steht wenn man das ganze durchgeht:

    Vorteile des Prinzips „Graceful Degradation“

    Entspricht unserer Gewohnheit
    Moderne Systeme werden voll ausgereizt. Neuste Technologien können eingesetzt werden

    Nachteile des Prinzips „Graceful Degradation“

    Schwache Systeme werden oft nicht oder nur schlecht berücksichtigt
    Performance-Probleme: Schwache Systeme können überlastet werden
    Informationen sind nicht für alle Menschen gleich zugänglich, wenn schwache Systeme und/oder kleine Displays bestraft werden. Das widerspricht der Grundidee des Internet.
    Schwierige Erweiterung der Website. Änderungen müssen in allen schwächeren Systemen getestet und ggf. nachgerüstet werden

    Die Nachteile sind extrem, damit kann ich nicht leben. Hab mich aber nicht vertieft genug damit auseinander gesetzt. So jetzt hab ichs.

    • Jonas Hellwig

      Verfasst am 10. Juli 2016 um 14:07 Uhr.

      Hallo René, du zitierst jetzt »Graceful Degradation«. Ich habe von Progressive Enhancement gesprochen. Das ist fast das Gegenteil. Wir haben in zahlreichen Projekten Filter-Effekte eingesetzt und die Fallback-Lösungen für inkompatible Browser sind absolut in Ordnung.

  6. René

    Verfasst am 10. Juli 2016 um 14:16 Uhr.

    Ja genau, habe ich zitiert, weil Du dort einen Link hast (Einen detaillierten Beitrag zu diesem Thema findet ihr hier.) und dann man bei diesen Info‘ s landet, die ich oben reinkopiert habe.. Egal wie dem auch sei, weniger ist mehr. Gruss René

    • Jonas Hellwig

      Verfasst am 10. Juli 2016 um 14:35 Uhr.

      Sorry René – aber ich habe auf den Beitrag verlinkt und konkret von »Progressive Enhancement« gesprochen. Im verlinkten Beitrag zitierst du aber aus dem Abschnitt »Graceful Degradation«. Das ist ja genau das Gegenteil von dem was ich meine und führt zu Problemen – wie im Beitrag ja auch beschrieben :)

  7. René

    Verfasst am 10. Juli 2016 um 14:26 Uhr.

    Weisst Du was, ich habe ein eispiel: Ohne Werbung zu machen, kannst es ja löschen, dieses Template http://ja-mono.demo.joomlart.com/index.php/en/ verwendet diese blende-modes Geschichte. Mach da mal in nützlicher Zeit eine Lösung rein, dass alle Browser, vorallem der Edge und IE11 (beide unterstützen kein blend-mode) etwas ähnliches zeigen, wie im Firefox oder so. Ich denke, jetzt habe ich mich sicher gut zu erkennen gegeben, es sei denn, Du hast eine Lösung, die nicht länger dauert, als 2 Stunden. Übrigens, ich nimm das alles mit Hummor und Spass, also es gibt grössere Probleme in dieser Welt, verstehe mich richtig… Gruss René

    • Jonas Hellwig

      Verfasst am 10. Juli 2016 um 14:39 Uhr.

      Ich habe mir das Beispiel jetzt nicht im IE angeschaut. Aber wenn dort nur die Filter fehlen, ansonsten aber keine Fehler o.ä. entstehen – dann ist doch alles gut. Wenn Fehler auftreten ist es schlecht gemacht. >> http://goo.gl/6xDV0L

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.