Beispielcode zum Erzielen eines Aushöhlungseffekts mit reinem CSS

Ich habe kürzlich den Aushöhlungseffekt untersucht.

Hintergrundclip: Text

Der Hintergrund wird auf die Vordergrundfarbe des Textes zugeschnitten. Ich habe diese Verwendung zum ersten Mal bei CSS-Tricks gesehen: Auf der CSS-Tricks-Website wird dieses Ding überall verwendet.

Auf diese Weise ist es nicht mehr schwierig, einen einfachen Aushöhlungseffekt im Bildhintergrund zu erzeugen. Es gibt nur wenige Zeilen Schlüsselcode.

.wrapper {
  /* … */
  Hintergrundbild: URL("/Pfad/zu/Ihrem/Bild");
  Hintergrundclip: Text; /* ! */
  Farbe: transparent; /* ! */
}

Schon diese wenigen Zeilen bewirken eine große optische Veränderung. Vorher-Nachher-Vergleich:

Darüber hinaus gibt es hier eine praktischere Demo als die oben

Da background-clip aus der Familie der „Hintergründe“ stammt, hat er natürlich mehr mit Bildern und Farbverläufen zu tun. Zum Aushöhlen verwenden wir allerdings nicht immer Bilder oder Farbverläufe. Was ist, wenn wir Hohleffekte für Videos, Texte oder sogar komplexere DOM-Elemente erstellen möchten?

Direkt auf den Punkt: CSS-Maskeneigenschaft

Dies dürfte die direkteste Methode sein, die man sich vorstellen kann. Schließlich steckt im Namen das Wort „Maske“, wer kann das schon ignorieren?

Die CSS- mask-* werden im CSS-Maskierungsmodul Level 1 definiert. Diese Spezifikation definiert auch clip und clip-path -Eigenschaften. Mit anderen Worten: Dieses CSS-Modul umfasst sowohl Maskierung als auch Clipping.

Erstes Beispiel

Obwohl es sich um eine neue Eigenschaft handelt, ist das Festlegen der Maskeneigenschaft nicht schwierig. Hier ist unser erstes Beispiel.

<div Klasse="maskiert" />

.maskiert {
  Höhe: 100px;
  Breite: 100px;
  Hintergrund: linearer Farbverlauf (rot, orange, gelb, hellgrün, blau, violett, rot);
  Maske: URL("https://github.githubassets.com/pinned-octocat.svg");
}

Dies ist der folgende Effekt.

Die obige Verwendung ist noch sehr einfach. Wir geben einen mask an, dessen Wert ein von GitHub gestohlenes SVG-Bild ist. Der bunte Farbverlauf wird dann abgeschnitten und maskiert, um zur berühmten Katze zu werden.

Maske-* große Familie

mask Maskenattribut ist eigentlich eine Abkürzung vieler mask-* :

Maskenbild
Maskenwiederholung
Maskenposition
Maskenclip
Maskenursprung
Maskengröße
-
Maskentyp
Maskenverbund
Maskenmodus

Gibt es ein Déjà-vu-Gefühl in Bezug auf background-* ? Das ist richtig, viele der darin enthaltenen Eigenschaften stimmen mit Hintergrund/Rahmen überein und ihre Funktionen sind auch dieselben, außer background-* auf dem Hintergrund verwendet wird, während mask-* auf der Maskenebene verwendet wird – die auf dem Hintergrund verwendeten Tricks können weiterhin in der Welt der Masken verwendet werden! So erzielen Sie beispielsweise diesen Effekt:

