So verwenden Sie CSS-Mischmodi

CSS-Mischmodi sind eine einfache Möglichkeit, Bildeffekte direkt in Ihrem Browser hinzuzufügen.

Aus diesem Grund ist das herkömmliche Bearbeiten und anschließende Speichern von Fotos aus einer Bildbearbeitungssoftware nicht immer erforderlich. Als Designer haben wir unzählige Stunden damit verbracht, Bildern Effekte mit Tools wie Adobe Photoshop hinzuzufügen. Beim Durcharbeiten dieses Lernprogramms werden Sie feststellen, dass viele der Optionen denen in Photoshop ähneln, aber jetzt mit der Effizienz des CSS-Stils ausgeführt werden können.

Werden Browser-Mischmodi die Bildbearbeitungssoftware vollständig überflüssig machen? Nicht ganz und sicher noch nicht ganz. Aber die Unterstützung von CSS und Browsern hat einen langen Weg zurückgelegt, um neue Möglichkeiten der Bildbearbeitung zu unterstützen. CSS- und SVG-Beschneidung und -Maskierung, Mischmodi, 3D-Transformation und mehr können sicherlich die Abhängigkeit reduzieren, die wir von Bildbearbeitungssoftware haben. Je ausgefeilter die Browser werden, desto mehr Potenzial sehen wir und verbringen (hoffentlich) weniger Zeit mit Photoshop.

CSS-Mischmodi und CSS-Mischmodi

Dieses Tutorial behandelt CSS-Mischmodi und wie sie verwendet werden. Zu Beginn gibt es ein paar verschiedene Optionen, die Sie kennen sollten. Einer ist ein Effekt mit background-blend-mode und der andere mit mix-blend-mode .

Mit der background-blend-mode property können Sie die Hintergrundebenen (Bild oder Farbe) eines Elements mischen. Mischmodi werden als Wert definiert und geben an, wie die Farben des Hintergrundbilds mit der Farbe oder anderen Hintergrundbildern dahinter gemischt oder gemischt werden.

Was passiert, wenn Sie etwas mischen möchten, aber nicht mit Hintergrundelementen? Elemente können mit der mix-blend-mode Eigenschaft zusammengemischt werden. Diese Eigenschaft beschreibt, wie die Überblendung zwischen gestapelten HTML-Elementen erfolgen soll. Elemente auf überlappenden Ebenen werden mit denen darunter verschmolzen. Alle Bilder, Texte, Rahmen oder Überschriften werden von dieser Eigenschaft beeinflusst.

Adobe Photoshop Multiply-Beispiel

Ein Blick auf die traditionelle Art, Mischmodi in einem Bildeditor anzuzeigen, gibt uns eine Vorstellung davon, was wir mit CSS-Mischmodi erreichen können. Das folgende Foto wurde in Adobe Photoshop erstellt. Das Bild befindet sich auf einer eigenen Hintergrundebene mit einer roten Ebene darüber. Für die rote Ebene wurde ein Mischmodus ausgewählt, nämlich „Multiplizieren“. Wie Sie sehen können, gibt es eine rote Überlagerung. Um diesen Effekt zu erzielen, nimmt Adobe Photoshop die Farben aus der Ebene, auf die „Multiplizieren“ angewendet wurde, multipliziert sie mit den Farben der darunter liegenden Ebene(n) und dividiert sie dann durch 255, um das Ergebnis anzuzeigen.

Derselbe Effekt kann mit CSS erzielt werden, was eine schnellere Anpassung und einfache Aktualisierung ermöglicht.

Grundlegendes Beispiel eines CSS-Mischmodus

