Pfade, Formen, Zuschneiden und Maskieren

Das Rendern von HTML basiert auf dem Box-Modell, aber es gibt mehr als nur Rechtecke (im Leben und im Webdesign). CSS bietet mehrere Möglichkeiten, um zu ändern, welche Bereiche eines Elements gerendert werden. So können Entwickler Designs erstellen, die alle Formen und Größen unterstützen. Beim Zuschneiden werden geometrische Formen verwendet, während sich die Maskierung auf die Sichtbarkeit auf Pixelebene auswirkt.

Pfade und Formen

In CSS werden Funktionen verwendet, um Formen zu definieren. Allgemeine Informationen zu Funktionen finden Sie im Modul „CSS-Funktionen“. In diesem Abschnitt erfahren Sie, wie Sie Formen in CSS erstellen. In allen folgenden Beispielen werden die Formen verwendet, die Sie mit der Property clip-path erstellen. Dadurch wird der sichtbare Bereich auf das Innere der Form beschränkt. So können sich die Elemente visuell vom Rahmen des Elements unterscheiden. Wir gehen später noch genauer auf das Clipping ein.

In CSS definierte Formen können entweder einfache Formen (z. B. Kreise, Rechtecke und Polygone) oder Pfade sein, mit denen komplexe und zusammengesetzte Formen definiert werden können.

Einfache Formen

circle() und ellipse()

Mit den Funktionen circle() und ellipse() werden runde und ovale Formen mit Radien relativ zu einem Element definiert. Die Funktion circle() akzeptiert als Argument eine einzelne Größe oder einen einzelnen Prozentsatz. Standardmäßig wird die Form mit beiden Funktionen relativ zur Mitte des Elements positioniert. Beide akzeptieren eine optionale Position nach dem at-Keyword, die als Längen, Prozentsätze oder Positions-Keywords ausgedrückt werden kann.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

Im vorherigen Beispiel wird ein kreisförmiger Beschneidungspfad mit der Funktion circle() gezeigt. Mit einem Radius von 50% wird ein Kreis mit der vollen Breite des Elements erstellt. Die Funktion ellipse() akzeptiert zwei Argumente, die die horizontalen und vertikalen Radien der Form darstellen.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

Im vorherigen Beispiel wird ein elliptischer Beschneidungspfad mit der Funktion ellipse() dargestellt. Bei einem Radius von 50% wird eine Ellipse mit der vollen Breite des Elements erstellt. Im folgenden Beispiel wird dieselbe Ellipse mit dem Mittelpunkt oben im Element positioniert.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() und inset()

Mit den Funktionen rect() und inset() können Sie ein Rechteck auf unterschiedliche Weise definieren, indem Sie die Position seiner Seiten relativ zu den Seiten eines Elements festlegen. So können Sie Rechtecke erstellen, die sich optisch vom Standardfeld des Elements unterscheiden. Sie akzeptieren optional das Keyword round, um ein Rechteck mit abgerundeten Ecken zu erstellen. Dabei wird dieselbe Syntax wie für die Kurzform border-radius verwendet.

Mit der Funktion rect() wird die Position der Ober- und Unterseite des Rechtecks relativ zum oberen Rand des Elements und die Position der linken und rechten Seite relativ zum linken Rand des Elements definiert. Diese Funktion akzeptiert vier Größen- oder Prozenteinheiten als Argumente, die die obere, rechte, untere und linke Seite definieren. Die Funktion rect() ist nützlich, wenn Sie ein Rechteck benötigen, das sich nicht skalieren lässt, wenn sich die Größe des Elements ändert, oder das die gleichen Proportionen beibehält, wenn sich das Element ändert.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

Im vorherigen Beispiel wird ein rechteckiger Beschneidungspfad mit der Funktion rect() definiert. Die Abmessungen beziehen sich auf die oberen und linken Ränder des Elements, wie im Diagramm dargestellt.

