CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Die CSS-Eigenschaft clip-path erlaubt es dir, anhand komplexer Beschneidungspfade festzulegen, dass nicht der gesamte Inhalt einer Box im Browser angezeigt wird. So sind beeindruckende Effekte möglich. Die Web-App Clippy nimmt dir das Coding ab. Du stellst deine Beschneidungspfade visuell zusammen und siehst direkt das Ergebnis.

Die CSS-Eigenschaft clip-path

Clip-path ist der Nachfolger der Eigenschaft clip und erweitert diese maßgeblich. Denn mittels clip waren lediglich rechteckige Formen möglich. Die neuere Eigenschaft clip-path hingegen erlaubt das Erstellen von Beschneidungspfaden entlang nahezu beliebiger Formen.

Clippy baut einfache und komplexe Beschneidungspfade visuell. (Screenshot: Dr. Web)

Clippy baut einfache und komplexe Beschneidungspfade visuell. (Screenshot: Dr. Web)

Neben den typischen Grundformen, wie Kreis, Ellipse oder Polygon und anderen, kannst du auch SVG-Grafiken als Quellformen für die Beschneidungspfade verwenden. Dadurch erreichst du eine bislang nicht gekannte Flexibilität in der Darstellung. Solange deine Formen die gleiche Zahl an Pfadpunkten aufweisen, kannst du auch CSS Animations und Transitions auf sie anwenden, was zu schicken Bewegungseffekten führt.

Bennett Feely und seine CSS-Experimente

Bennett Feely aus Pittsburgh in Pennsylvania kennen regelmäßige Leserinnen und Leser bereits. Vor zwei Monaten stellten wir an dieser Stelle sein Projekt Image Effects vor. Image Effects ist ein Beispiel dafür, wie du unter kluger Verwendung von Kombinationen oder Wiederholungen verschiedener moderner CSS-Eigenschaften Bildeffekte erschaffst, für die du bisher nicht rein auf CSS gesetzt hättest. Auch Image Effects ist eine visuell arbeitende Web-App, die dir die benötigten Codeschnipsel automatisch generiert.

Clippy bietet eine intuitive Editor-Oberfläche. (Screenshot: Dr. Web)

Clippy bietet eine intuitive Editor-Oberfläche. (Screenshot: Dr. Web)

Clippy arbeitet ganz ähnlich, sieht dabei aber noch wesentlich eleganter aus und bietet eine Optik, die sich stärker an der gängiger Editoren orientiert. So fällt der Einstieg leicht.

Mit 26 Grundformen bist du für die ersten 1.000 Schritte bereits bestens gerüstet. Mit dem Button Custom Polygon gehst du noch ein paar Schritte weiter, denn damit baust du dir eine beliebig komplexe Form zusammen, indem du schlicht Pfadpunkte in das Bild setzt, die Clippy automatisch miteinander verbindet.

Clippy bietet dir 26 Grundformen und einen Editor für beliebig komplexe, eigene Formen. (Screenshot: Dr. Web)

Clippy bietet dir 26 Grundformen und einen Editor für beliebig komplexe, eigene Formen. (Screenshot: Dr. Web)

Auf der linken Seite siehst du stets eine Vorschau, die durch eine Pixelangabe auf der rechten Seite, unterhalb der Formenauswahl, verändern kannst. Auch der Hintergrund ist änderbar. Bennett hat vier Beispiel zur Auswahl gestellt. Durch die Eingabe einer URL zu dem von dir gewünschten Bild kannst du jedoch auch dieses in den Hintergrund laden.

Unterhalb des Fensters mit der Preview wird dir stets der aktuell gültige CSS-Code angezeigt, den du von dort aus über die Zwischenablage in dein Projekt kopieren kannst. Ebenso ist es möglich, auf der Basis des angezeigten Codes direkt zu Codepen zu wechseln, um dort weiter zu experimentieren.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
Durch die Verknüpfung zu Codepen, kannst du jeden Codeschnipsel direkt weiter bearbeiten. (Screenshot: Dr. Web)

Durch die Verknüpfung zu Codepen, kannst du jeden Codeschnipsel direkt weiter bearbeiten. (Screenshot: Dr. Web)

Beachte, dass Clippy dir nur den Code für den Beschneidungspfad generiert. Das entsprechende Bild musst du später selber einbauen und auch der Textfluss rund um die Form muss danach noch gebaut werden. Dazu verwendest du die Eigenschaften aus dem shape- Spektrum, etwa shape-outside.

In Clippy entscheidest du, ob du den Browser-Prefix webkit, der sicherstellt, dass der Code in Apples Safari funktioniert, nutzen willst oder nicht. Bislang gibt es keinen Browser, der clip-path vollumfänglich unterstützt. Gar nicht unterstützt wird clip-path in Microsofts Internet Explorer und Edge, sowie im Opera Mini.

Clippy ist natürlich kostenfrei und ohne Anmeldung zu verwenden.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

2 Kommentare auf "CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
erin hagl
Gast

… und der feuerfuchs 50 mag es auch nicht !?! schade …