Bennett Feely leistet gute Arbeit darin, die Herrlichkeit der CSS-Blend-Modi zu zeigen. Es gibt viele designorientierte Effekte, die wir von statischen Designs kennen (dank Photoshop), die wir im Web mit dynamischen Inhalten noch nicht so häufig sehen. Aber das wird sich ändern, da die CSS-Blend-Modi mehr Unterstützung erhalten. Ich möchte die verschiedenen Arten betrachten, dies zu tun, da es nicht ganz eindeutig ist.

CSS Mehrere Hintergrund-Blend-Modi

Sie können `background-image`s miteinander vermischen oder sie mit Hintergrundfarben mischen. Es ist so einfach wie

.blended {
  background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

Siehe den Stift Hintergrund-Blending von Chris Coyier (@chriscoyier) auf CodePen.

Multiplizieren ist eine schöne und nützliche Option, aber es gibt auch: `screen`, `overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`, `hue`, `saturation`, `color` und `luminosity`. Und auch `normal`, was es zurücksetzt.

Adobe (das an dem Standard für diese Dinge arbeitet)hat diesen Stift erstellt, um mit den verschiedenen Möglichkeiten hier zu spielen. Update: Sie haben diesen Stift entfernt, haben aber immer noch diese Erklärungsseite.

Ein einzelnes Element kann mehr als einen Hintergrund haben, übereinander gestapelt. Wie

.graphic-or-whatever {
  background:
    url(grid.png),
    url(building.jpg)
}

Diese können auch einfach durch Hinzufügen von `background-blend-mode` gemischt werden.

Siehe den Stift Mehrere Hintergrund-Blending von Chris Coyier (@chriscoyier) auf CodePen.

Hier ist ein cooles und praktisches Beispiel von Bennett Feely

Siehe den Stift rxoAc von Bennett Feely (@bennettfeely) auf CodePen.

Hier ist ein weiteres, das geschickt ein Farbbild wiedergibt, das in Cyan / Magenta / Gelb / Schwarz (CMYK) getrennt ist. Sie wissen, dass dies der Funktionsweise des Offsetdrucks in der Druckerei entspricht, richtig? =)

Siehe den Stift CMY/CMYK-Farbdruck mit background-blend-mode von Bennett Feely (@bennettfeely) auf CodePen.

Beliebige HTML-Elemente Blend-Modi

Das Vermischen von Hintergründen ist ziemlich cool, aber persönlich bin ich davon weniger begeistert als vom Vermischen beliebiger HTML-Elemente. Zum Beispiel ein `

`-Titel über einem Hintergrund. Oder sogar Text über Text.

Das sah ich neulich am Flughafen und habe ein Foto gemacht, weil ich es schön fand und dachte, ich könnte herausfinden, wie man das im Web macht

Bei meinem ersten Versuch, es nachzubilden, habe ich Deckkraft verwendet. Aber Deckkraft trübt die Farben wirklich und lässt die überlappenden Stellen nicht die zusätzliche Dunkelheit aufweisen, die sie haben sollten. CJ Gammon hat mir gezeigt, dass es dafür eine Blend-Eigenschaft gibt: `mix-blend-mode`.

Um dies zu reproduzieren

<h1>hungry?</h1>

Dann in ``-Elemente mit Lettering.js aufteilen

$("h1").lettering();

Dann die Buchstaben mit negativem Buchstabenabstand zusammenschieben, `mix-blend-mode` einstellen und einfärben