Die Funktion inset() definiert die Position der Seiten eines Rechtecks anhand des Abstands nach innen von jeder Seite eines Elements. Diese Funktion akzeptiert ein bis vier Größen- oder Prozenteinheiten als Argumente, sodass Sie mehrere Seiten gleichzeitig definieren können. Die Funktion inset() ist nützlich, wenn Sie ein Rechteck benötigen, das mit dem Element skaliert wird, oder ein Rechteck, das einen festen Abstand zu den Rändern des Elements hat.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

Im vorherigen Beispiel wird ein rechteckiger Beschneidungspfad mit der Funktion inset() definiert. Die Abmessungen beziehen sich auf die Seiten des Elements.

Die Funktionen rect() und inset() akzeptieren optional das Schlüsselwort round, um ein Rechteck mit abgerundeten Ecken zu erstellen. Dabei wird dieselbe Syntax wie für die Kurzform-Eigenschaft border-radius verwendet. Im folgenden Beispiel sehen Sie abgerundete Versionen der zuvor gezeigten Rechtecke.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

Für andere Formen wie Dreiecke, Fünfecke oder Sterne können Sie mit der Funktion polygon() Formen erstellen, indem Sie mehrere Punkte mit geraden Linien verbinden. Die Funktion polygon() akzeptiert eine Liste von Paaren, die aus zwei Längen- oder Prozenteinheiten bestehen. Jedes Paar beschreibt einen Punkt auf dem Polygon: Der erste Wert ist der Abstand vom linken Rand des Elements, der zweite der Abstand vom oberen Rand des Elements. Sie müssen das Polygon nicht schließen, da es durch die Verbindung des letzten mit dem ersten Punkt vervollständigt wird.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

Im vorherigen Beispiel wird ein dreieckiger Beschneidungspfad erstellt, indem drei Punkte definiert werden.

Standardmäßig werden überlappende Bereiche mit der Funktion polygon() als gefüllt gerendert. Sie können dieses Verhalten mit einem optionalen ersten Argument ändern, der sogenannten Füllregel. Wenn Sie zwischen gefüllten und nicht gefüllten Bereichen wechseln möchten, legen Sie die Füllregel auf evenodd fest. Wenn Sie die Standardregel für das Füllen verwenden möchten, legen Sie sie auf nonzero fest.

Im vorherigen Beispiel wird die Funktion polygon() mit trigonometrischen Funktionen verwendet, um regelmäßige Polygone und Sterne zu erstellen. Damit wird nicht das größtmögliche regelmäßige Polygon erstellt, das in ein Element passt, oder das Polygon zentriert. Das können Sie selbst versuchen. Die Sternformen in diesem Beispiel veranschaulichen auch die Füllregeln nonzero und evenodd.

Komplexe Formen

Wenn die grundlegenden Formfunktionen nicht ausreichen, um eine komplexe Form zu beschreiben, bietet CSS Funktionen, die eine komplexere Syntax verwenden, um Merkmale wie Kurven und Linien zu beschreiben. Diese Funktionen sind auch für zusammengesetzte Formen nützlich, die aus mehreren Formen bestehen, z. B. ein Kreis mit einem Loch.

path()

Die Funktion path() akzeptiert einen String mit SVG-Pfadsyntax, um eine Form zu beschreiben. So können komplexe Formen mithilfe von Anweisungen erstellt werden, die die Linien und Kurven beschreiben, aus denen die Form besteht. Das direkte Bearbeiten der SVG-Syntax kann kompliziert sein. Wir empfehlen daher, einen speziellen visuellen Editor zu verwenden, der die Syntax beim Erstellen von Formen mit der Funktion path() exportieren kann.

Die Funktion path() verwendet keine CSS-Größeneinheiten und alle Werte werden als Pixel interpretiert. Das bedeutet, dass Formen, die mit der Pfadfunktion erstellt wurden, nicht auf die Größe des Elements oder Containers reagieren. Wir empfehlen, path() nur für Formen mit festen Abmessungen zu verwenden.

shape()

