Die Verwendung von Beschnitten in CSS kann uns helfen, nicht mehr alles in unseren Designs zu übersehen, wie ein Kasten aussieht. Mithilfe verschiedener Grundformen oder einer SVG-Datei kannst du einen Clippfad erstellen. Schneiden Sie dann die Teile des Elements aus, die nicht sichtbar sein sollen.
Alle Elemente auf Webseiten werden in einem rechteckigen Feld definiert.
Das bedeutet aber nicht, dass alles wie ein Kasten aussehen muss.
Mit der CSS-Eigenschaft clip-path können Sie Teile eines Bildes oder anderen Elements entfernen und so interessante Effekte erzielen.
Im Beispiel oben ist das Bild des Info-Pop-ups quadratisch (Quelle).
Wenn Sie clip-path und den Wert für die Grundform von circle() verwenden, wird der zusätzliche Himmel um das Info-Pop-up abgeschnitten, sodass auf der Seite ein rundes Bild entsteht.
Da das Bild ein Link ist, sehen Sie weitere Informationen zur clip-path-Eigenschaft.
Es kann nur auf den sichtbaren Bereich des Bildes geklickt werden, da an den verborgenen Teilen des Bildes keine Ereignisse ausgelöst werden.
Die Zuschnitte können auf jedes HTML-Element angewendet werden, nicht nur auf Bilder.
Es gibt verschiedene Möglichkeiten, ein clip-path zu erstellen. In diesem Beitrag sehen wir uns diese Möglichkeiten genauer an.
Browserkompatibilität
Bei älteren Browsern könnte der Browser die clip-path-Eigenschaft ignorieren und das nicht zugeschnittene Bild anzeigen.
Ist dies ein Problem, können Sie in einer Funktionsabfrage auf clip-path testen und ein alternatives Layout für nicht unterstützte Browser anbieten.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Einfache Formen
Das Attribut clip-path kann eine Reihe von Werten annehmen.
Der im ersten Beispiel verwendete Wert war circle().
Dies ist einer der grundlegenden Formwerte, die in der Spezifikation für CSS-Formen definiert sind.
Das bedeutet, dass Sie einen Bereich beschneiden und denselben Wert für shape-outside verwenden können, damit der Text um die Form fließt.
Die vollständige Liste der Grundformen lautet:
inset()
Mit dem Wert inset() wird der abgeschnittene Bereich vom Rand des Elements entfernt. Es können Werte für den oberen, rechten, unteren und linken Rand übergeben werden.
Mit dem Schlüsselwort round kann auch ein border-radius hinzugefügt werden, um die Ecken des abgeschnittenen Bereichs zu krümmen.
In meinem Beispiel habe ich zwei Felder mit einer Klasse .box.
Das erste Feld hat keine Begrenzung, das zweite wird mithilfe von inset()-Werten abgeschnitten.
circle()
Wie Sie gesehen haben, erzeugt der Wert circle() einen kreisförmigen abgeschnittenen Bereich.
Der erste Wert ist eine Länge oder ein Prozentsatz und ist der 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 abgeschnittenen Kreis oben rechts festzulegen.
Sie können auch Längen oder Prozentsätze verwenden.
Achte auf flache Kanten!
Beachten Sie bei allen diesen Werten, dass die Form durch den Randrahmen des Elements abgeschnitten wird. Wenn Sie einen Kreis auf einem Bild erstellen und diese Form sich über die natürliche Größe des Bildes hinaus erstrecken würde, erhalten Sie einen flachen Rand.
circle(50%) angewendet. Da das Bild nicht quadratisch ist, klicken wir oben und unten auf das Randfeld und der Kreis wird abgeschnitten.ellipse()
Eine Ellipse ist im Wesentlichen ein verbundener Kreis und 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 relativ komplexe Formen erstellen und so viele Punkte wie nötig definieren, indem Sie die Koordinaten jedes Punkts festlegen.
Um Ihnen beim Erstellen von Polygonen zu helfen und herauszufinden, was möglich ist, sehen Sie sich den clip-path-Generator Clippy an. Kopieren Sie dann den Code und fügen Sie ihn in Ihr eigenes Projekt ein.
Formen aus Feldwerten
In CSS-Formen werden auch Formen aus Feldwerten definiert.
Diese beziehen sich auf das CSS-Boxmodell: das Inhaltsfeld, das Abstandsfeld, das Rahmenfeld und das Randfeld mit den Keyword-Werten content-box, border-box, padding-box und margin-box.
Diese Werte können allein oder zusammen mit einer Grundform verwendet werden, um das von der Form verwendete Referenzfeld zu definieren. Mit dem folgenden Beispiel wird die Form an den Rand des Inhalts reduziert.
.box {
clip-path: content-box;
}
In diesem Beispiel wird für den Kreis das content-box als Referenzfeld verwendet und nicht der margin-box (Standardwert).
.box {
clip-path: circle(45%) content-box;
}
Derzeit wird die Verwendung von Feldwerten für die Eigenschaft clip-path von Browsern nicht unterstützt.
Sie werden jedoch für shape-outside unterstützt.
SVG-Element verwenden
Wenn Sie den beschnittenen Bereich genauer steuern möchten, als dies mit einfachen Formen möglich ist, können Sie ein SVG-clipPath-Element verwenden.
Verweisen Sie dann auf diese ID und verwenden Sie url() als Wert für clip-path.
Beschnittenen Bereich animieren
CSS-Übergänge und -Animationen können auf clip-path angewendet werden, um interessante Effekte zu erzielen.
In diesem nächsten Beispiel soll ein Kreis animiert werden, wenn der Mauszeiger darüber bewegt wird, indem ein Übergang zwischen zwei Kreisen mit einem anderen Radiuswert vorgenommen wird.
Es gibt viele kreative Möglichkeiten, wie Animationen mit Clipping verwendet werden können. Im Rahmen von CSS-Tricks werden unter Animationen mit „clip-path“ einige Ideen erläutert.
Foto von Matthew Henry bei „Burst“.