CSS-Maskierung

Zwei häufig verwendete Operationen in der Computergrafik sind Beschneiden und Maskieren. Beide Operationen verbergen visuelle Teile eines Elements.Wenn Sie zuvor mit SVG oder HTML Canvas gearbeitet haben, sind diese Vorgänge für Sie wahrscheinlich nicht neu. Clipping definiert den Bereich eines Elements, der sichtbar ist. Alles in dieser Region wird nicht gerendert - es wird "abgeschnitten". Beim Maskieren wird ein Maskenbild mit dem Element zusammengesetzt, was sich auf den Alphakanal dieses Elements auswirkt. Teile eines maskierten Elements werden ganz oder teilweise transparent.Die neue CSS-Maskierungsspezifikation zielt darauf ab, diese beiden Operationen in die HTML-Welt zu bringen.

Ausschnitt in CSS 2.1

CSS 2.1 hat die clipEigenschaft bereits angegeben . Diese Eigenschaft ist auf rechteckiges Ausschneiden beschränkt, wobei die rect()Funktion vier Abstandsargumente für den oberen, rechten, unteren und linken Rand verwendet. Der nervige Teil: Die clipEigenschaft gilt ausschließlich für absolut positionierte Elemente. Die Eigenschaft wird bei anderen Elementen einfach ignoriert.

CSS:

    img {
  clip-path: url(#clipping);
}

HTML:

<img src="bilder/image.jpg" width="568">

Die clip Eigenschaft ist auch in SVG auf bestimmte Elemente beschränkt. Dies ist ein Grund, warum die SVG-Spezifikation die clip-pathEigenschaft hinzugefügt hat, die jetzt durch CSS-Maskierung angepasst wird.

Die Clip-Pfad-Eigenschaft

Die clip-path Eigenschaft kann auf alle HTML-Elemente, SVG-Grafikelemente und SVG-Containerelemente angewendet werden. Es verweist entweder auf ein <clipPath> Element oder auf eine der mit CSS-Ausschlüssen eingeführten Grundformen .

Das <clipPath> Element nimmt ein beliebiges grafisches Element aus SVG und verwendet es als Beschneidungsbereich. Grafische Elemente in SVG sind <rect>, <circle>, <ellipse>, <path>, <polygon>, <image>und <text>. <clipPath>ermöglicht auch das Kombinieren mehrerer grafischer Elemente. Die Vereinigung aller Formen wird dann als Beschneidungsbereich verwendet. Das folgende Beispiel zeigt die Verwendung von <clipPath>:

CSS:

  img {
  clip-path: url(#clipping);
}   

HTML:

Grundformen erfordern hingegen kein SVG-Markup. Sie wurden hinzugefügt, clip-pathum einfache Kurzfunktionen für einfache Beschneidungsvorgänge bereitzustellen.

• inset(<top> <right> <bottom> <left> [ round <border-radius> ]?)definiert ein Rechteck, ähnlich der rect()Funktion von clip. Die Parameter beschreiben die Offsets von oben, rechts, unten und links. Die Funktion verfügt auch über optionale Radiusparameter mit der Syntax der Eigenschaft border-radius für gerundete Rechtecke .
• circle(<r>? [ at <position> ]?)definiert einen einfachen Kreis mit einem optionalen Radiusparameter. Zusätzlich beschreibt der optionale Positionsparameter den Mittelpunkt des Kreises. <position>hat die gleiche Syntax wie die Eigenschaft background-position .
• ellipse(<rx> <ry>? [ at <position> ]?)Definiert eine Ellipse mit einem horizontalen und einem optionalen vertikalen Radius sowie einem Mittelpunkt basierend auf der Syntax der Eigenschaft " Hintergrundposition ".
• polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) Definiert ein Polygon basierend auf den Punktlistenparametern.

Schlüsselwörter wie content-box, border-box, margin-boxkann mit einfachen Formen zu Position und Größe des angegebenen Beschneidungspfad in Kombination verwendet werden. Schlüsselwörter, die ohne Grundformen definiert sind, fungieren selbst als Beschneidungspfad, wobei die border-radiusEigenschaft berücksichtigt wird.

Das CSS-Markup kann wie folgt aussehen:

img {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}   

Das Ausschneiden kann für die Präsentation visueller Inhalte sehr nützlich sein. In den folgenden Beispielen werden verschiedene Beschneidungsvorgänge auf Bilder angewendet.

Das Abschneiden kann aber auch für das UI-Design nützlich sein. Im folgenden Beispiel zeigt ein Chevron eine fortlaufende Liste an.

Scrollen Sie durch die Liste, um den Effekt zu sehen.

Beachten Sie, dass clip-path(sowie clip) alle Aspekte eines Elements, einschließlich Hintergründe, Rahmen und Bildlaufmechanismen, ausgeschnitten werden.

Animation des Clip-Pfades

Sowohl Grundformen als auch der Inhalt eines <mask>Elements können animiert werden. Das folgende Beispiel enthält eine Sternformanimation:

Hier ist der Quellcode für die Animation der Grundform:

img:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}
    

Maskierung

Die zweite Operation nach dem Abschneiden ist das Maskieren. Ein Maskenbild wird als eine Art "Farbnetz" verwendet, um die visuellen Teile eines Elements zu filtern. In den folgenden Abschnitten werde ich den Unterschied zwischen zwei Arten von Masken erläutern: der Luminanzmaske und der Alphamaske.

Luminanzmaske

