Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Blend-Modes

CSS

Blend-Modes

Ein oft genutztes Stilmittel bei Ebenen-Kompositionen in Photoshop sind so genannte »Blend-Modes« – eingedeutscht: »Mischmodi«. Dabei werden zwei Ebenen anhand von unterschiedlichen mathematischen Farbformeln visuell miteinander verschmolzen. Diese Effekte lassen sich jetzt auch in CSS einsetzen.

Zusammen mit CSS-Filtern haben wir nun eine große Palette an optischen Effekten im Browser zur Verfügung. Mit ein paar Tricks habt ihr schnell eine Palette an »Instagram-Filtern« für das Web zusammen (siehe zum Beispiel CSSGram). Oder Bilder im Pop-Art-Stil – auch das viel einfacher als mit Photoshop. Der große Vorteil, wie immer bei Eigenschaften im Web, ist die Dynamisierung, sei es durch Animation oder Transition oder mit JavaScript veränderte Umgebungsvariablen – ein Quell an kreativen Optionen.

Der Einsatz von CSS Blend-Modes ist auf zweierlei Wegen möglich: Zum einen als sogenannter background-blend-mode, der Hintergrundfarben und -bilder ineinander mischt, zum anderen als mix-blend-mode, der das Element, auf das die Eigenschaft angewendet wird, mit dem Hintergrund, auf dem es positioniert ist, farblich vermischt.

Für die Eigenschaften könnt ihr jeweils folgende Werte verwenden: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity. Wer genau wissen will, was jeder Farbmischer intern macht, der kann sich die Erläuterungen der CSS-Spezifikation, die Blend Modes bei Wikipedia oder die Beschreibung der Photoshop-Mischmodi durchlesen – spannend! Ich muss zugeben, dass ich den gewünschten Effekt immer durch probieren finde. ;)

Ein einfaches Anwendungsbeispiel für background-blend-mode:

  1. .will-it-blend {
  2.   background-image: url(image.jpg);
  3.   background-color: red;
  4.   background-blend-mode: screen;
  5. }
Einfaches Beispiel für background-blend-mode

Beispiel für mix-blend-mode:

  1. h1 {
  2.   mix-blend-mode: multiply;
  3. }
Einfaches Beispiel für mix-blend-mode

Ein paar Codepens, mit denen ihr spielen könnt, um die verschiedenen Effekte zu testen:

Auch animierte GIFs funktionieren mit Blend Modes:

See the Pen How do CSS Blend Modes work with black and white? by yoksel (@yoksel) on CodePen.

Praktische Beispiele:

In der »Blend Mode Gradient Gallery« hat Bennett Feely verdeutlicht, welche Hintergrund-Pattern mit CSS Blend-Modes möglich sind, und gleichzeitig errechnet, wieviel Kilobyte das Äquivalent als PNG/WebP oder JPG beträgt. Der CSS-Code »wiegt« oft sehr viel weniger als eine Grafik und spart Requests ein. Natürlich braucht der Browser einige CPU-Ressourcen, das ist aber nicht aufwendiger als bei CSS-Animationen oder JS-Manipulationen. Zugegeben sehe ich kaum Einsatzmöglichkeiten für Hintergrund-Pattern mit CSS Blend-Modes, aber spannend ist es dennoch.

Ein interessantes Beispiel ist der Farbkonfigurator über <input type="color" /> (einfach auf das Bild klicken, um die Farbe anzupassen):

See the Pen Dynamic Image Colorizing with by Noah Blon (@noahblon) on CodePen.

Die Loading-Bar, bei der sich automatisch die Textfarbe anpasst:

See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen.

Im Zusammenspiel mit CSS Filter könnt ihr auch einen Roy-Lichtenstein-Effekt basteln:

See the Pen Roy Lichtenstein effect in CSS by Gregor Adams (@pixelass) on CodePen.

Ein spezieller Play-Button, der zum Teil »ausgestanzt« ist:

See the Pen cutted play button by Sven Wolfermann (@maddesigns) on CodePen.

Die Blend-Modes könnt ihr aber nicht nur in CSS verwenden, auch SVG hat Blend-Modes in seiner Filter-Palette. Zudem lassen sich Blend-Modes auch in <canvas> verwenden. Fancy Beispiel (Mouse über Codepen bewegen):

See the Pen particle demo canvas blend by Sven Wolfermann (@maddesigns) on CodePen.

Die Browserunterstützung ist mittlerweile sehr gut, einzig Microsoft Internet Explorer/Edge unterstützen noch keine Blend-Modes (Stand 12/2015). Safari hat leider ein paar Mischmodi vergessen, so fehlt die Unterstützung von hue, saturation, color und luminosity.

http://caniuse.com/#search=blend%20modes
Aktuelle Browserunterstützung, Stand Dezember 2015

Dass IE/Edge die Blend-Modes noch nicht unterstützt, kann natürlich für den Cross-Browser-Einsatz und den gewünschten Effekt kritisch sein. Dennoch, wenn der Einsatz eher »unterstützend« als »zwingend« angesehen wird, könnt ihr die Eigenschaften im Sinne von progressive enhancement heute schon einsetzen.

Kommentare

Marco Hengstenberg
am 21.12.2015 - 09:38

Hey da,

super Erklärung zu dieser Technik. =)

Ich hab kürzlich ne kleine Demo zu gebastelt. Die ist zwar nich so fancy aber man kann damit rumspielen, indem man die Hintergrundfarbe des Inhaltsbereichs oder der einzelnen Bilder per Inspektor anpasst. Vielleicht hilfts ja irgendwem. ^_^

http://playground.smashingmagazine.com/blending-elements/ =)

Cheers,
Marco

Permanenter Link

Die Kommentare sind geschlossen.