.maskiert {
  Höhe: /* ... */;
  Breite: /* ... */;
  Hintergrund: /* ... */;
  Maskenbild: URL (https://github.githubassets.com/pinned-octocat.svg);
  Maskengröße: 5em;
  Maskenposition: Mitte;
  /* Wenn Sie gut gelaunt sind, ist es in Ordnung, eine Animation hinzuzufügen */
}

Mehr Kontrolle über Maskierungseffekte

Den Lesern ist möglicherweise aufgefallen, dass es in mask-* Familie einige neue Gesichter gibt. Das ist leicht zu verstehen: Maske ist eine so mächtige Funktion, dass es schade wäre, background-* komplett zu kopieren.

mask-mode

Mit dem Maskierungsmodus wird der spezifische Maskierungsmodus angegeben.

Die CSS-Eigenschaft „Maskentyp“ legt fest, ob mask-image für eine Maske vom Typ „Helligkeit“ oder „Deckkraft“ verwendet wird. mask-mode: alaph bedeutet, dass die Opazität (also der Alaph-Kanal) als Maskenwert verwendet wird, und mask-mode: luminance bedeutet, dass der Helligkeitswert als Maskenwert verwendet wird.

Also, was ist der Maskenwert? Der Maskenwert gibt den Grad der Maskierung des maskierten Elements an. Je größer der Maskenwert, desto mehr wird der maskierte Bereich sichtbar. Wenn der Maskenwert am größten ist, ist der Bereich vollständig undurchsichtig. Zum Beispiel:

<div Klasse="Modus">ABCDEFG</div>

.modus {
  Höhe: 200px;
  Breite: 300px;
  /* und mehr */
  Maskenbild: linearer Farbverlauf (nach links, schwarz, gelb);
  Maskenmodus: Luminanz; /* oder Alpha? */
} 

Die linke Seite ist das Maskenbild, die Mitte ist luminance und die rechte Seite verwendet alaph . Das Bild hier ist undurchsichtig. Wenn Sie also im alaph ein dauerhaft undurchsichtiges Bild als Maske verwenden, wird kein Maskierungseffekt erzielt. Das Bild weist jedoch Helligkeitsänderungen auf, sodass die maskierten Elemente unter luminance Änderungen in der Transparenz aufweisen.

Im Allgemeinen ist luminance etwas langsamer, da der Helligkeitswert jedes Pixels basierend auf den Werten der drei RGB-Kanäle berechnet werden muss.

mask-composite

Gibt an, wie der Maskeneffekt behandelt werden soll, wenn mehrere Maskenbilder überlagert werden. Die Auswirkungen einiger Eigenschaftswerte hängen von der Reihenfolge der Masken-Bild-Hierarchie ab.

Probieren Sie diesen CodePen von MDN

Das ist alles zum Thema mask . Genauere und genauere Erklärungen finden Sie bei MDN .

Füllmodus

Dies dürfte die magischste Methode sein. Bei der Verwendung von PS wird häufig der Begriff „Mischmodus“ angezeigt. Ich erinnere mich, dass ich, als ich Photoshop vor vielen Jahren zum ersten Mal benutzte, sehr neugierig war und erfuhr, was „Mischmodi“ seien. Das erfüllte mich sofort mit Ehrfurcht vor Photoshop. Doch trotz der Ehrfurcht, die wir damals empfanden, ist das hier erwähnte „Hybridmodell“ recht einfach zu verstehen.

Der sogenannte „Blending Mode“ bezeichnet die Methode zur Berechnung des endgültigen Farbwerts eines Pixels bei Überlappung von Ebenen. Jeder Mischmodus erhält einen Vordergrundfarbwert und einen Hintergrundfarbwert (obere bzw. untere Farbe) als Eingabe, führt einige Berechnungen durch und gibt den endgültigen Farbwert aus, der auf dem Bildschirm angezeigt werden soll. Die endgültige sichtbare Farbe ist das Ergebnis der Berechnung des Mischmodus, die für jedes überlappende Pixel in der Ebene durchgeführt wird. Einfach ausgedrückt bestimmt der Mischmodus, was passiert, wenn Sie eine Ebene zu einer anderen hinzufügen.

In CSS können Sie mix-blend-mode verwenden, um den Mischmodus anzugeben.

Sie fragen sich vielleicht, dass ich normalerweise nichts wie den „Mischmodus“ verwende. Ist der Standardwert für blend-mode also none ? Ja. Tatsächlich gehört diese häufigste Situation, in der die obere Ebene die untere Ebene „bedeckt“, auch zu einem Mischmodus namens normal . Es handelt sich im Wesentlichen um einen Mischmodus, der nur den Vordergrundfarbwert beibehält und den Hintergrundfarbwert vollständig verwirft.

Hier besprechen wir nur den Füllmodus, der zum Erreichen des Aushöhlungseffekts verwendet wird – screen . Dieser Mischmodus hat die Eigenschaft, dass, wenn die Vordergrundebene schwarz ist, die endgültige sichtbare Farbe direkt die Farbe der Hintergrundebene ist; wenn die Vordergrundebene weiß ist, ist die endgültige sichtbare Farbe direkt Weiß.

Ich glaube, Sie haben bereits herausgefunden, was das mit dem Aushöhlen zu tun hat. Schauen wir uns ein Beispiel an.

Jetzt haben wir ein <video> und eine Logo-Überlagerung „schwarzer Text auf weißem Hintergrund“.

Wir fügen dem schwebenden Rahmen folgendes CSS hinzu:

.logo {
    /* ... ... */
    Mix-Blend-Modus: Bildschirm;
}

Es ergibt sich folgendes:

Gehen Sie zu dieser Demo, um den spezifischen Code und die Effekte anzuzeigen

Das Zahnradsymbol ist tatsächlich hohl geworden. Aber warum?

Lassen Sie uns zunächst eines klarstellen: Legen Sie die schwebende Ebene über das Video. Die schwebende Ebene ist der „Vordergrund“ und das Video der „Hintergrund“. Schauen wir uns zunächst den weißen Teil der schwebenden Ebene an. Da Weiß auf jede beliebige Farbe Weiß ergibt, bleibt der weiße Teil erhalten. Und da Schwarz auf jede beliebige Farbe die Farbe der darunterliegenden Ebene ergibt, erscheint der schwarze Teil ausgehöhlt.

Allerdings ist diese Implementierung ein kleiner Hack, da hier nur Schwarz und Weiß verwendet werden. Wenn andere Farben als background-color der schwebenden Ebene verwendet werden, sieht der Effekt nicht wie ein Aushöhlungseffekt aus. In diesem Fall muss mask noch zum Einsatz kommen. Für den Fall, dass nur ein weißer Hintergrund verwendet wird, ist mix-blend-mode jedoch immer noch eine praktikable Lösung.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.