Die Funktion shape() verwendet eine Befehlssyntax zum Beschreiben einer Form, ähnlich wie die Funktion path(). Die Befehle der Funktion shape() sind jedoch natives CSS und können CSS-Größeneinheiten verwenden. So können Formen, die mit der Funktion shape() definiert wurden, responsiv skaliert werden.

Im vorherigen Beispiel werden die Funktionen path() und shape() verwendet, um eine Herzform und einen Kreis mit einem Loch in der Mitte zu definieren. Im Beispiel wird für beide Funktionen derselbe Wert in Pixeln verwendet. Für die shape()-Funktionen könnten aber auch andere CSS-Größeneinheiten wie Prozentsätze oder containerbezogene Einheiten verwendet werden.

Clipping

Durch Beschneiden wird festgelegt, welche Bereiche eines Elements sichtbar sind. Das ist vergleichbar mit dem Ausschneiden eines Bildes aus einer Zeitschrift. Mit der Eigenschaft clip-path wird der Pfad festgelegt, der zum Definieren des Clip-Bereichs verwendet wird.

Wie Sie in den Beispielen im vorherigen Abschnitt gesehen haben, kann jede der grundlegenden Form- oder Pfadfunktionen als clip-path verwendet werden. Das Attribut clip-path unterstützt auch Pfade, die in einem SVG-Element clipPath definiert sind. Diese können entweder eingebettet oder in einer separaten Datei enthalten sein.

Das vorherige Diagramm zeigt, wie sich der sichtbare Bereich eines Bildes ändert, wenn einem Bildelement ein clip-path hinzugefügt wird. Der obere Beschneidungspfad verwendet die Funktion circle(), der untere ein SVG-clipPath. Der mit der Funktion circle() erstellte Kreis wird standardmäßig mittig auf dem Element positioniert.

Das Attribut clip-path akzeptiert nur einen einzelnen Pfad. Wenn Sie ein Element mit mehreren Formen beschneiden möchten, die sich nicht überschneiden, verwenden Sie die Funktionen path() oder shape(), um einen zusammengesetzten Pfad zu definieren, oder verwenden Sie ein SVG-clipPath. Eine weitere Option für komplexe Szenarien ist die Verwendung von Maskierung anstelle von Clipping. Dies wird in einem späteren Abschnitt behandelt.

Mit Formen zuschneiden

Wenn Sie einen Clip mit einer einfachen Form oder Pfadfunktion erstellen möchten, legen Sie die clip-path-Eigenschaft auf den von der Funktion zurückgegebenen Wert fest, wie in den vorherigen Beispielen. Bei jeder Funktion wird die Beschneidungsform anders relativ zum Element positioniert. Sehen Sie sich daher die Referenz für jede Funktion an.

Im vorherigen Beispiel haben zwei Elemente ein kreisförmiges clip-path, das mit der Klasse .clipped angewendet wird. Beachten Sie, dass die clip-path relativ zu den einzelnen Elementen positioniert wird und der Text in der clip-path nicht umgebrochen wird, um der Form zu folgen.

Referenzrahmen eines Beschneidungspfads

Standardmäßig wird der Rahmen eines Elements in den Beschneidungspfad einbezogen. Wenn Sie eine der grundlegenden Formfunktionen verwenden, können Sie den Referenzrahmen des Clip-Pfads so festlegen, dass er nur den Bereich des Elements innerhalb des Rahmens enthält. Gültige Werte für das Referenzfeld sind stroke-box (Standard) und fill-box (um nur den Bereich innerhalb des Rahmens einzuschließen).

Im vorherigen Beispiel werden Elemente mit einem großen (20px-Rahmen) gezeigt, bei denen jeweils die Funktion inset() verwendet wird, um die clip-path festzulegen. Das Element, das relativ zum Rahmen des Elements abgeschnitten wird, zeigt weiterhin einen Teil des Rahmens an. Die Elemente, die relativ zum Bereich innerhalb des Rahmens beschnitten werden, haben keinen Rahmen und sind kleiner, auch wenn der Inset-Wert derselbe ist.

Clipping mit Grafiken

