CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy

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.

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 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.

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.

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.