The CSS Podcast – 024: Blend Modes
Duotone ist eine beliebte Farbbehandlung bei Fotografien. Dadurch sieht ein Bild so aus, als wäre es nur aus zwei kontrastierenden Farben: eine für Highlights und eine für schwache Lichter. Wie gehen Sie dazu mit CSS vor?
Mithilfe von Mischmodi – und anderen Techniken, die Sie kennengelernt haben, wie Filter und Pseudoelemente: Sie können diesen Effekt auf jedes Bild anwenden.
Was ist der Mischmodus?
Mischmodi werden häufig in Designtools wie Photoshop verwendet. Kombinieren Sie Farben aus zwei oder mehr Schichten, um einen Kompositionseffekt zu erzeugen. Wenn Sie ändern, wie Farben gemischt werden, können Sie wirklich interessante visuelle Effekte erzielen. Sie können auch Mischmodi verwenden. z. B. das Isolieren eines Bildes mit weißem Hintergrund, sodass sie einen transparenten Hintergrund hat.
Sie können die meisten Mischmodi, die in einem Designtool verfügbar sind,
mithilfe der
mix-blend-mode
oder die
background-blend-mode
-Properties.
Mit „mix-blend-mode
“ wird ein gesamtes Element überlagert
und background-blend-mode
wendet eine Verschmelzung auf den Hintergrund eines Elements an.
Sie verwenden background-blend-mode
, wenn Sie mehrere Hintergründe für ein Element haben
und möchten, dass sie
ineinander übergehen.
mix-blend-mode
wirkt sich auf das gesamte Element aus,
einschließlich seiner Pseudoelemente.
Ein Anwendungsfall ist das
ursprüngliche Beispiel für ein Duo-Bild,
bei dem Farbebenen über seine Pseudoelemente auf das Element angewendet werden.
Mischmodi lassen sich in zwei Kategorien unterteilen: trennbar und nicht trennbar. Ein trennbarer Mischmodus berücksichtigt jede Farbkomponente, wie RGB, einzeln zu sortieren. Bei einem nicht trennbaren Mischmodus werden alle Farbkomponenten gleich berücksichtigt.
Browserkompatibilität
mix-blend-mode
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-blend-mode
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Trennbare Mischmodi
Normal
Dies ist der Standard-Mischmodus. Es ändert nichts daran, wie ein Element in andere Elemente übergeht.
Multiplizieren
Im Mischmodus „multiply
“ werden mehrere Folien übereinander gestapelt.
Weiße Pixel erscheinen transparent,
und schwarze Pixel erscheinen schwarz.
Alles dazwischen multipliziert seine Leuchtdichtewerte (Licht).
Das bedeutet, dass Licht viel heller und dunkler wird.
und führt meist zu einem dunkleren Ergebnis.
.my-element {
mix-blend-mode: multiply;
}
Display
Mit screen
werden die light-Werte multipliziert. Dies ist ein Umkehreffekt zu multiply
,
und führt meist zu einem helleren Ergebnis.
.my-element {
mix-blend-mode: screen;
}
Overlay
In diesem Mischmodus – overlay
– werden multiply
und screen
kombiniert.
Die dunklen Grundfarben werden dunkler und die hellen Grundfarben heller.
Farben aus dem mittleren Bereich, wie z. B. 50% Grau, sind davon nicht betroffen.
.my-element {
mix-blend-mode: overlay;
}
Abdunkeln
Im Mischmodus „darken
“ wird die Leuchtkraft des Quellbilds und des Hintergrundbilds verglichen
und wählt die dunkelste aus.
Dazu werden die RGB-Werte und nicht die Leuchtdichte verglichen, wie es bei multiply
und screen
der Fall wäre.
für jeden Farbkanal.
Mit darken
und lighten
werden durch diesen Vergleich häufig neue Farbwerte erstellt.
.my-element {
mix-blend-mode: darken;
}
Lighten
Die Verwendung von lighten
bewirkt genau das Gegenteil von darken
.
.my-element {
mix-blend-mode: lighten;
}
Farbig abwedeln
Wenn Sie color-dodge
verwenden, wird die Hintergrundfarbe aufgehellt, um die Quellfarbe widerzuspiegeln.
Rein schwarze Farben sehen in diesem Modus keinen Effekt.
.my-element {
mix-blend-mode: color-dodge;
}
Farbig nachbelichten
Der Mischmodus „color-burn
“ ähnelt dem Mischmodus „multiply
“,
erhöht aber den Kontrast, wodurch gesättigte Mitteltöne und weniger Spitzlichter entstehen.
.my-element {
mix-blend-mode: color-burn;
}
Hartes Licht
Die Verwendung von hard-light
sorgt für einen kräftigen Kontrast.
Bei diesem Mischmodus werden die Leuchtdichtewerte entweder gefiltert oder multipliziert.
Wenn der Pixelwert heller als 50% Grau ist, wird das Bild aufgehellt.
als ob sie geprüft worden wäre. Ist es dunkler, wird es multipliziert.
.my-element {
mix-blend-mode: hard-light;
}
Weiches Licht
Der Mischmodus „soft-light
“ ist eine weniger harte Version von overlay
.
Es funktioniert auf die gleiche Weise mit weniger Kontrast.
.my-element {
mix-blend-mode: soft-light;
}
Differenz
Sie können sich die Funktionsweise von difference
ein wenig vorstellen wie ein Negativ.
Im Mischmodus „difference
“ wird der Differenzwert jedes Pixels
invertierenden Lichtfarben.
Wenn die Farbwerte identisch sind, werden sie schwarz.
Unterschiede in den Werten werden invertiert.
.my-element {
mix-blend-mode: difference;
}
Ausschluss
Die Verwendung von exclusion
ähnelt der von difference
,
aber statt Schwarz für identische Pixel zurückzugeben,
wird 50% Grau angezeigt, was zu einer weicheren Ausgabe mit weniger Kontrast führt.
.my-element {
mix-blend-mode: exclusion;
}
Nicht trennbare Mischmodi
Diese Mischmodi können Sie sich wie HSL-Komponenten vom Typ color vorstellen. Jede verwendet einen bestimmten Komponentenwert aus dem aktiven Layer und vermischt ihn mit anderen Komponentenwerten.
Farbton
Im Mischmodus „hue
“ wird der Farbton der Quellfarbe verwendet
und wendet ihn auf die Sättigung und Leuchtkraft der Hintergrundfarbe an.
.my-element {
mix-blend-mode: hue;
}
Sättigung
Das funktioniert wie hue
,
Wenn Sie jedoch saturation
als Mischmodus verwenden, wird die Sättigung der Quellfarbe angewendet.
dem Farbton und der Leuchtkraft der Hintergrundfarbe angepasst.
.my-element {
mix-blend-mode: saturation;
}
Farbe
Im Mischmodus „color
“ wird aus dem Farbton und der Sättigung der Quellfarbe eine Farbe erstellt
und die Leuchtkraft der Hintergrundfarbe.
.my-element {
mix-blend-mode: color;
}
Leuchtkraft
Schließlich ist luminosity
der Kehrwert von color
.
Es erzeugt eine Farbe mit der Leuchtkraft der Quellfarbe und dem Farbton und der Sättigung der Hintergrundfarbe.
.my-element {
mix-blend-mode: luminosity;
}
Das Attribut isolation
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Wenn Sie den isolation
festlegen
den Wert isolate
haben,
wird ein neuer Stapelkontext erstellt.
Dadurch wird verhindert, dass es mit einer Hintergrundebene überlagert wird.
Wie Sie im Z-Index-Modul gelernt haben, sollten Sie beim Erstellen eines neuen Stapelkontexts
wird diese Ebene zur Basisebene.
Das bedeutet, dass die Mischmodi
auf übergeordneter Ebene nicht mehr angewendet werden.
Elemente innerhalb eines Elements mit dem Wert isolation: isolate
können jedoch weiterhin zusammengeführt werden.
Dies funktioniert nicht mit background-blend-mode
weil die Hintergrundeigenschaft bereits isoliert ist.
Wissen testen
Testen Sie Ihr Wissen über Mischmodi
Welche der folgenden Modi sind CSS-Mischmodi?
Wenn Sie verschiedene Farben auf unterschiedliche Weise verschmelzen möchten, welche Art von Mischmodus benötigen Sie?