Ein Beschneidungspfad kann in einem SVG-Dokument definiert werden, das entweder in das HTML-Dokument eingebettet oder extern referenziert wird. Das kann nützlich sein, um komplexe Beschneidungspfade zu definieren, die in Grafikprogrammen erstellt wurden, oder Beschneidungspfade, die mehrere Formen kombinieren.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

Im obigen Beispiel wird die clipPath mit einem id von kitten-clip-shape auf das <img>-Element angewendet. In diesem Fall ist das SVG-Dokument in das HTML eingebettet. Wenn das SVG-Dokument eine externe Datei mit dem Namen kitten-clipper.svg ist, wird stattdessen auf clipPath als url(kitten-clipper.svg#kitten-clip-shape) verwiesen.

Maskieren

Die Maskierung ist eine weitere Methode, um festzulegen, welche Bereiche eines Elements angezeigt oder ausgeblendet werden. Beim Zuschneiden werden einfache Formen oder Pfade verwendet, bei der Maskierung werden die Pixel eines Bildes oder eines Verlaufs verwendet, um die Sichtbarkeit zu bestimmen. Im Gegensatz zum Zuschneiden können Bereiche eines Elements bei der Maskierung teilweise transparent sein. Auf ein Element können mehrere Maskenbilder angewendet werden, um verschiedene Effekte zu erzielen.

Um eine Maske anzuwenden, legen Sie das Attribut mask-image fest. Diese Property akzeptiert ein oder mehrere Bilder, Verläufe oder Verweise auf <mask>-Elemente in einem SVG-Dokument. Sie können mehrere Maskenbilder anwenden, indem Sie sie durch Kommas trennen.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

Im vorherigen Beispiel wird .my-element zuerst mit einem PNG-Bild und dann mit einem linearen Farbverlauf maskiert. Standardmäßig werden mehrere Masken addiert, um die endgültige Maske zu erstellen.

Das vorherige Beispiel zeigt ein Bild, auf das eine oder mehrere Masken angewendet wurden. Aktivieren und deaktivieren Sie die einzelnen Masken, um zu sehen, wie sie zusammenwirken und den endgültigen Effekt erzeugen.

Alpha- und Luminanzmaskierung

Sie können eine Maske entweder mit dem alpha oder dem luminance des Bildes anwenden. Wenn Sie die Maskierung auf Grundlage von alpha vornehmen, wird die Transparenz jedes Pixels im Maskierungsbild auf das Element angewendet. Dabei werden alle Farbinformationen des Pixels ignoriert. Wenn Sie die Maskierung auf luminance basieren, werden sowohl die Transparenz als auch der Wert jedes Pixels (wie hell oder dunkel) auf das Element angewendet. Bei der Maskierung nach Luminanz werden hellere Farben als sichtbar und dunklere Farben als unsichtbar behandelt.

Verwenden Sie das Attribut mask-mode, um den Maskierungsmodus festzulegen. Standardmäßig ist die mask-mode-Property auf match-source festgelegt. Dadurch wird ein Modus basierend auf dem Typ des Maskenbildes festgelegt. Bei Bildern und Verläufen ist der Standardwert alpha. Bei SVG-Masken wird standardmäßig entweder der Wert der mask-type-Eigenschaft des <mask>-Elements oder luminance verwendet, wenn keine mask-type-Eigenschaft definiert ist.

Im vorherigen Beispiel wird ein Testmuster mit verschiedenen Farb- und Alphawerten als Maske verwendet. Wenn Sie mask-mode ein- und ausschalten, sehen Sie, dass der alpha-Modus auf Transparenz basiert, während der luminance-Modus sowohl auf der Helligkeit als auch auf der Transparenz der Farbe basiert.

Zusätzliche Maskierungseigenschaften

CSS bietet zusätzliche Eigenschaften, mit denen Sie das Verhalten Ihrer Masken optimieren können. Für jede der Eigenschaften kann eine durch Kommas getrennte Liste von Werten angegeben werden, die mit der Liste der Masken abgeglichen werden, die durch die Eigenschaft mask-image festgelegt wird. Wenn es weniger Werte als Masken gibt, wird die Liste wiederholt, bis für jede Maske ein Wert festgelegt wurde. Wenn es mehr Werte als Masken gibt, werden alle überschüssigen Werte verworfen.

Die Maskenkürzel

Mit der Kurzschreibweise für Masken können Sie mehrere Maskeneigenschaften gleichzeitig festlegen. Dadurch kann das Festlegen mehrerer Masken vereinfacht werden, da alle Eigenschaften jeder Maske gruppiert werden. Die Maskenkürzel entsprechen dem Festlegen dieser Attribute in der folgenden Reihenfolge: mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip und mask-composite. Nicht jede Property muss enthalten sein. Alle nicht enthaltenen Properties werden auf ihren ursprünglichen Wert zurückgesetzt. Da bis zu acht Properties pro Maske unterstützt werden, kann es hilfreich sein, eine vollständige Referenz zur Verfügung zu haben.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

Im vorherigen Beispiel werden auf jede Klasse zwei Masken angewendet. Im ersten Fall werden einzelne Eigenschaften verwendet, im zweiten die mask-Kurzschreibweise. Beide Stile sind gleichwertig.

Dynamische Textanpassung um schwebende Elemente

Wenn Sie ein Element beschneiden oder maskieren, ändern Sie nur den sichtbaren Bereich innerhalb des Rechtecks, das Rechteck selbst bleibt jedoch unverändert. Das bedeutet, dass sich ein schwebendes Element basierend auf seinem ursprünglichen Begrenzungsrahmen auf den Dokumentfluss auswirkt, nicht auf die sichtbaren Teile des Elements. Verwenden Sie das Attribut shape-outside zusammen mit dem Clip-Pfad, um den Fluss um ein Element herum zu definieren.

Mit dem Attribut shape-outside wird die Form definiert, um die herum der Inhalt eines Elements fließen soll. Diese Form kann eine der grundlegenden Formfunktionen sein, aber keine Formen, die mit den Funktionen path() oder shape() definiert wurden, oder ein clipPath, das in einem SVG-Dokument definiert ist.

Die shape-outside-Property akzeptiert auch ein Bild oder einen Farbverlauf. Wie beim Maskieren werden die Grenzen der Form durch die Transparenz des Bilds oder Farbverlaufs bestimmt. Mit der Eigenschaft shape-image-threshold wird festgelegt, welche Transparenzstufen innerhalb der Form berücksichtigt werden.

Formen in Animationen

„clip-path“ animieren

Sie können das Attribut clip-path animieren, um einen Übergang zwischen Formen zu schaffen. Sie müssen für jeden Keyframe dieselbe Formfunktion verwenden, um flüssige Animationen zu erstellen. Wenn Sie die Funktionen polygon() oder shape() verwenden, muss in jedem Keyframe dieselbe Anzahl von Punkten verwendet werden.

Im vorherigen Beispiel wird die clip-path eines Elements zwischen einem Fünfeck und einem Stern, der mit der Funktion polygon() definiert wurde, animiert. In diesem Beispiel wird die Füllregel evenodd verwendet, um zu zeigen, wie durch die animierten Punkte überlappende Bereiche entstehen.

Mit „offset-path“ animieren

Sie können auch Elemente entlang der Pfade animieren, die mit diesen Formfunktionen erstellt wurden. Mit der offset-path-Property wird die Form festgelegt, die als Pfad verwendet werden soll, und mit der offset-distance-Property die Position auf diesem Pfad. Sie können die ray()-Funktion auch mit dem Attribut offset-path verwenden, um eine Animation entlang einer geraden Linie zu erstellen.

Im vorherigen Beispiel wird dasselbe Polygon sowohl für eine clip-path als auch für eine offset-path verwendet. In der Animation wird offset-distance verwendet, um die kleineren Sterne entlang desselben Polygons zu bewegen, das der große Stern als clip-path verwendet.

Wissen testen