Ein einfaches Beispiel, um zu sehen, wie Mischmodi funktionieren, ist das Mischen des Bildes mit einer background-color . Zuerst muss der URL-Pfad zum Bild angegeben werden, dann eine Farbe angegeben werden. Nachdem diese entschieden wurden, muss der Mischmodus ausgewählt werden. Hier wurde Multiplizieren ausgewählt, um zu zeigen, wie sich dieser Mischmodus auf das Erscheinungsbild des background-image auswirkt.

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Ein Mischmodus ist die Art und Weise, wie der endgültige Farbwert eines Pixels berechnet wird, wenn sich Ebenen überlappen. Jeder Mischmodus nimmt den Farbwert des Vordergrunds und des Hintergrunds (obere Farbe und untere Farbe), berechnet seinen Wert und gibt einen Farbwert zurück. Die endgültige, sichtbare Ebene ist das Ergebnis der Mischmodusberechnung für jedes überlappende Pixel zwischen den gemischten Ebenen.

Multiplizieren ist ein sehr beliebter Mischmodus, aber es gibt auch andere verfügbare Mischmodusoptionen: Bildschirm, Überlagern, Abdunkeln, Aufhellen, Farbe ausweichen, Farbe nachbelichten, Hartes Licht, Weiches Licht, Differenz, Ausschluss, Farbton, Sättigung, Farbe und Leuchtkraft. Wenn „normal“ angegeben ist, werden die Dinge zurückgesetzt. Anstatt die Details jedes Mischmodus einzeln durchzugehen, ist das Experimentieren mit ihnen der beste Weg, um das Endergebnis zu bestimmen.

Hintergrundmischmodus mit zwei Bildern

Anstatt eine Farbüberlagerung auf einem Bild zu haben, kann das Übereinanderschichten von zwei Bildern einen ziemlich coolen Effekt haben. Es ist so einfach wie das Hinzufügen von zwei Hintergrundbildern in der CSS-Deklaration. Die nächste Wahl ist, eine Hintergrundfarbe zu haben (oder nicht). Wenn Sie keine Hintergrundfarbe wünschen, kann diese entfernt werden und die Bilder werden je nach ausgewähltem Mischmodus miteinander vermischt.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Farbverlauf auf Hintergrund-Mischmodi

Anstatt nur eine einzige Farbe zu verwenden, können Farbverläufe auch einige einzigartige Effekte erzielen.

 .gradient-on-image {
 Hintergrund:
 linearer Farbverlauf (lila 0 %, rot 80 %),
 Linear-Gradient (nach rechts, lila 0 %, gelb 100 %), url ("image.jpg");
 Hintergrund-Mischmodus: Bildschirm, Unterschied, Aufhellen;
 } 

Sie werden auch feststellen, dass dieses Beispiel mehrere Hintergrundmischmodi hat. Wenn ein Mischmodus nicht ausreicht, können mehrere verwendet werden.

Arbeitsbeispiele finden Sie in diesem Codepen.

Beispiele für Mischungsmodi

Bisher lag der Fokus auf dem Hintergrund. Was ist, wenn andere Elemente auf der Seite Mischmodi nutzen möchten? Dies ist kein Problem, und es stehen dieselben Mischmodustypen zur Verfügung.

Bei den background-blend-modes sieht es mit Ausnahme von initial, inherit und unset gleich aus.

• Anfänglich: Standardeinstellung der Eigenschaft, die keinen Mischmodus festlegt.
• Übernehmen: Übernimmt den Mischmodus von seinem übergeordneten Element.
• Unset: Entfernt den Mischmodus von einem Element.

Grundlegendes Beispiel eines gemischten Mischmodus mit Isolierung

Wenn Sie mit mix-blend-mode arbeiten, werden Sie auf die Notwendigkeit stoßen, etwas zu isolieren. Zunächst ist es wichtig zu wissen, dass „Stapeln“ möglich ist, und dies ist nützlich, wenn Sie mit vielen Ebenen arbeiten. Denken Sie an einen Stapel Kisten. Jede Box ist von der Gruppe getrennt. In jeder Kiste können sich mehrere Lagen von Gegenständen befinden. Diese Denkweise hilft bei der Bestimmung, was isoliert werden muss.

Text- und Bildmischung mit Mix-Mischmodus

In diesem Beispiel enthält das div mit einer Klasse von img-wrap das Bild. Das Bild hat einen mix-blend-mode von Multiplizieren. Das Bild scheint also im Grunde in den Hintergrund zu geraten.

