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. Schneiden Sie dann die Teile eines Elements weg, die nicht angezeigt werden sollen.

Rachel Andrew

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 Wert „circle()“ für die Grundform wird der zusätzliche Himmel um den Ballon herum abgeschnitten, sodass auf der Seite ein kreisförmiges Bild verbleibt.

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 werden wir uns diese genauer ansehen.

Browserkompatibilität

Bei älteren Browsern kann als Fallback festgelegt werden, dass die Property clip-path ignoriert und das nicht zugeschnittene Bild angezeigt wird. 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 verschiedene Werte 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. Das bedeutet, dass Sie einen Bereich zuschneiden und denselben Wert für shape-outside verwenden können, damit der Text um diese Form herum umgebrochen wird.

Die vollständige Liste der Grundformen:

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

inset()

Mit dem Wert inset() wird der zugeschnittene Bereich vom Rand des Elements eingefügt. Es können Werte für den oberen, rechten, unteren und linken Rand übergeben werden. Mit dem Schlüsselwort round können Sie auch ein border-radius hinzufügen, um die Ecken des zugeschnittenen Bereichs zu krümmen.

In meinem Beispiel habe ich zwei Felder mit der Klasse .box. Das erste Feld ist nicht zugeschnitten, das zweite wird mit inset()-Werten zugeschnitten.

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 entspricht dem Radius des Kreises. 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 Grunde ein gestauter Kreis und funktioniert daher sehr ähnlich wie circle(). Sie 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 recht komplexe Formen erstellen, indem Sie so viele Punkte wie nötig definieren und die Koordinaten der einzelnen Punkte 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 der Kreis content-box als Referenzfeld verwenden, anstatt margin-box (Standard).

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

Derzeit unterstützen Browser keine Box-Werte für die Property clip-path. 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.

Zugeschnittenen 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