Detaillierte Erklärung des wunderbaren CSS-Attributs MASK

Dieser Artikel stellt eine sehr interessante Attributmaske in CSS vor.

Wie der Name schon vermuten lässt, wird Mask mit Maske übersetzt. In CSS können Benutzer mit der Maskeneigenschaft einen Teil oder den gesamten sichtbaren Bereich eines Elements ausblenden, indem sie ein Bild auf einen bestimmten Bereich maskieren oder zuschneiden.

Masken gibt es zwar schon seit einiger Zeit, aber es gibt nicht viele praktische Szenarien und sie werden selten im tatsächlichen Kampf eingesetzt. Dieser Artikel listet einige interessante Szenarien auf, die mit Masken erstellt wurden.

Grammatik

Die einfachste Möglichkeit, eine Maske zu verwenden, besteht in der Verwendung eines Bilds wie folgt:

{
    /*Bildwerte*/
    mask: url(mask.png); /* Bitmap als Maske verwenden*/
    mask: url(masks.svg#star); /* Verwende die Form in der SVG-Grafik als Maske*/
}

Auf die Verwendung von Bildern wird natürlich später noch näher eingegangen. Die Verwendung von Bildern ist eigentlich ziemlich kompliziert, da wir zunächst das entsprechende Bildmaterial vorbereiten müssen. Zusätzlich zu Bildern kann die Maske auch einen dem Hintergrund ähnlichen Parameter akzeptieren, nämlich einen Farbverlauf.

Ähnlich der folgenden Verwendung:

{
    Maske: linearer Farbverlauf (#000, transparent) /* Farbverlauf als Maske verwenden */
}

Wie kann man es also konkret einsetzen? Ein sehr einfaches Beispiel. Oben haben wir einen Farbverlauf von Schwarz nach Transparent erstellt. Wir haben ihn in die Praxis umgesetzt. Der Code sieht ungefähr so ​​aus:

Das folgende Bild ist mit einem Farbverlauf von transparent nach schwarz überlagert.

{
    Hintergrund: URL (Bild.png);
    Maske: linearer Farbverlauf (90 Grad, transparent, #fff);
} 

Nach dem Auftragen der Maske sieht es so aus:

Diese DEMO vermittelt Ihnen einen kurzen Einblick in die grundlegende Verwendung der Maske.

Hier erhalten wir die wichtigste Schlussfolgerung zur Verwendung von Masken: Der überlappende Teil des Bildes und der durch die Maske erzeugte transparente Farbverlauf werden transparent.

Es ist erwähnenswert, dass der Farbverlauf oben linear-gradient(90deg, transparent, #fff) verwendet. Der #fff Vollfarbteil kann hier tatsächlich durch jede beliebige Farbe ersetzt werden, ohne den Effekt zu beeinträchtigen.

CodePen-Demo – Grundlegende Verwendung von MASK

Verwenden Sie MASKE, um das Bild zuzuschneiden

Mit der oben beschriebenen einfachen Anwendung können wir mithilfe einer Maske ein einfaches Zuschneiden von Bildern erreichen.

Verwenden Sie eine Maske, um eine Bildecken-Schneidemaske zu implementieren

Mithilfe eines linearen Farbverlaufs implementieren wir eine einfache abgeschrägte Form:

.Einkerbung{
    Breite: 200px;
    Höhe: 120px;
    Hintergrund:
    linearer Farbverlauf (135 Grad, transparent 15 Pixel, Dunkelrosa 0)
    oben links,
    linearer Farbverlauf (-135 Grad, transparent 15 Pixel, dunkelrosa 0)
    oben rechts,
    linearer Farbverlauf (-45 Grad, transparent 15 Pixel, dunkelrosa 0)
    unten rechts,
    linearer Farbverlauf (45 Grad, transparent 15 Pixel, Dunkelrosa 0)
    unten links;
    Hintergrundgröße: 50 % 50 %;
    Hintergrundwiederholung: keine Wiederholung;
}

So was:

Wir wenden den obigen Farbverlauf auf die Maske an und ersetzen den Hintergrund durch ein Bild. So erhalten wir ein Bild mit dem Effekt „Abgeschnittene Ecken“:

Hintergrund: URL (Bild.png);
Maske:
    linearer Farbverlauf (135 Grad, transparent 15 Pixel, #fff 0)
    oben links,
    linearer Farbverlauf (-135 Grad, transparent 15 Pixel, #fff 0)
    oben rechts,
    linearer Farbverlauf (-45 Grad, transparent 15 Pixel, #fff 0)
    unten rechts,
    linearer Farbverlauf (45 Grad, transparent 15 Pixel, #fff 0)
    unten links;
Maskengröße: 50 % 50 %;
Maskenwiederholung: keine Wiederholung;

Der erzielte Effekt ist wie folgt:

CodePen-Demo – Verwenden Sie MASK, um eine Bildecken-Schneidemaske zu implementieren

Natürlich gibt es noch viele weitere Möglichkeiten, den oben genannten Effekt zu erzielen. Clip-Pfad und Maske sind hier beispielsweise ebenfalls eine Möglichkeit.

Verwenden von Masken mit mehreren Bildern

Oben sehen Sie den Effekt der Verwendung einer Maske auf einem einzelnen Bild. Schauen wir uns an, welche Art von Funken durch die Verwendung von Masken auf mehreren Bildern entstehen können.

Angenommen, wir haben zwei Bilder. Mithilfe einer Maske können wir sie zur Anzeige übereinanderlegen. Die häufigste Verwendung:

div {
    Position: relativ;
    Hintergrund: URL (Bild1.jpg);
 
    &::vor {
        Position: absolut;
        Inhalt: "";
        oben: 0; links: 0; rechts: 0; unten: 0;
        Hintergrund: URL (Bild2.jpg);
        Maske: linearer Farbverlauf (45 Grad, Nr. 000 50 %, transparent 50 %);
    }
}

Zwei Bilder, von denen eines das andere vollständig überlappt. Anschließend verwenden Sie mask: linear-gradient(45deg, #000 50%, transparent 50%) um die beiden Bilder zu trennen:

CodePen-Demo – Grundlegende Verwendung von MASK, grundlegende Verwendung unter mehreren Bildern

Beachten Sie natürlich, dass es sich bei dem Farbverlauf der Maske, die wir oben verwendet haben, um eine vollständig einheitliche Farbänderung ohne Übergangseffekte handelt.

Lassen Sie uns den Farbverlauf innerhalb der Maske leicht ändern:

{
- Maske: linearer Farbverlauf (45 Grad, Nr. 000 50 %, transparent 50 %)
+ Maske: linearer Farbverlauf (45 Grad, Nr. 000 40 %, transparent 60 %)
}

Sie können den Effekt des Übergangs von Bild 1 zu Bild 2 erzielen:

CodePen-Demo – Grundlegende Verwendung von MASK, grundlegende Verwendung unter mehreren Bildern 2

Verwenden Sie MASK für Übergangsanimationen

Mit der oben genannten Vorbereitung. Mit einigen der oben vorgestellten Methoden können wir mask verwenden, um Übergangsanimationen zwischen Bildwechseln durchzuführen.

Verwenden Sie eine lineare Verlaufsmaske: linear-gradient() zum Wechseln

Indem wir weiterhin die obige Demo verwenden, können wir den Bildanzeige-/Übergangseffekt erzielen, indem wir den Maskenwert dynamisch ändern.

Der Code könnte folgendermaßen aussehen:

div {
    Hintergrund: URL (Bild1.jpg);
    Animation: Maskenbewegung 2 s linear;
}

@keyframes {
  0% {
    Maske: linearer Farbverlauf (45 Grad, Nr. 000 0 %, transparent 5 %, transparent 5 %);
  }
  1% {
    Maske: linearer Farbverlauf (45 Grad, Nr. 000 1 %, transparent 6 %, transparent 6 %);
  }
  ...
  100 % {
    Maske: linearer Farbverlauf (45 Grad, Nr. 000 100 %, transparent 105 %, transparent 105 %);
  }
}

Natürlich wäre es mühsam, sie wie oben beschrieben einzeln zu schreiben, und normalerweise verwenden wir hierfür Präprozessoren wie SASS/LESS. So was:

div {
    Position: relativ;
    Hintergrund: URL (Bild2.jpg) keine Wiederholung;
 
    &::vor {
        Position: absolut;
        Inhalt: "";
        oben: 0; links: 0; rechts: 0; unten: 0;
        Hintergrund: URL (Bild1.jpg);
        Animation: maskRotate 1,2 s, Ein-Aus;
    }
}
 
@keyframes maskRotate {
    @für $i von 0 bis 100 {
        #{$i}% {
            Maske: linearer Farbverlauf (45 Grad, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1 %);
        }
    }
}

Sie können folgende Effekte erzielen (Anzeigen und Ausblenden eines einzelnen Bildes sowie Wechseln zwischen zwei Bildern):

CodePen-Demo – MASK-linearer Gradientenübergang

Verwenden Sie die Winkelverlaufsmaske: conic-gradient() zum Wechseln

Natürlich sind neben mask: linear-gradient() auch radialer Gradient oder winkliger Gradient möglich. Dasselbe Prinzip gilt auch für Winkelgradienten:

@keyframes maskRotate {
    @für $i von 0 bis 100 {
        #{$i}% {
            Maske: Kegelschnitt-Farbverlauf (#000 #{$i - 10 + '%'}, transparent #{$i + '%'}, transparent);
        }
    }
}

Sie können die winkelmäßige, schrittweise Anzeige/Umschaltung von Bildern erreichen:

CodePen-Demo – MASK-Kegelschnitt-Gradientenübergang

Zu dieser Technik gibt es noch mehr ausführliche Beispiele im Artikel von Zhang Xinxu, den Sie hier lesen können:

Sie können die von Ihnen verwendeten CSS-Übergangsanimationen ändern

Mit dieser Technik können wir viele interessante Bildeffekte erzielen. So was:

Maskenkollisionsfilter und Mischmodus

Fahren Sie mit dem nächsten Schritt fort. Es gibt viele interessante Eigenschaften in CSS, die in Kombination mit Filtern und Mischmodi für noch mehr Glanz sorgen.

Maske & Filter: Kontrast()

Zunächst verwenden wir mehrere radiale Farbverläufe, um ein Bild wie dieses zu erstellen.

{
  Hintergrund: radialer Farbverlauf (#000, transparent);
  Hintergrundgröße: 20px 20px;
} 

Es sieht nicht besonders aus, also verwenden wir filter: contrast() contrast filter, um es zu ändern. Der Code sieht wahrscheinlich so aus:

html, Text {
    Breite: 100 %;
    Höhe: 100%;
    Filter:Kontrast(5);
}
 
div {
    Position: relativ;
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: #fff;
     
    &::vor {
        Inhalt: "";
        Position: absolut;
        oben: 0; rechts: 0; unten: 0; links: 0;
        Hintergrund: radialer Farbverlauf (#000, transparent);
        Hintergrundgröße: 20px 20px;
    }
}

Sie können eine Grafik wie diese erhalten und den Kontrastfilter verwenden, um die Grafik sehr scharf zu machen.

Zu diesem Zeitpunkt überlagern wir verschiedene Maskenmasken. Sie können eine Vielzahl interessanter Grafikeffekte erzielen.

Körper {
    Filter:Kontrast(5);
}
 
div {
    Position: relativ;
    Hintergrund: #fff;
     
    &::vor {
        Hintergrund: radialer Farbverlauf (#000, transparent);
        Hintergrundgröße: 20px 20px;
      + Maske: linearer Farbverlauf (-180 Grad, RGBA (255, 255, 255, 1), RGBA (255, 255, 255, .5));
    }
} 

CodePen-Demo – Verwenden von Masken mit Filtern

Wir überlagern eine lineare Verlaufsmaske linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5)) . Beachten Sie, dass beide Verlaufsfarben transparent sind.

Oder wechseln Sie zu einem radialen Farbverlauf:

{
    Maske: sich wiederholender radialer Farbverlauf (Kreis bei 35 % 65 %, Nr. 000, RGBA (0, 0, 0, 0, 0,5), Nr. 000 25 %);
} 

CodePen-Demo – Verwenden von Masken mit Filtern

Okay, als nächstes fügen wir, ähnlich wie oben, eine Animation hinzu.

div {
    ...
     
    &::vor {
        Hintergrund: radialer Farbverlauf (#000, transparent);
        Hintergrundgröße: 20px 20px;
        Maske: sich wiederholender radialer Farbverlauf (Kreis bei 35 % 65 %, Nr. 000, RGBA (0, 0, 0, 0, 0,5), Nr. 000 25 %);
        Animation: MaskMove 15 s unendlich linear;
    }
}
 
@keyframes maskMove {
    @für $i von 0 bis 100 {
        #{$i}% {
            Maske: sich wiederholender radialer Farbverlauf (Kreis bei 35 % 65 %, #000, rgba (0, 0, 0, .5), #000 #{$i + 10 + '%'});
        }
    }
}

Schauen Sie sich das an, wir können einen sehr coolen Animationseffekt erzielen:

CodePen-Demo – Verwenden von Masken mit Filtern, Kontrast und Animation

Denken Sie daran, den filter: hue-rotate() ? Indem wir dies hinzufügen, können wir auch die Farben ändern.

CodePen-Demo – Verwenden einer Maske mit Filterkontrast und Animation 2

Maske und Filter: Kontrast () und Mischmodi

Als nächstes fügen wir den Mischmodus hinzu.

Beachten Sie, dass die Hintergrundfarbe unseres Containers oben tatsächlich Weiß ist #fff .

Wir können verschiedene Effekte erzeugen, indem wir eine weitere Ebene einbetten, eine Container-Hintergrundfarbe hinzufügen und dann den Mischmodus überlagern.

Rekonstruieren Sie die Struktur, ohne mask hinzuzufügen. Der endgültige Pseudocode lautet wie folgt:

<div Klasse="wrap">
    <div Klasse="inner"></div>
</div>

.wickeln {
    Position: relativ;
    Höhe: 100%;
    Hintergrund: linearer Farbverlauf (45 Grad, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}
 
.inner {
    Höhe: 100%;
    Hintergrund: #000;
    Filter: Kontrast (700 %);
    Mix-Blend-Modus: Multiplizieren;
     
    &::vor {
        Inhalt: "";
        Position: absolut;
        oben: 0; rechts: 0; unten: 0; links: 0;
        Hintergrund: radialer Farbverlauf (#fff, transparent);
        Hintergrundgröße: 12px 12px;
    }
}

Das prinzipielle Beispieldiagramm sieht wie folgt aus:

Wir können den folgenden Effekt erzielen:

OK, in diesem Schritt wurde die Maske noch nicht angewendet, fügen wir die Maske hinzu.

.wickeln {
    Hintergrund: linearer Farbverlauf (45 Grad, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}
 
.inner {
    ...
    Filter: Kontrast (700 %);
    Mix-Blend-Modus: Multiplizieren;
     
    &::vor {
        Hintergrund: radialer Farbverlauf (#fff, transparent);
        Hintergrundgröße: 12px 12px;
      + Maske: linearer Farbverlauf (#000, rgba (0, 0, 0, .5));
    }
} 

CodePen-Demo – Maske, Filter und Mischmodus

Der tatsächliche Effekt ist viel besser als im Screenshot. Sie können auf Demo klicken, um ihn anzuzeigen.

Natürlich ist hier der mix-blend-mode: multiply überlagert. Sie können andere Mischmodi ausprobieren, um andere Effekte zu erzielen.

Fügen Sie beispielsweise mix-blend-mode: difference usw. hinzu:

Es gibt noch weitere interessante Überlagerungen und interessierte Schüler müssen noch mehr selbst ausprobieren.

Maske und Bilder

Die wesentlichste Funktion der Maske besteht natürlich immer noch darin, auf das Bild einzuwirken. Die oben gezogenen wichtigen Schlussfolgerungen sind:

Die überlappenden Teile des Bildes und der durch die Maske erzeugte transparente Farbverlauf werden transparent.

Es kann auch auf Bilder angewendet werden, die über das Maskenattribut übergeben werden. Das heißt, die Maske kann in das Bildmaterial übergeben werden und der transparente überlappende Teil des Hintergrundbildes und des Maskenbildes wird transparent.

Mit dieser Technik können Sie sehr coole Übergangsanimationen erstellen:

Tatsächlich verwenden wir hier hauptsächlich ein solches Bild in der Maske:

Anschließend wird eine Einzelbildanimation verwendet, um die Maske jedes Einzelbilds schnell zu wechseln:

.img1 {
    Hintergrund: URL (Bild1.jpg) keine Wiederholung links oben;
}
 
.img2 {
    Maske: URL (https://i.imgur.com/AYJuRke.png);
    Maskengröße: 3000 % 100 %;
    Animation: maskMove 2s Schritte (29) unendlich;
}
 
.img2::vor {
    Hintergrund: URL (Bild2.jpg) keine Wiederholung links oben;
}
 
@keyframes maskMove {
    aus {
        Maskenposition: 0 0;
    }
    Zu {
        Maskenposition: 100 % 0;
    }
}

CodePen-Demo – Maskenübergangsanimation

Natürlich können auch verschiedene Animationen hinzugefügt werden. Dies wurde oben bereits vielfach demonstriert und interessierte Studierende können es selbst ausprobieren.

endlich

Allerdings ist die Maske eigentlich immer noch ein relativ unpopuläres Attribut. Im Tagesgeschäft gibt es nicht viele Möglichkeiten, es anzuwenden.

Und die Kompatibilität ist nicht besonders gut. Öffnen Sie MDN und Sie werden sehen, dass es neben der Maske selbst viele maskenbezogene Eigenschaften gibt, die meisten davon befinden sich jedoch noch im Laborstadium. In diesem Artikel wird die Maske selbst nur kurz vorgestellt. Einige maskenbezogene Eigenschaften werden in einem anderen Artikel erläutert.

Trotzdem finde ich, dass die Maske aufgrund der Eigenschaft selbst immer noch sehr interessant ist und CSS mehr Möglichkeiten bietet.

Dies ist das Ende dieses Artikels mit der ausführlichen Erklärung des wunderbaren CSS-Attributs MASK. Weitere relevante Inhalte zum CSS-Attribut MASK finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!