h1 {
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: -1.25rem;
}
h1 span {
  mix-blend-mode: multiply;
}
h1 span:nth-child(1) {
  color: rgba(#AB1795, 0.75);
}
/* etc, on coloring */

Vergleichen

Siehe den Stift Überlappende Buchstaben von Chris Coyier (@chriscoyier) auf CodePen.

Wie ich bereits erwähnt habe, ist echter Webtext über einem Bild meiner Meinung nach ein ziemlich cooler Anwendungsfall

Siehe den Stift GxlBm von Chris Coyier (@chriscoyier) auf CodePen.

Canvas Blend-Modi

Die DOM-Blend-Modus-Sachen sind für mich am interessantesten, aber es sollte beachtet werden, dass `` ebenfalls Blend-Modi hat und diese eine etwas tiefere Unterstützung bieten (siehe unten für all das).

Sie setzen ihn auf den Canvas-Kontext. Also so

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'multiply';

Dieser Wert kann einer der oben genannten sein. Hier ist eine einfache Demo

Siehe den Stift Canvas Blend-Modi von Chris Coyier (@chriscoyier) auf CodePen.

Und ein schickes Beispiel, bei dem man sehen kann, wie die Mischung der Demo Leben verleiht

Siehe den Stift sketch.js Demo von Justin Windle (@soulwire) auf CodePen.

SVG Blend-Modi

Wie Sie vielleicht vermuten, hat SVG seinen eigenen Mechanismus dafür. Eine Möglichkeit, dies zu tun, besteht darin, es innerhalb von `

<svg>
  
  <defs>
    
    <filter id="f1" x="0" y="0" width="1" height="1">
      <feImage xlink:href="#p1" result="p1"/>
      <feImage xlink:href="#p2" result="p2"/>
      <feBlend mode="multiply" in="p1" in2="p2" />
    </filter>
    
    <path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
    <path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
    
  </defs>
  
  <rect width="100%" height="100%" filter="url(#f1)"/>
  
</svg>

Siehe den Stift Fnvdp von Chris Coyier (@chriscoyier) auf CodePen.

Und ein komplexeres Beispiel.

Die gute Nachricht ist, dass `mix-blend-mode` auch für Inline-SVG funktioniert. Wenn Sie also SVG auf diese Weise verwenden, können Sie die Formen selbst mit Klassen oder was auch immer ansprechen und ihnen den gewünschten Blend-Modus geben.

Hier ist ein Beispiel von Bennet, das genau das tut

Siehe den Stift KDkCj von Bennett Feely (@bennettfeely) auf CodePen.

Browser-Unterstützung

Für Canvas: Firefox 20+, Chrome 30+, Safari 6.1+, Opera 17+, iOS 7+, Android 4.4+. Die schlechteste Nachricht: Kein IE.

Für HTML/CSS: Firefox 30+, Chrome 35+, Safari 6.1 (anscheinend nicht 7?). Nicht ganz so gut unterstützt wie Canvas.

Im Moment müssen Sie für Chrome Canary ausführen, zu chrome://flags/ gehen und "experimentelle Webplattform-Funktionen" aktivieren.

Das ist eigentlich etwas komplizierter. Wenn Sie also wirklich tief eintauchen und sich über die Unterstützung informieren möchten, schauen Sie sich die Support-Matrix von Adobe an.

Progressive Enhancement

Das Schöne am Blending ist, dass es in erster Linie um designorientierte Effekte geht. Wenn diese nicht unterstützt werden, können Sie sicherstellen, dass das Fallback weiterhin lesbar ist (Progressive Enhancement!).

Hier ist ein aktueller Gedanke von Jeremy Keith

Es ist absolut möglich – nein, wünschenswert – Features zu nutzen, lange bevor sie in jedem Browser unterstützt werden. So bewegen wir das Web voran.

Eine Möglichkeit, die Unterstützung zu gewährleisten, ist also, das Design in einem Browser, der dies nicht unterstützt, zu betrachten. Wenn es immer noch lesbar/nutzbar ist, ist alles in Ordnung, keine weiteren Maßnahmen erforderlich.

Wenn das Ergebnis unleserlich/unbrauchbar ist, können Sie die Dinge so anpassen, dass sie es werden, oder einen Test durchführen, um die Unterstützung zu ermitteln und im Falle mangelnder Unterstützung etwas Spezifisches zu tun.

Um die Unterstützung zu testen, könnten Sie meiner Meinung nach nach der gewünschten Eigenschaft testen

var supportsMixBlendMode = window.getComputedStyle(document.body).mixBlendMode;

var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;

Wenn der zurückgegebene Wert "normal" ist (oder irgendetwas anderes als `undefined`), ist die Unterstützung vorhanden, sonst nicht. Dann wahrscheinlich eine Klasse zum ``-Element hinzufügen, damit Sie dies wissen und sie überall in Ihrem CSS verwenden können, um Dinge anzupassen, im Stil von Modernizr. Vielleicht werden sie in Zukunft auch einen Test dafür durchführen.

Es sei denn, es ist nicht so einfach, in welchem Fall lassen Sie es mich wissen.

---

Brauchen Sie mehr Ideen? Schauen Sie sich diese Sammlung an. Viel Spaß beim Mischen!