Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » (Kostenlose) Services » CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy

CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 23. Januar 2017
Bookmarke mich
Share on pocket

DAZECON - Webdesign und Marketing Leipzig

Homepage & Design Heroes GmbH

Dunkel Design | Webdesign Grafikdesign Logodesign

DAZECON - Webdesign und Marketing

pictibe – Werbeagentur & Marketingagentur

Webagentur klickbeben

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

SEOfolgreich – Local SEO Agentur München

München

Jocado

Leipzig

Optimerch GmbH

Dortmund

4eck Media GmbH & Co. KG

Waren (Müritz)

Alle Agenturpartner

Jobs

Senior Online Marketing Manager

München

Senior SEO Manager

München

Online Marketing Manager

München

Frontend Development & Project Management

Remote

Assistent/in der Geschäfts­führung

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.