CSS-Clip-Pfade erstellen

Clippy
Kommentare

In CSS lassen sich Element-Bereiche mithilfe verschiedener Methoden ein- und ausblenden, um ihnen so besonders auffällige Effekte zu verleihen. Dafür eingesetzt wird zum Beispiel das clip-path-Property.

Damit können komplexe Formen in CSS erstellt werden, indem ein Element an eine Grundform wie Kreis, Ellipse, Polygon oder Inset, oder eine SVG-Quelle geclippt wird. Mit Tools wie Clippy lassen sich Werte für die Formfunktionen für das clip-path-Property generieren, um sie anschließend in die eigene Website zu integrieren.

clip-path-Werte mit Clippy genieren

Clippy stellt zahlreiche verschiedene Grundformen zur Verfügung, die sich anhand verschiebbarer Punkte in die gewünschte Form ziehen lassen. Zudem besteht die Möglichkeit, sich zusätzlich das Äußere des Clip-Pfads anzeigen zu lassen. Ebenso lässt sich die Größe des Bilds verändern und unter verschiedenen Demo-Motiven wählen oder ein eigenes Bild über eine Custom-URL bearbeiten.

Screenshot Clippy Sternpolygon

Screenshot: Stern mit eingeblendetem äußerem Clip-Pfad als Ausgangsform

Neben der Auswahl aus verschiedenen, auf Polgyonen basierenden Formen, gibt es auch die Möglichkeit, ein eigenes Polygon zu definieren. Die Demoversion findet sich auf der Projekt-Website; zudem gibt es weitere Informationen zum Tool auf GitHub.

Aufmacherbild: Wooden blocks, different primary shapes and colors for children von Shutterstock / Urheberrecht: fotoecho_com

Stefanie Schäfers

Autor

Stefanie Schäfers

Stefanie Schäfers studierte zunächst Anglistik in Marburg und machte anschließend ihren Masterabschluss im Bereich Creative and Cultural Industries an der Glasgow Caledonian University in Glasgow, Schottland. Seit August 2014 ist sie als Redakteurin in der Redaktion des PHP Magazins bei Software & Support Media tätig. Zuvor absolvierte sie bereits mehrere Praktika in Online-Redaktionen und Verlagen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -