Interessante Bildformen mit der CSS-Eigenschaft „clip-path“ erstellen

Mithilfe von Clipping in CSS können wir dafür sorgen, dass unsere Designs nicht mehr wie ein Quader aussehen. Sie können einen Clippfad mit verschiedenen Grundformen oder einem SVG erstellen. Schneide dann die Teile eines Elements aus, die nicht zu sehen sein sollen.

Rachel Andrew

Die Elemente auf Webseiten werden alle in einem rechteckigen Feld definiert. Das bedeutet jedoch nicht, dass alles wie ein Feld aussehen muss. Mit der CSS-Eigenschaft clip-path können Sie Teile eines Bilds oder eines anderen Elements zuschneiden, um interessante Effekte zu erzielen.

Im obigen Beispiel ist das Ballonbild quadratisch (Quelle). Mit clip-path und dem Grundformwert circle() wird der zusätzliche Himmel um das Info-Pop-up abgeschnitten, sodass auf der Seite ein kreisförmiges Bild entsteht.

Da das Bild ein Link ist, können Sie sich weitere Informationen zur clip-path-Property ansehen. Nur der sichtbare Bereich des Bilds kann angeklickt werden, da Ereignisse nicht für die ausgeblendeten Bereiche des Bilds ausgelöst werden.

Das Zuschneiden kann auf jedes HTML-Element angewendet werden, nicht nur auf Bilder. Es gibt verschiedene Möglichkeiten, eine clip-path zu erstellen. In diesem Beitrag stellen wir sie genauer vor.

Browserkompatibilität

Für ältere Browser kann als Fallback festgelegt werden, dass der Browser die Property clip-path ignoriert und das nicht zugeschnittene Bild anzeigt. In diesem Fall können Sie in einer Funktionsabfrage nach clip-path suchen und für nicht unterstützte Browser ein alternatives Layout anbieten.

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

Grundformen

Das Attribut clip-path kann eine Reihe von Werten annehmen. Im ersten Beispiel wurde der Wert circle() verwendet. Dies ist einer der grundlegenden Formwerte, die in der CSS-Spezifikation für Formen definiert sind. Sie können also einen Bereich beschneiden und denselben Wert für shape-outside verwenden, damit der Text um diese Form fließt.

Die vollständige Liste der Grundformen:

• inset()
• circle()
• ellipse()
• polygon()

inset()

Der Wert inset() setzt den abgeschnittenen Bereich vom Rand des Elements ein. Er kann Werte für den oberen, rechten, unteren und linken Rand des Elements übergeben werden. Sie können border-radius auch hinzufügen, um die Ecken des zugeschnittenen Bereichs zu krümmen. Dazu verwenden Sie das Schlüsselwort round.

In meinem Beispiel habe ich zwei Felder mit der Klasse .box. Das erste Feld enthält keine Begrenzung, das zweite Feld wird mithilfe von inset()-Werten abgeschnitten.

circle()

Wie Sie gesehen haben, wird mit dem Wert circle() ein kreisförmiger Ausschnitt erstellt. Der erste Wert ist eine Länge oder ein Prozentsatz und gibt den Radius des Kreises an. Mit einem zweiten optionalen Wert können Sie den Mittelpunkt des Kreises festlegen. Im folgenden Beispiel verwende ich Keyword-Werte, um den zugeschnittenen Kreis oben rechts zu platzieren. Sie können auch Längen oder Prozentsätze verwenden.

Achten Sie auf flache Kanten.

Beachten Sie bei allen diesen Werten, dass die Form vom Ränder-Frame des Elements abgeschnitten wird. Wenn Sie einen Kreis auf einem Bild erstellen und diese Form über die natürliche Größe des Bildes hinausgeht, entsteht eine flache Kante.

ellipse()

Eine Ellipse ist im Wesentlichen ein zusammengedrückter Kreis. Sie verhält sich ähnlich wie circle(), akzeptiert jedoch einen Radius für x und einen Radius für y sowie den Wert für den Mittelpunkt der Ellipse.

polygon()

Mit dem Wert polygon() können Sie ziemlich komplexe Formen erstellen, in denen Sie so viele Punkte wie nötig definieren, indem Sie die Koordinaten jedes Punkts festlegen.

Clippy ist ein clip-path-Generator, mit dem Sie Polygone erstellen können. Kopieren Sie den Code und fügen Sie ihn in Ihr eigenes Projekt ein.

Formen aus Feldwerten

Auch in CSS-Formen definiert sind Formen aus Box-Werten. Sie beziehen sich auf das CSS-Box-Modell – das Inhalts-, das Ränder-, das Rahmen- und das Margen-Element mit den Keyword-Werten content-box, border-box, padding-box und margin-box.

Diese Werte können allein oder zusammen mit einer einfachen Form verwendet werden, um den Referenzrahmen der Form zu definieren. Mit dem folgenden Code wird die Form beispielsweise an den Rand des Inhalts zugeschnitten.

.box {
  clip-path: content-box;
}

In diesem Beispiel würde für den Kreis das content-box als Referenzfeld anstelle des margin-box (Standardeinstellung) verwendet werden.

.box {
  clip-path: circle(45%) content-box;
}

Derzeit unterstützen Browser die Verwendung von Feldwerten für die Eigenschaft clip-path nicht. Sie werden jedoch für shape-outside unterstützt.

SVG-Element verwenden

Wenn Sie mehr Kontrolle über den zugeschnittenen Bereich haben möchten als mit einfachen Formen möglich ist, verwenden Sie ein SVG-clipPath-Element. Verweisen Sie dann auf diese ID und verwenden Sie url() als Wert für clip-path.

Ausgeschnittenen Bereich animieren

CSS-Übergänge und -Animationen können auf das clip-path angewendet werden, um interessante Effekte zu erzielen. Im nächsten Beispiel animiere ich einen Kreis beim Hovern, indem ich zwischen zwei Kreisen mit unterschiedlichen Radiuswerten wechsle.

Es gibt viele kreative Möglichkeiten, Animationen mit dem Zuschneiden zu kombinieren. Im Artikel Animieren mit clip-path auf CSS Tricks werden einige Ideen vorgestellt.

Foto von Matthew Henry bei Burst