CSS/Tutorials/Vermischen mit Blend-Modes
Text-Info
- leicht
- 15min
- 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.
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.
Inhaltsverzeichnis
Anwendungsbeispiele
Texteffekte bei Überschriften
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>
Überblendung von SVG-Elementen
Gerade bei SVG-Elementen lassen sich so interessante Effekte erzielen:
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 rechten Bereich werden Farben aus der SelfHTML-Farbpalette verwendet: Rot und Grün ergeben das von SelfHTML verwendete Gelb.
Additive Farbmischung
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
@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;
}
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
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.
<h1>Demonstration von Blendmodi</h1>
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:multiplyoderscreen, 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:multiplyoderscreen, abhängig von der Vordergrundfarbe -
soft-light:darkenoderlighten, abhängig von den Farbwerten -
difference: die dunklere Farbe wird von der helleren subtrahiert -
exclusion: ähnlich wiedifference -
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
hue, saturation, color und luminosity nicht.
- Screenshots der Ergebnisse
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
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.
- Screenshots der Ergebnisse
hard-light
overlay
[2]
Fazit
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
- ↑ http://codepen.io/robinrendle/details/wKqmbW/
- ↑ Bildquelle: https://commons.wikimedia.org/wiki/File:WhereRainbowRises.jpg
Weblinks
- W3C: blend-mode (draft)
- Alistapart: Blending Modes Demystified von Justin McDowell January 05, 2016
- CSS-Tricks: Basics of CSS Blend Modes von Chris Coyier February 28, 2014
- Webkrauts: Blend-Modes
- Wikipedia: Blend modes (Englisch)
span-Elemente notiert. Durchdisplay:inline-blockwerden 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.