Bei Luminanzmasken wird das Maskenbild zuerst in ein gerastertes Graustufenbild umgewandelt (sofern es noch nicht in Graustufen vorliegt). Je "heller" ein Teil des Maskenbildes ist, desto mehr des maskierten Elements ist an derselben Position sichtbar. Zum Beispiel zeigt Schwarz vollständig transparent an, Weiß zeigt vollständig undurchsichtig an und ein Grauton zeigt teilweise Transparenz des Elements an.

Alpha-Maske

Die Alpha-Maskierung verwendet das gleiche Prinzip wie die Luminanzmaskierung. Der Unterschied zur Luminanzmaskierung: Nur der Alphakanal des Bildes ist wichtig. Je weniger undurchsichtig ein Teil des Maskenbildes ist, desto weniger sichtbar ist das Element an derselben Position.

Zusammenfassend lässt sich sagen, dass beide Maskierungstypen die Transparenzstufe des Elements beeinflussen. Das Bild unten ist das Ergebnis beider Maskierungsvorgänge oben.

Die CSS-Maskierungsspezifikation definiert zwei Abkürzungseigenschaften für die Maskierung: maskund mask-border.

Die Maskeneigenschaft

Die maskEigenschaft kombiniert die Bildmaskierung mit dem Verweisen auf eine Maske wie folgt.

Der erste Weg ist die Verwendung der mask-image, mask-repeat, mask-position, mask-clip, mask-originund mask-sizeEigenschaften, die zu ihrem Gegenstück ähnlich spezifiziert sind backgroundmit background-image. Wie für background-imageist es möglich, mehrere Maskenquellen zu definieren. Jede Maskenquelle ist ein von CSS3-Bildern definiertes Bild . Alle Maskenquellen werden zu einem einzigen Maskenbild kombiniert. Dieses Maskenbild wird verwendet, um das Element und seinen Inhalt wie oben beschrieben zu maskieren. Mögliche Bildwerte sind jedes gerasterte Bildformat wie JPG oder PNG, SVG-Grafiken oder vordefinierte Bildwerte wie CSS-Verläufe.

Das erste obige Maskierungsbeispiel kann einfach mit dem folgenden Code realisiert werden:

img {
  mask-image: url(mask.svg);
}

Wenn die Maskenquelle auf die Größe des Inhalts gestreckt werden soll, verwenden Sie einfach die Shorthand-Eigenschaft mask , wie Sie es für den Hintergrund mit der Shorthand-Eigenschaft tun würden background :

img {
  mask: url(mask.svg) top left / cover;
}

    

Der zweite Weg verweist auf ein <mask>Element gemäß SVG 1.1. Ein <mask>Element nimmt ein beliebiges grafisches Element sowie Gruppierungselemente aus SVG und erstellt daraus das Maskenbild.

CSS:

img {
  mask: url(#masking);
}

HTML:

<img src="image.jpg" width="568">
    

Welches würde wie das folgende Bild aussehen:

Die Maskenrand-Eigenschaft

Mit dieser mask-borderEigenschaft können Sie ein Maskenbild in 9 Kacheln unterteilen: vier Ecken, vier Kanten und das Mittelstück. Diese Teile können auf verschiedene Weise in Scheiben geschnitten, skaliert und gedehnt werden, um der Größe des Maskenbildbereichs zu entsprechen. Die Eigenschaft übernimmt die Funktionalität von border-imageund ermöglicht eine leistungsstarke Maskierung an den Rändern und Ecken des Inhalts. Das folgende Beispiel zeigt das Verhalten der Eigenschaft:

img {
  -webkit-mask-box-image: url("stamp.svg") 35 repeat;
  mask-border: url("stamp.svg") 35 repeat;
}

Das folgende Bild wird als Maskenbild verwendet und in 9 Teile unterteilt:

Browser-Unterstützung

Der interessante Teil ist die Unterstützung in Browsern. Wenn es um die Erkennung von Merkmalen geht, wird es irgendwie haarig. Alle Browser unterstützen clipwie angegeben. Alle Browser unterstützen die maskund die clip-pathEigenschaften, wie in SVG 1.1 für SVG-Elemente angegeben. Mit nur einem Browser können Sie die Eigenschaften auf HTML-Elemente anwenden: Firefox (eine Art). Kommen wir zu weiteren Details. Die clip-pathund die maskEigenschaft mit Verweisen auf und Elementen funktionieren sofort in Firefox. Beide Eigenschaften sind nicht fixiert. Auf der anderen Seite, mask-image, mask-borderund die damit verbundene Eigenschaften werden nicht unterstützt. Grundformen zum Ausschneiden werden ebenfalls nicht unterstützt. Blink und WebKit - basierten Browser wie Chrome und Safari, haben Unterstützung mask-image, mask-border(derzeit genannt -webkit-mask-box-imagein beiden Implementierungen) und die damit verbundene Eigenschaften. Alle von ihnen haben ein Präfix und können nur auf HTML-Elemente angewendet werden. Die nächtlichen Builds beider Browser unterstützen bereits die vorangestellte -webkit-clip-pathEigenschaft mit Grundformen und referenzierenden Elementen in HTML. WebKit unterstützt die zusätzlichen Schlüsselwörter für die Boxgröße. Wenn Sie das Ausschneiden und Maskieren ausprobieren möchten, stellen Sie sicher, dass Sie die Eigenschaften mit und ohne Präfix verwenden. Die nicht fixierten Eigenschaften müssen die Referenz von oder im Moment verwenden.

<img id="image" src="bilder/coolImage.jpg" width="400">


    

Seien Sie jedoch vorsichtig, andere Browser verfügen noch nicht über weitere Maskierungs- oder Beschneidungsfunktionen für HTML-Elemente.

Wissen

Vielen Dank an Arno Gourdol für die Bereitstellung des Bildes aus dem Humayun-Grab .