Zum Hauptinhalt springen

Alle Elemente von Webseiten werden in einem rechteckigen Feld definiert. Das bedeutet jedoch nicht, dass wir alles wie eine Kiste aussehen lassen müssen. Sie können das CSS verwenden Clip-Pfad Eigenschaft, Teile eines Bildes oder eines anderen Elements zuzuschneiden, um interessante Effekte zu erzielen.

Im obigen Beispiel ist das Ballonbild quadratisch (Quelle). Verwenden von Clip-Pfad und der Grundformwert von Kreis ()
Der zusätzliche Himmel rund um den Globus wird ausgeschnitten und hinterlässt ein kreisförmiges Bild auf der Seite.

Da das Bild ein Link ist, können Sie mehr darüber sehen Clip-Pfad Eigentum. Es kann nur auf den sichtbaren Bereich des Bildes geklickt werden, da Ereignisse nicht in versteckten Teilen des Bildes ausgelöst werden.

igraal_de-de

Das Ausschneiden kann auf jedes HTML-Element angewendet werden, nicht nur auf Bilder. Es gibt verschiedene Möglichkeiten, eine zu erstellen Clip-Pfad, in diesem Beitrag werden wir sie sehen.

Browser-Kompatibilität

Abgesehen von den Werten in der Tabelle, die später in diesem Beitrag erläutert werden, sind die verschiedenen Werte von Clip-Pfad bewiesen zu haben Hervorragende Browserunterstützung. Bei älteren Browsern kann eine Alternative darin bestehen, dem Browser zu erlauben, das zu ignorieren Clip-Pfad Eigenschaft und zeigen Sie das Bild ohne Zuschneiden. Wenn dies ein Problem ist, können Sie es versuchen Clip-Pfad in einer Funktionsabfrage und bieten ein alternatives Layout für nicht unterstützte Browser.

@supports ( Clip-Pfad : Kreis ( 45% ) {
}}

Grundformen

das Clip-Pfad Die Eigenschaft kann mehrere Werte annehmen. Der im ersten Beispiel verwendete Wert war Kreis (). Dies ist einer der Grundformwerte, die in der definiert sind
CSS-Formspezifikation. Dies bedeutet, dass Sie eine Fläche zuschneiden und denselben Wert für verwenden können Form außen um den Text an diese Form anzupassen.

Beachten Sie, dass CSS-Formen nur auf schwebende Elemente angewendet werden können. das Clip-Pfad Für die Eigenschaft muss das Element nicht schwebend sein.

Die vollständige Liste der Grundformen lautet:

Einschub ()

das Einschub () value fügt den abgeschnittenen Bereich vom Rand des Elements ein und Werte können für den oberen, rechten, unteren und linken Rand übergeben werden. EIN Randradius Es kann auch hinzugefügt werden, um die Ecken des zugeschnittenen Bereichs mithilfe von zu krümmen runden Stichwort.

In meinem Beispiel habe ich zwei Boxen mit einer Klasse von .Box. Der erste Frame hat kein Clipping, der zweite wird mit getrimmt Einschub () Werte.

Kreis ()

Wie Sie gesehen haben, die Kreis () Der Wert erstellt einen kreisförmigen zugeschnittenen 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 Schlüsselwortwerte, um meinen zugeschnittenen Kreis oben rechts festzulegen. Sie können auch Längen oder Prozentsätze verwenden.

Achten Sie auf flache Kanten!

Beachten Sie, dass bei all diesen Werten die Form durch das Randfeld des Elements abgeschnitten wird. Wenn Sie einen Kreis in einem Bild erstellen und diese Form außerhalb der natürlichen Größe des Bildes liegt, erhalten Sie eine flache Kante.

flache Kanten-2833046
Das zuvor verwendete Bild hat jetzt Kreis (50%) angewendet. Da das Bild nicht quadratisch ist, drücken wir oben und unten auf das Randfeld, und der Kreis wird zugeschnitten.

Ellipse ()

Eine Ellipse ist im Wesentlichen ein gequetschter Kreis, daher verhält sie sich sehr ähnlich Kreis () Es akzeptiert jedoch einen Radius für x und einen Radius für y plus den Wert des Mittelpunkts der Ellipse.

Polygon ()

das Polygon () Mit value können Sie recht komplexe Formen erstellen, so viele Punkte definieren, wie Sie benötigen, und die Koordinaten für jeden Punkt festlegen.

Weitere Informationen zum Erstellen von Polygonen und zum Anzeigen der Möglichkeiten finden Sie unter Clippy, ein Clip-Pfad Generieren Sie dann den Code und fügen Sie ihn in Ihr eigenes Projekt ein.

Formen aus Barwerten

In CSS-Formularen werden auch Formen von definiert Barwerte. Diese beziehen sich auf das CSS-Box-Modell: das Inhaltsfeld, das Füllfeld, das Rahmenfeld und das Randfeld mit den Schlüsselwortwerten von Inhaltsfeld, Rahmenbox, Polsterboxy Randbox.

Diese Werte können allein oder in Verbindung mit einer Grundform verwendet werden, um den von der Form verwendeten Referenzrahmen zu definieren. Im Folgenden wird beispielsweise die Form am Rand des Inhalts abgeschnitten.

.box {
Clip-Pfad : Inhaltsfeld ;
}}

In diesem Beispiel würde der Kreis das verwenden Inhaltsfeld als Referenzdiagramm anstelle von Randbox (Dies ist die Standardeinstellung).

.box {
Clip-Pfad : Kreis ( 45% ) Inhaltsfeld ;
}}

Derzeit unterstützen Browser die Verwendung von Box-Werten für nicht Clip-Pfad Eigentum. Sind kompatibel mit Form außen Jedoch.

Verwenden eines SVG-Elements

Verwenden Sie ein SVG, um mehr Kontrolle über den zugeschnittenen Bereich zu haben, als dies mit Grundformen möglich ist clipPath Element. Verweisen Sie dann mit auf diese ID url () als der Wert von Clip-Pfad.

Animieren des zugeschnittenen Bereichs

CSS-Übergänge und -Animationen können auf die angewendet werden Clip-Pfad um ein paar coole Effekte zu erzeugen. Im folgenden Beispiel animiere ich einen Kreis, indem ich den Mauszeiger über den Übergang zwischen zwei Kreisen mit einem anderen Radiuswert bewege.

Es gibt viele kreative Möglichkeiten, wie Animationen mit Clipping verwendet werden können.
Animieren mit Clip-Pfad auf CSS Tricks geht einige Ideen durch.

Foto von Matthew Henry in Burst.

Error: Beachtung: Geschützter Inhalt.