So verwenden Sie CSS- und SVG-Beschneidungs- und Maskierungstechniken

SVGs eignen sich hervorragend für die Arbeit im Web, und das Ausschneiden und Maskieren bietet einige interessante Möglichkeiten, Teile Ihrer Webgrafiken anzuzeigen oder auszublenden. Die Verwendung dieser Techniken ermöglicht auch mehr Flexibilität bei Ihren Designs, da Sie keine manuellen Änderungen vornehmen und keine neuen Bilder erstellen müssen – alles erfolgt mit Code. Durch die Verwendung einer Kombination aus CSS-Clipping- und Maskierungstechniken stehen Ihnen zahlreiche Optionen für die Grafiken Ihrer Website zur Verfügung.

Zur Verdeutlichung: Maskieren und Ausschneiden sind zwei verschiedene Möglichkeiten, Bilder mit CSS zu manipulieren. Beginnen wir mit dem Ausschneiden.

Clipping-Grundlagen

Wenn Sie jemals Photoshop verwendet haben, sind Sie wahrscheinlich bereits mit Schnittmasken vertraut. Es ist ein ähnlicher Ansatz. Beim Ausschneiden wird eine Vektorform wie ein Kreis oder ein Dreieck über ein Bild oder ein Element gelegt. Jeder Teil des Bildes hinter der Form wird sichtbar, während alles außerhalb der Grenzen der Form ausgeblendet wird.

Wenn sich beispielsweise eine dreieckige Schnittmaske über einem Bild eines Waldes befindet, sehen Sie das Waldbild innerhalb der Dreiecksform. Die Grenze der Form wird Clip-Pfad genannt und ist nicht mit der veralteten clip Eigenschaft zu verwechseln. Sie erstellen den Clippfad mithilfe der Eigenschaft clip-path .

Hinweis: Versuchen Sie dies nicht auf Ihrer Live-Site

Denken Sie daran: Sie sollten den Code niemals direkt auf Ihrer Website ändern, um sicherzustellen, dass nichts kaputt geht. Unsere kostenlose lokale Entwicklungs-App Local hilft Ihnen beim Einrichten einer Testumgebung, in der Sie diesem Tutorial sicher folgen können.

Clipping in Aktion

Clips sind immer Vektorpfade. Es kann verwirrend sein, es zu verstehen, aber alles außerhalb des Pfades wird ausgeblendet, während alles innerhalb des Pfades sichtbar ist. Um ein besseres Verständnis zu erhalten und dies selbst zu testen, sehen Sie sich das Beispiel auf CodePen an.

Hier ist ein Ausschnitt der HTML-Struktur aus dem Beispiel:

 [html]

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<Polygonpunkte="0 0,87, 0,5 0, 0,5 0, 1 0,87" />
		</clipPath>
	</defs>
</svg>

[/html]

Dies ist das CSS, um das Ausschneiden zu ermöglichen:

 [css]

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: Polygon(0 % 87 %, 50 % 0 %, 50 % 0 %, 100 % 87 %);
	Clip-Pfad: Polygon (0 % 87 %, 50 % 0 %, 50 % 0 %, 100 % 87 %);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	Clip-Pfad: url("#polygon-clip-triangle-equilateral");
}

[/css]

Sie können sehen, wo im HTML auf die clipPath ID verwiesen wird und wie die clip-path URL zum Ausschneiden verwendet wird.

Clippy-Tool

Clippy ist ein großartiges Tool zum Generieren von CSS-Clippfaden. Es gibt eine große Auswahl an Starterformen und -größen, die individuell angepasst werden können.

Maskierungsgrundlagen

Die Maskierung erfolgt mithilfe eines PNG-Bilds, eines CSS-Verlaufs oder eines SVG-Elements, um einen Teil eines Bilds oder eines anderen Elements auf der Seite auszublenden. Wir werden uns auf SVG-Grafiken konzentrieren, aber bedenken Sie, dass dies auch mit anderen Bildtypen oder -stilen möglich ist.

Die Maskeneigenschaft und das Maskenelement

Zur Erinnerung: Es ist wichtig zu bedenken, dass es sich bei dem maskierten Element um das „Originalbild“ (vor der Anwendung der Maske) handelt. Da Sie möglicherweise nicht das gesamte Bild sehen möchten, können Sie Teile davon mit der CSS- mask ausblenden. Die mask ist die CSS-Abkürzung für eine Gruppe einzelner Eigenschaften, auf die wir gleich näher eingehen werden. Das SVG-Element <mask> wird innerhalb einer SVG-Grafik verwendet, um Maskierungseffekte hinzuzufügen. In diesem Beispiel ist die Maske ein Kreis und es wird auch ein Farbverlauf angewendet.

Verwenden des SVG-Maskenelements auf einer SVG-Grafik

Um ein Gefühl für die SVG- <mask> zu bekommen, maskieren wir sie mit einer SVG-Grafik.

