Hilfe:Testen von Überblendmodi

Diese Seite demonstriert die Wirkung der verschiedenen CSS-Überblendmodi.

Jede Tabellenzeile enthält drei Zellen, je eine mit schwarzem, weißen und färbigen Hintergrund background: linear-gradient(60deg, #880, #404040, #080, #088);.

Diese Zellen werden mit dem Tabellenhintergrund background: linear-gradient(45deg, #f00, #0f0, #00f) in den verschiedenen Modi überblendet. Der Text selber ist immer schwarz und mit einem Schatten versehen box-shadow: 0px 0px 10px 0 #fff inset;.

Microsoft Internet Explorer und Edge unterstützen die Überblendmodi nicht.

Folgende Klassen müssen in die Common.css eingetragen werden:

/* Klassen zum Testen von Überblendmodi */
.blendmode td  { background: linear-gradient(45deg, #f00, #0f0, #00f); font: bold 4vw 'Alfa Slab One'; text-align: center; width: 25%; }
.blendmode p   { border: 20px solid; padding: 15px; }
.innen1        { background: linear-gradient(-45deg, #f00, #f0f0f0, #800); }
.innen         { background: linear-gradient(60deg, #880, #404040, #080, #088); }
.mixtext       { color: #000; text-shadow: 0 0 15px #fff, 0 0 15px #fff; }

multiply

die Farbwerte der beiden Schichten werden miteinander multipliziert, das Ergebnis ist immer dunkler oder höchsten gleich dunkel wie die Ausgangsfarben, Multiplikation mit Schwarz ergibt Schwarz, Multiplikation mit Weiß ergibt die Ausgangsfarbe

screen

multipliziert die inversen Farbwerte und invertiert das Ergebnis; das Ergebnis ist immer mindestens so hell wie die Ausgangsfarben, Schwarz lässt die Ausgangsfarbe unverändert, Weiß ergibt Weiß

overlay

entwedeer multiply oder screen, abhängig von der Hintergrundfarbe.

hue

verwendet den Farbwert des Vordergrundes und die Sättigung/Helligkeit des Hintergrundes

saturation

verwendet die Sättigung des Vordergrundes und Farbwert/Helligkeit des Hintergrundes; graue Bereiche des Hintergrundes bleiben unverändert

color

Sättigung/Farbwert des Vordergrundes und Helligkeit des Hintergrundes; erhält die Graustufen des Hintergrundes und kann zum Einfärben eines Bildes in einer Farbe verwendet werden

Beispiel einer Tabellenzeile

<tr>
<td><p style="color: #000; border: 20px solid; padding: 15px; box-shadow: 0px 0px 10px 0 #fff inset; text-align: center; mix-blend-mode: overlay; background: black;"><span class="mixtext">Hintergrund black</span></p></td>
<td><p style="color: #000; border: 20px solid; padding: 15px; box-shadow: 0px 0px 10px 0 black inset; text-align: center; mix-blend-mode: overlay; background: white;"><span class="mixtext">Hintergrund weiß</span></p></td>
<td ><p class="innen" style="mix-blend-mode: overlay; ">Hintergrund farbig</p></td>
</tr>

Tabelle

transparenter Hintergrund
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: normal
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: multiply
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: screen
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: overlay
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: darken
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: lighten
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: difference
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: exclusion
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: hue
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: saturation
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: luminosity
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: color
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: color-dodge
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: color-burn
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: hard-light
Hintergrund black	Hintergrund weiß	Hintergrund farbig
mix-blend-mode: soft-light
Hintergrund black	Hintergrund weiß	Hintergrund farbig