CSS/Eigenschaften/Anzeige/mix-blend-mode

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der mix-blend-mode-Eigenschaft können Sie festlegen, wie sich die Farbwerte übereinanderliegender Elemente miteinander und mit dem Hintergrund vermischen.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Information

Für die Überblendung mehrerer Hintergründe gibt es die CSS-Eigenschaft background-blend-mode.


Anwendungsbeispiele[Bearbeiten]

Texteffekte bei Überschriften[Bearbeiten]

Beispiel ansehen …
span {
  display: inline-block;
  margin-left:-0.18em;
  mix-blend-mode: multiply;
}

h2.screen span {
  mix-blend-mode: screen;
}

span:nth-of-type(even) {
  color: #dfac20;
}

span:nth-of-type(3n+1) {
  color: #3938ab;
}
<h2>
  <span>S</span><span>e</span><span>l</span><span>f</span><span>H</span><span>T</span><span>M</span>L
</h2>
In diesem Beispiel werden die einzelnen Buchstaben der Überschrift in span-Elemente notiert. Durch display:inline-block werden sie zu Blockelementen, denen man einen negativen Rand margin geben kann, so dass sie übereinander stehen.
Durch mix-blend-mode werden die Farben miteinander vermischt.

Überblendung von SVG-Elementen[Bearbeiten]

Gerade bei SVG-Elementen lassen sich so interessante Effekte erzielen:

Beispiel ansehen …
circle { 
  mix-blend-mode: screen; 
 }
    <circle cx="40" cy="40" r="40" fill="red"/>
    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
    <circle cx="60" cy="80" r="40" fill="blue"/>

    <circle cx="200" cy="40" r="40" fill="#c32e04"/>
    <circle cx="240" cy="40" r="40" fill="#5a9900"/>
    <circle cx="220" cy="80" r="40" fill="#3983ab"/>
Im linken Beispiel werden drei Kreise in den Grundfarben gezeichnet. Da die Farben miteinander vermischt werden, entsteht in der Mitte ein weißer Bereich.
Im rechten Bereich werden Farben aus der SelfHTML-Farbpalette verwendet: Rot und Grün ergeben das von SelfHTML verwendete Gelb.

Loading-Bar[Bearbeiten]

Beispiel ansehen …
@keyframes loading {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes percentage {
  1% {
    content: "1%";
  }
  2% {
    content: "2%";
  }
  3% {
    content: "3%";
  }
 ...

.bg {
  background-color: red;
  animation: loading 10s linear infinite;
}

.el {
  color: red;
  width: 200px;
  border: 1px solid red;
}
.el:after {
  padding-left: 20px;
  content: "0%";
  display: block;
  text-align: center;
  font-size: 50px;
  padding: 10px 20px;
  color: cyan;
  mix-blend-mode: difference;
  animation: percentage 10s linear infinite;
}
In diesem Beispiel befindet sich über einem div ein Pseudoelement, dessen Inhalt von der Animation percentage die aktuellen Prozentwerte in die Eigenschaft content erhält. Zusätzlich wird mittels der Animation loading die Breite und damit die Farbe animiert.
Der mix-blend-mode: difference; subtrahiert die dunklere Farbe von der helleren. Dadurch ist dieses Beispiel von Robin Rendle[1] zwar spektakulär, aber nur schwierig für einen praktischen Einsatz mit anderen Farben anzupassen.

Blend-Modi[Bearbeiten]

Ein Blend-Modus ist eine Rechenmethode um den endgültigen Farbwert eines Pixels zu berechnen, wenn sich verschiedene Ebenen überlappen. Jeder Blendmodus verwendet für jeden einzelnen Bildpunkt die Farbwerte von Vorder- und Hintergrund, berechnet die Vermischung und gibt einen Farbwert zurück. Die endgültige, sichtbare Schicht ist das Ergebnis dieser Berechnung aller übereinanderliegenden Pixel der vermischten Ebenen.

Beispiel ansehen …
<h1>Demonstration von Blendmodi</h1>
Das Beispiel erlaubt die verschiedenen Blendmodi interaktiv auszuprobieren.

Die Erläuterungen gehen von einer Hintergrundfarbe und einer Vordergrundfarbe aus.

Folgende Werte sind möglich:

  • normal: keine Vermischung, der Farbwert ist der des Vordergrundes, Standardwert
  • multiply: die Farbwerte werden multipliziert, das Ergebnis ist nicht heller als die Ausgangsfarben
  • screen: die Farbwerte der Komplementärfarben werden multipliziert, das Ergebnis ist nicht dunkler als die Ausgangsfarben
  • overlay: multiply oder screen, abhängig von der Hintergrundfarbe
  • darken: die dunklere der beiden Farben
  • lighten: die hellere der beiden Farben
  • color-dodge: hellt die Hintergrundfarbe auf
  • color-burn: dunkelt die Hintergrundfarbe ab
  • hard-light: multiply oder screen, abhängig von der Vordergrundfarbe
  • soft-light: darken oder lighten, abhängig von den Farbwerten
  • difference: die dunklere Farbe wird von der helleren subtrahiert
  • exclusion: ähnlich wie difference
  • hue: erzeugt eine Farbe mit dem Farbton der Vordergrundfarbe und der Sättigung und Helligkeit der Hintergrundfarbe
  • saturation: erzeugt eine Farbe mit der Sättigung der Vordergrundfarbe und dem Farbton und der Helligkeit der Hintergrundfarbe
  • color: erzeugt eine Farbe mit dem Farbton und der Sättigung der Vordergrundfarbe und der Leuchtkraft der Hintergrundfarbe
  • luminosity: erzeugt eine Farbe mit der Leuchtkraft der Vordergrundfarbe und dem Farbton und der Sättigung der Hintergrundfarbe
Beachten Sie: Safari unterstützt die Blend-Modi: hue, saturation, color und luminosity nicht.


Vertauscht man die Reihenfolge der Bilder, ändern sich auch einige Ergebnisse. So liefert bei vertauschten Grafiken etwa overlay dasselbe Resultat wie hard-light, wenn die Grafiken unvertauscht bleiben.

Bildquelle[Bearbeiten]

Fazit[Bearbeiten]

Auch wenn es sicherlich nicht viele praktische Anwendungsmöglichkeiten für diese Eigenschaft gibt, lassen sich so doch spektakuläre Effekte erzielen, für die Sie bis jetzt teure Grafik-Programme benötigten.

Quellen[Bearbeiten]

  1. http://codepen.io/robinrendle/details/wKqmbW/

Weblinks[Bearbeiten]