Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » (Kostenlose) Services » CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy

CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 23. Januar 2017

Inhaltsverzeichnis

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.

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

Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

One Step Webdesign hannover Logo

One Step Webdesign

Hannover

hw brand experience logo.

H&W // Brand Experience

Schwäbisch Gmünd

Logo der Frankfurter Webdesign Agentur Nextblick.

NEXTBLICK Internetagentur Frankfurt

Frankfurt am Main

Seiten-Werk

Seevetal

pictibe Media Consulting & Solution in Köln.

pictibe – Werbeagentur & Marketingagentur

Bergisch Gladbach

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

2 Antworten zu „CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy“
— was ist Deine Meinung?

  1. erin hagl sagt:
    23. Januar 2017 um 9:26 Uhr

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

    Antworten
    1. Dieter Petereit sagt:
      23. Januar 2017 um 13:24 Uhr

      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

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