Wie man CSS- und SVG-Schnitt- und Maskierungstechniken verwendet

SVGs eignen sich hervorragend für die Arbeit im Web, und das Zuschneiden und Maskieren bietet einige interessante Möglichkeiten, Teile Ihrer Webgrafiken ein- oder auszublenden. Die Verwendung dieser Techniken ermöglicht auch mehr Flexibilität bei Ihren Designs, da Sie keine manuellen Änderungen vornehmen und neue Bilder erstellen müssen – alles wird mit Code erledigt. Durch die Verwendung einer Kombination aus CSS-Clipping- und Maskierungstechniken haben Sie viele Optionen für Ihre Website-Grafiken.

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

Clipping-Grundlagen

Wenn Sie jemals Photoshop verwendet haben, sind Sie wahrscheinlich bereits mit Schnittmasken vertraut. Es ist ein ähnlicher Ansatz. Beim Zuschneiden wird eine Vektorform wie ein Kreis oder ein Dreieck auf ein Bild oder ein Element gelegt. Jeder Teil des Bildes hinter der Form wird sichtbar sein, 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 als Beschneidungspfad bezeichnet, nicht zu verwechseln mit der herabgesetzten clip . Sie erstellen den Clip-Pfad mithilfe der Eigenschaft clip-path .

Hinweis: Versuchen Sie dies nicht auf Ihrer Live-Website

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 zu verstehen, aber alles außerhalb des Pfads wird ausgeblendet, während alles innerhalb des Pfads sichtbar ist. Um ein besseres Verständnis zu bekommen und dies selbst auszuprobieren, sehen Sie sich das Beispiel auf CodePen an.

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

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

Dies ist das CSS, um das Clipping zu bewirken:

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

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

Clippy-Tool

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

Maskierungsgrundlagen

Die Maskierung erfolgt mit einem PNG-Bild, einem CSS-Verlauf oder einem SVG-Element, um einen Teil eines Bildes oder ein anderes Element auf der Seite auszublenden. Wir werden uns auf SVG-Grafiken konzentrieren, aber denken Sie daran, dass dies auch mit anderen Bildtypen oder -stilen möglich ist.

Die Maskeneigenschaft und das Maskenelement

Nur als Auffrischung zur besseren Veranschaulichung, es ist wichtig, im Hinterkopf zu behalten, dass das maskierte Element das „Original“-Bild (vor dem Anwenden der Maske) ist. Möglicherweise möchten Sie nicht das gesamte Bild sehen, daher wird das Ausblenden von Teilen davon mit der CSS- mask durchgeführt. Die mask ist die CSS-Kurzschrift für eine Gruppe einzelner Eigenschaften, auf die wir gleich 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 in einer SVG-Grafik

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

Es mag auf den ersten Blick etwas komplex sein, aber es funktioniert alles zusammen, um das darunter liegende Bild zu maskieren. Wir haben ein tatsächliches Bild als Hintergrund, wo kommt also das SVG 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 masked-element in unserem CSS.

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

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

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

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

Beachten Sie einen Farbverlauf in der Kreisform? Es wurde ein Farbverlauf angewendet und die Kreisform für die Maske festgelegt.

<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>

SVG-Textmaskierung

Die Textmaskierung kann einige ziemlich coole Dinge tun, 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 ist eine grundlegende Erklärung dessen, was vor sich geht. Innerhalb 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 hinter dem ovalen Bereich scheint durch den Text hindurch und vermittelt ein ausgeschnittenes Gefühl.

<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>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

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 Wert gesetzt werden. Das mask-image kann ein PNG, SVG oder ein Verweis auf ein SVG- mask sein, wie ich im vorherigen Beispiel demonstriert habe.

Da das Maskieren verwendet wird, um 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 versteckt.

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

Bisher gab es viel SVG-Code, aber dieses Beispiel ist etwas anders, da ein Rasterbild mit einem SVG maskiert wird.

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

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

Hier ist es auf Codepen.

Kombinieren mehrerer Maskenbilder

Gerade als Sie dachten, Maskieren könnte nicht besser werden, gibt es die Option, mehr als eine Maskenbildebene festzulegen. Alles, was Sie tun müssen, ist, zwei URL-Werte (oder mehr, wenn Sie ehrgeizig sind) hinzuzufügen, die durch ein Komma getrennt sind.

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

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

