CSS/Tutorials/Vermischen mit Blend-Modes

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
leicht
Schwierigkeitsgrad
15min
Vorausgesetztes Wissen
HTML
CSS


Im Normalfall werden HTML Elemente neben- und untereinander angeordnet, ohne sich zu überlappen. Durch Positionierung, Anordnung in der gleichen Grid-Zelle oder durch Transformationen können sich Elemente überlagern. Dann muss der Browser die Frage beantworten, welches Element er an der Überlappungsstelle zeichnen soll.

Zusammenspiel von HTML, CSS und HTML

In diesem Beispiel sind die Kreise überlappend, verdecken einander aber nicht, sondern werden miteinander vermischt.

Dieser Effekt ist aus Bildbearbeitungsprogrammen wie Photoshop bekannt, in der die Farbwerte vereechnet und gemischt werden. Mit der mix-blend-mode-Eigenschaft können Sie festlegen, wie sich die Farbwerte übereinanderliegender Elemente miteinander und mit dem Hintergrund vermischen.

Mit der background-blend-mode-Eigenschaft können Sie festlegen, wie sich mehrere Hintergrundbilder eines Elements, sowie dessen Hintergrundfarbe miteinander vermischen.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com


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: #306f91;
}
<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="#306f91"/>
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.

Additive Farbmischung[Bearbeiten]

additive Farbmischung ansehen …
circle {
  mix-blend-mode: screen;
  fill-opacity: 0;
  animation: spoton 6s alternate infinite;
}

circle:nth-of-type(even) {
  animation-delay: 2s;
}

circle:nth-of-type(3) {
  animation-delay: 4s;
}

@keyframes spoton {
  0% {
    fill-opacity: 0;
  }  
  100% {
    fill-opacity: 1;	
  }
}

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]

Der blend-mode Typ ist eine Sammlung von Schlüsselwörtern, die die verschiedenen Überblend-Modi beschreiben. 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 Darstellung ist das Ergebnis der 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.

[2]


Fazit[Bearbeiten]

Auch wenn es sicherlich nicht viele praktische Anwendungsmöglichkeiten für diese Eigenschaften 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/
  2. Bildquelle: https://commons.wikimedia.org/wiki/File:WhereRainbowRises.jpg

Weblinks[Bearbeiten]