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.
2 Antworten
… und der feuerfuchs 50 mag es auch nicht !?! schade …
Beim Feuerfuchs musst du ein Flag in den Einstellungen setzen. Wie du Caniuse entnehmen kannst, ist es dieses hier:
Supports shapes behind the layout.css.clip-path-shapes.enabled flag