Alles, was Sie tun müssen, ist, die beiden Werte (mit einem Komma) zu addieren, und jetzt gibt es zwei kombinierte Masken, wodurch die Maskierungsmöglichkeiten endlos werden.

Hier ist es auf Codepen.

Erstellen Sie einen einfachen Farbverlauf mit mask-image

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

In diesem Beispiel wurde eine Klasse auf einen Verlaufssatz als mask-image Eigenschaft angewendet. Mit dieser einfachen Deklaration war es einfach, eine Verlaufsmaske auf dem Bild zu erstellen.

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

Sehen Sie dies auf Codepen.

Die Mask-Repeat-Eigenschaft

Sobald Sie eine Maske erstellt haben, ist es ziemlich einfach, weitere zu erstellen. Dies ist wirklich praktisch, wenn Sie ein benutzerdefiniertes Muster erstellen möchten. Die Eigenschaft mask-repeat 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 die Größe und die Art der Maskenwiederholung, die deklariert werden muss, damit das perfekte Muster erstellt wird.

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

mask-size: 200px;
webkit-mask-size: 200px;

Es gibt ein paar weitere Maskenwiederholungsoptionen, wenn Sie nach einem anderen Effekt für das Muster suchen:

• repeat-x wiederholt entlang der x-Koordinate.
• Repeat-y wiederholt die y-Koordinate nach unten.
• space wiederholt sich und breitet sich in der verfügbaren Fläche aus.
• round wiederholt sich einige Male über den verfügbaren Bereich (Skalieren hilft dabei, den Raum bei Bedarf zu füllen)

Browserunterstü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 übereinstimmt. Clipping wird mehr unterstützt als Maskierung, aber Internet Explorer unterstützt Clipping nicht vollständig. Die aktuelle Browserunterstützung für CSS-Masken ist ebenfalls ziemlich begrenzt, daher wird empfohlen, sie als Verbesserung 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 die Anzeige von Inhalten.

Um die Dinge auszuprobieren und zu sehen, ob Ihre Masken und Ausschnitte unterstützt werden, würde ich empfehlen, ein JSFiddle oder Codepen zu erstellen und es 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, dem Spiel voraus zu sein, und sobald der Support etablierter ist, werden Sie genau wissen, wie Sie Ihre Grafik revolutionieren können. Verweisen Sie im Zweifelsfall unbedingt auf die vertrauenswürdige Can I Use.

Nach dem Experimentieren mit diesen Beispielen sollte dies eine gute Einführung in das Maskieren und Beschneiden bieten. Obwohl die Browserunterstützung derzeit begrenzt ist, wird dies in Zukunft wahrscheinlich eine gängige Praxis werden. Es macht immer Spaß, darüber nachzudenken, wie diese Techniken verwendet werden können, um interessante Visuals zu erstellen. Die Zukunft der Webgrafik wird uns weniger abhängig von Bildbearbeitungsprogrammen machen und effektivere Möglichkeiten bieten, Bilder direkt im Browser zu erstellen und zu ändern.

Weiter: Entwerfen Sie Websites noch schneller!

Sie verstehen die Bedeutung eines optimierten Webdesign-Prozesses. Alles, was Sie tun können, um eine Website schneller zu gestalten, bedeutet mehr Geld in Ihrer Tasche. Aus diesem Grund hat Flywheel unsere Hosting-Plattform entwickelt, damit Sie Zeit sparen und Ihre beste Arbeit leisten können! Mit diesen Webdesign-Tipps und -Tools können Sie mehr Projekte abschließen und mehr Zeit damit verbringen, Ihr Unternehmen auszubauen.

In diesem Leitfaden behandeln wir Tipps, wie Sie schneller arbeiten und Ihren WordPress-Workflow beschleunigen können. Entdecken Sie, wie Sie von der anfänglichen Site-Einrichtung bis zur Live-Schaltung stundenlange Arbeit von Ihrer täglichen Arbeit verkürzen können! Laden Sie es noch heute herunter.

Dieser Artikel wurde ursprünglich am 3. August 2016 veröffentlicht. Er wurde zuletzt am 6. November 2018 aktualisiert.