Auf den ersten Blick mag es etwas komplex sein, aber alles zusammen trägt dazu bei, das zugrunde liegende Bild zu maskieren. Wir haben ein tatsächliches Bild als Hintergrund. Wo kommt also die SVG-Datei ins Spiel? Im Gegensatz zu den Clipping-Beispielen befindet sich dieses Hintergrundbild technisch gesehen innerhalb eines SVG-Elements. Wir verwenden CSS, um diese Maske auf das Bild anzuwenden. Die Eigenschaften stammen aus dem SVG-Maskenelement und wir geben ihm in unserem CSS die ID masked-element .

Um dies in Aktion zu sehen, sehen Sie sich dieses Codepen-Beispiel an. Hier ist der Arbeitscode für die maskierte SVG-Grafik:

 [html]

<svg class="maskiertes-element" width="300" Höhe="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

[/html] 

Mit diesem CSS geben wir an, wo die Maske zu finden ist. Es wird nach der ID von #mask-this:

 [css]
/* Hier ist das CSS zum Maskieren */
.masked-element image {
  Maske: URL(#mask1);
}

[/css] 

Ist Ihnen ein Farbverlauf in der Kreisform aufgefallen? Es wurde ein Farbverlauf angewendet und die Kreisform für die Maske festgelegt.

 [html]

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0,50" cy="0,50" r="0,50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

[/html]

SVG-Textmaskierung

Textmaskierung kann einige ziemlich coole Dinge bewirken, z. B. das Anzeigen eines Bildes durch einen Textblock. Die gute Nachricht ist, dass ein Textelement innerhalb einer SVG-Maske verwendet werden kann. Da die Browserunterstützung in Zukunft zunimmt, könnte dies eine wirklich interessante Möglichkeit sein, Bilder und Typografie zu kombinieren.

Hier finden Sie eine grundlegende Erklärung dessen, was vor sich geht. In der SVG-Maske befindet sich ein SVG-Textelement. Wir haben den RGB-Wert für Weiß angegeben, wodurch der ovale Bereich um den maskierten Text entsteht. Alles, was sich hinter dem ovalen Bereich befindet, scheint durch den Text hindurch und vermittelt den Eindruck einer Aussparung.

 [html]

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

[/html]

 [css]

/* Hier ist das CSS für das Textelement */
#meinText {
Schriftgröße: 125px;
Schriftstil: fett;
füllen: #000;
}

/* Hier ist das CSS zum Maskieren */
.maskiert {
mask: url("#myMask");
}

[/css]

Um es vollständig zu verstehen, ist es hilfreich, mit dem Code herumzuspielen und zu experimentieren. Versuchen Sie, in diesem Codepen Farben zu ändern, Text zu ändern und Größen anzupassen.

Die Mask-Image-Eigenschaft

Ein Bild kann deklariert werden und das mask-image kann auf einen URL-Wert gesetzt werden. Das mask-image kann ein PNG-, SVG- oder ein Verweis auf ein SVG- mask sein, wie ich im vorherigen Beispiel gezeigt habe.

Da Maskierung dazu dient, Teile eines Objekts oder Elements teilweise oder vollständig auszublenden, benötigen Sie zunächst einen Bildlink zu einer Datei für das Element, das maskiert werden soll. So sieht dieses Bild aus. Es ist farbenfroh, um deutlich zu machen, welchen Teil die Maske zeigt und welchen Teil sie verbirgt.

 [css]

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Maskiertes Bild">

[/css] 

Bisher gab es eine Menge SVG-Code, aber dieses Beispiel ist etwas anders, da es ein mit SVG maskiertes Rasterbild geben wird.

 [css]