Um dies zu verhindern, sollte das img-wrap div (das auch den Überschriftentext enthält) ein neuer Satz gestapelter Inhalte sein, damit es sich vom Hintergrund des body-Elements abhebt. Dies geschieht mit der Isolationseigenschaft. Der Standardwert ist auto, also isolation: isolate; müssen hinzugefügt werden.

Um dies zu testen, kommentieren Sie die Eigenschaft isolation im div mit der Klasse .img-wrap aus und überprüfen Sie das Ergebnis.

Hier ist der HTML-Code:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Hier ist das CSS. Achten Sie genau auf das isolate auf dem .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

Das funktionierende Beispiel finden Sie auf Codepen.

Textausschnitt mit Mix-Mischmodus

Einige interessante Typeffekte können mit Mix-Mischmodi erstellt werden. Es gibt eine einfache Möglichkeit, ausgeschnittenen Text zu erstellen. Der Hintergrund wird durch eine Füllung des h1 Elements verdeckt.

Hier ist der HTML-Code:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

Das, was <div> enthält, wird mit dem Wald-Hintergrundbild gefüllt.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

Die darin enthaltene Überschrift wird mit einer optionalen Hintergrundfarbe gestaltet. Die Überschrift hat einen durchsichtigen Effekt mit dem halbdurchsichtigen Hintergrundbild, indem mix-blend-mode von Multiplizieren verwendet wird:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

Das funktionierende Beispiel finden Sie auf Codepen.

Mix-Mischmodus und SVG

SVG-Dateien sind im Web sehr beliebt, und CSS-Mischmodi funktionieren auch gut mit ihnen. Formen können leicht gezielt werden, um ihnen den gewünschten Mischmodus zu geben.

Isolate war auch in diesem Beispiel der Schlüssel. Ohne die Kreise zu isolieren, würde der graue Hintergrund stören.

Hier ist der Code zum Erstellen der Kreisgruppe:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Hier sind die CSS-Stile:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Dieses Beispiel finden Sie auf Codepen.

Browser-Unterstützung für Hintergrund-Mischmodus und Mix-Mischmodus

Die Browserunterstützung ist ziemlich gut, aber nicht ganz konsistent für den Hintergrund-Mischmodus. Bevor Sie mit einem Design beginnen, das diese Funktion verwendet, überprüfen Sie unbedingt, ob ich es verwenden kann. Derzeit fehlt Edge und Safari die Unterstützung. Um mit eingeschränkter Unterstützung umzugehen und je nachdem, welche Browser unterstützt werden müssen, kann eine CSS-Funktionsabfrage eine gute Option sein. Wenn nicht, ist es vielleicht am besten, an „überblendete“ Bilder als Verbesserung (nicht als Voraussetzung) zu denken.

Die Browserunterstützung ist für den Mix-Blend-Modus etwas besser. Es ist gut, sich der teilweisen Unterstützung bewusst zu sein. Safari unterstützt beispielsweise nicht Farbton, Sättigung, Farbe oder Helligkeit.

Der beste Weg, um wirklich zu erfahren, was mit Mischmodi entworfen werden kann, ist zu experimentieren. Die hier gezeigten Beispiele haben nur an der Oberfläche gekratzt. Es ist erstaunlich, welche Art von Grafiken mit Mischmodi erstellt werden können. Dies ist ein großer Schritt nach vorn für das, was im Web getan werden kann.

Tanken Sie die Freiheit, mit WP Engine kreativ zu sein

WP Engine ermöglicht die Freiheit, auf WordPress zu erstellen. Die Produkte des Unternehmens, die schnellsten aller WordPress-Anbieter, unterstützen 1,5 Millionen digitale Erfahrungen. Mehr der 200.000 besten Websites der Welt verwenden WP Engine, um ihre digitalen Erfahrungen zu optimieren, als jeder andere in WordPress. Erfahren Sie mehr unter wpengine.com oder sprechen Sie noch heute mit einem Vertreter!