.example-mask {
  Maskenbild: URL(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  Maskenmodus: Alpha;
  Webkit-Maskenmodus: Alpha;
  Maskenwiederholung: keine Wiederholung;
  Webkit-Maskenwiederholung: keine Wiederholung;
  Maskengröße: 200px;
  Webkit-Maskengröße: 200px;
  Maskenposition: Mitte;
  Webkit-Maskenposition: Mitte;
}

[/css]

In der mask-image Eigenschaft wird die Maskenform deklariert. In diesem Fall ist das Maskenbild eine SVG-Grafik. Durch die Angabe des URL-Links wird die Maske erstellt.

Hier ist es auf Codepen.

Kombinieren mehrerer Maskenbilder

Gerade als Sie dachten, die Maskierung könnte nicht noch besser werden, gibt es die Option, mehr als eine Maskenbildebene festzulegen. Sie müssen lediglich zwei URL-Werte (oder mehrere, wenn Sie ehrgeizig sind) durch ein Komma getrennt hinzufügen.

Um die einfache Maske von oben zu erweitern, wird der Originalgrafik ein Pfeil hinzugefügt. So werden zwei Masken kombiniert.

 [css]

.combined-mask {
   Maskenbild: URL (https://linktoimage.com/arrow-01.svg), URL (https://linktoimage.com/browser-icon-01.svg);
  Webkit-Maskenbild: URL (https://linktoimage.com/arrow-01.svg), URL (https://linktoimage.com/browser-icon-01.svg);
}

[/css] 

Sie müssen lediglich die beiden Werte addieren (mit einem Komma) und schon gibt es zwei kombinierte Masken, wodurch die Maskierungsmöglichkeiten endlos sind.

Hier ist es auf Codepen.

Erstellen Sie einen einfachen Farbverlauf mit mask-image

Nicht alle Masken müssen eine komplexe Form haben. Manchmal ist es nicht ein bestimmtes Bild, sondern eine einfache Maske wie ein Farbverlauf. Wenn Sie nach einer schnellen Möglichkeit suchen, dies zu erreichen, ist die mask-image Eigenschaft eine Option, die ziemlich einfach zu implementieren ist.

In diesem Beispiel wurde eine Klasse auf einen Farbverlauf angewendet, der als mask-image Eigenschaft festgelegt wurde. Mit dieser einfachen Deklaration war es einfach, eine Verlaufsmaske für das Bild zu erstellen.

 [css]

Maskenbild: linearer Farbverlauf (schwarz, weiß, transparent);
-webkit-mask-image: linearer Farbverlauf (schwarz, weiß, transparent);

[/css] 

Sehen Sie sich dies auf Codepen an.

Die Mask-Repeat-Eigenschaft

Sobald Sie eine Maske erstellt haben, können Sie ganz einfach weitere erstellen. Dies ist wirklich praktisch, wenn Sie ein individuelles Muster erstellen möchten. Die mask-repeat-Eigenschaft ermöglicht die Wiederholung der Maske. Wenn Sie schon einmal einen gekachelten Hintergrund erstellt haben, ist dies ähnlich.

Es gibt ein paar wichtige Dinge zu beachten, wie etwa die Größe und die Art der Maskenwiederholung, die angegeben werden muss, damit das perfekte Muster entsteht.

Die mask-size ist ziemlich einfach zu visualisieren, insbesondere mit dem hier eingestellten Pixelwert.

 [css]

Maskengröße: 200px;
Webkit-Maskengröße: 200px;

[/css] 

Wenn Sie nach einem anderen Effekt für das Muster suchen, gibt es noch einige weitere Optionen für die Maskenwiederholung:

• repeat-x wiederholt sich entlang der x-Koordinate.
• Repeat-y wiederholt die Y-Koordinate nach unten.
• space wiederholt sich und breitet sich im verfügbaren Bereich aus.
• round wiederholt sich mehrmals über den verfügbaren Bereich (die Skalierung hilft bei Bedarf dabei, den Raum auszufüllen).

Browser-Unterstützung

Bevor Sie sich auf diese neue Art der Arbeit mit Grafiken festlegen, ist es wichtig zu beachten, dass die Browserunterstützung nicht mit Beschneiden und Maskieren vereinbar ist. Das Ausschneiden wird stärker unterstützt als das Maskieren, Internet Explorer unterstützt das Ausschneiden jedoch nicht vollständig.

Die aktuelle Browserunterstützung für CSS-Masken ist ebenfalls recht begrenzt, daher wird empfohlen, sie als Erweiterung für einige dekorative Elemente zu verwenden. Wenn es vom Browser des Benutzers nicht unterstützt wird, hat es auf diese Weise keinen Einfluss auf das Anzeigeerlebnis von Inhalten.

Um die Dinge auszuprobieren und zu sehen, ob Ihre Masken und Ausschnitte unterstützt werden, empfehlen wir Ihnen, einen JSFiddle oder Codepen zu erstellen und ihn dann in verschiedenen Browsern auszuprobieren. Die Browserunterstützung hat in den letzten Jahren zugenommen und wird irgendwann einen Punkt erreichen, an dem sie vollständig unterstützt wird.

Lassen Sie sich von den Einschränkungen nicht unterkriegen – es ist immer gut, der Konkurrenz einen Schritt voraus zu sein, und wenn der Support erst einmal zum Mainstream gehört, wissen Sie genau, wie Sie Ihre Grafik revolutionieren können. Im Zweifelsfall sollten Sie unbedingt auf die vertrauenswürdige Anleitung „Can I Use“ verweisen.

Nachdem Sie mit diesen Beispielen experimentiert haben, sollte dies eine gute Einführung in die Maskierung und das Clipping bieten. Obwohl die Browserunterstützung derzeit begrenzt ist, wird dies in Zukunft wahrscheinlich zur gängigen Praxis werden.

Es macht immer Spaß, darüber nachzudenken, wie man mit diesen Techniken interessante Bilder erstellen kann. Die Zukunft der Webgrafiken wird uns unabhängiger von Bildbearbeitungsprogrammen machen und effektivere Möglichkeiten ermöglichen, Bilder direkt im Browser zu erstellen und zu ändern.

Wenn Sie all die harte Arbeit, die Sie in Ihre Websites gesteckt haben, wirklich zur Geltung bringen möchten, stellen Sie sicher, dass Sie sich für das bestmögliche WordPress-Hosting mit WP Engine entscheiden!