Cliping, Clipping und mehr Clipping!

Die magische Verwendung von CSS- clip-path -Attribut: Erforschen Sie eine Vielzahl kreativer Techniken und Anwendungsfälle. In diesem Artikel wird eine Reihe interessanter Effekte mit clip-path -Attribut erzielt, in der Hoffnung, Sie dazu zu inspirieren, sie in Ihrem Projekt anzuwenden oder kreative Versuche zu unternehmen.

Dies ist der dritte Artikel über clip-path vom Autor auf CSS-Tricks veröffentlicht wurde. Wenn Sie den Hintergrund kennen möchten, können Sie zuerst den folgenden Artikel lesen:

• Erstellen Sie interaktive Effekte mit CSS- clip-path
• Erstellen Sie interaktive Effekte mit CSS clip-path , Teil 2

Dieser Artikel wird neue Ideen einführen!

Kreativ: Doppelschnitt

Ein cleverer Trick besteht darin clip-path mehrmals zum Ernteinhalt zu verwenden. Dies mag offensichtlich klingen, aber tatsächlich verwenden nur wenige Menschen dieses Konzept.

Schauen wir uns beispielsweise ein erweitertes Menü an:

clip-path kann nur einmal auf einen einzelnen DOM-Knoten angewendet werden. Ein Knoten können nicht gleichzeitig mehrere aktive Instanzen der gleichen CSS-Regeln haben, was bedeutet, dass jede Instanz nur einen clip-path hat. Es gibt jedoch keine obere Grenze für die Häufigkeit, mit der ein kombinierter Ernteknoten kombiniert wird. Zum Beispiel können wir a schneiden<div> In eine andere Kumpel platziert<code><div> Drinnen und so weiter. In der angestammten Beziehung des DOM -Knotens können wir so viele unabhängige Pflanzen anwenden. Genau das wird in der obigen Demonstration getan. Ich habe einen verkürzten Knoten, der einen anderen gekräuselten Knoten füllt. Der übergeordnete Knoten fungiert als Grenze, und die untergeordneten Knoten füllen den übergeordneten Knoten beim Skalieren. Dies erzeugt einen ungewöhnlichen Effekt eines abgerundeten Menüs. Stellen Sie sich dies als eine erweiterte Methode des <code>overflow: hidden .

Natürlich können Sie denken, dass SVG für diesen Zweck besser geeignet ist. Im Vergleich zu clip-path kann SVG mehr Funktionen erzielen. Dies beinhaltet einen reibungslosen Zoom. Wenn clip-path die Bezier-Kurve vollständig unterstützt, ist die Situation unterschiedlich. Aber zum Zeitpunkt des Schreibens ist das nicht der Fall. Wie auch immer, clip-path ist sehr bequem. Mit einem Knoten, einer CSS -Regel können Sie beginnen. In Bezug auf die obige Demonstration erledigt clip-path den Job und ist daher eine praktikable Option.

Ich habe ein kurzes Video gemacht, um zu erklären, wie das Menü intern funktioniert:

Kreative Two: Skalierungspfad skalieren

Ein weiterer (weniger offensichtlicher) Trick besteht darin clip-path zur Skalierung zu verwenden. Wir können den CSS-Übergang zu einem animierten clip-path verwenden!

Das Übergangssystem ist erstaunlich, wie es gebaut wird. Meiner Meinung nach ist der Zusatz einer der größten Sprünge in der Entwicklung der Web -Technologie in den letzten Jahren. Es unterstützt Übergänge verschiedener Werte. clip-path ist ein akzeptabler Wert, den wir animieren können. Animation bedeutet normalerweise die Interpolation zwischen zwei extremen Werten. Für clip-path bedeutet dies die Interpolation zwischen zwei völlig unterschiedlichen Pfaden. Hier zeigt das feine Animationssystem des Web seine Vorteile. Es funktioniert nicht nur für einzelne Werte, sondern auch für animierte Wertsätze.

Beim Animieren von clip-path wird jede Koordinate separat interpoliert. Das ist sehr wichtig. Es lässt clip-path -Animation kohärent und glatt aussehen.

Schauen wir uns die Demo an. Klicken Sie auf das Bild, um den Effekt neu zu starten:

In dieser Demo habe ich clip-path -Übergang verwendet. Es wird verwendet, um von einem clip-path zu skalieren, der einen kleinen Bereich bis zu einem anderen riesigen clip-path bedeckt. Die minimale Version des clip-path ist viel kleiner als die Auflösung-mit anderen Worten, sie ist bei der Anwendung nicht für das bloße Auge sichtbar. Der andere Extremwert ist etwas größer als das Ansichtsfenster. Auf dieser Zoomebene gibt es kein sichtbares Zuschneiden, da alle Zucken außerhalb des sichtbaren Bereichs auftreten. Die Animation zwischen diesen beiden verschiedenen clip-path wird interessante Effekte haben. Die verkürzte Form scheint zu zeigen, was dahinter steckt, wenn sie skaliert werden.

Möglicherweise haben Sie festgestellt, dass diese Demo unterschiedliche Formen verwendet. In diesem Fall habe ich das Logo der beliebten Sneaker -Marke verwendet. Dies gibt Ihnen eine Vorstellung davon, wie es in einem realistischeren Szenario funktioniert.

Ebenso ist hier ein Video, das die technischen Details im Detail erläutert:

Kreative Drei: Ernteüberlagerung

Eine andere Idee besteht darin, Hervorhebungseffekte mit clip-path zu erzeugen. Nehmen wir beispielsweise an, wir möchten clip-path verwenden, um den aktiven Status eines Menüs zu erstellen.

Der Überschnittpfad oben erstreckt sich zwischen verschiedenen Menüoptionen, wenn Animationen animieren. Zusätzlich haben wir eine interessante Form verwendet, um die Benutzeroberfläche hervorzuheben.

Diese Demo verwendet eine geänderte Kopie desselben Inhalte, in der sich die Kopie oben am vorhandenen Inhalt befindet. Es befindet sich genau in der gleichen Position wie die Menüeinheit und wird als aktiver Status verwendet. Im Wesentlichen sieht es aus wie jeder andere reguläre Aktivitätszustand des Menüs. Der Unterschied besteht darin, dass es mit clip-path erstellt wird, anstatt ausgefallene CSS-Stile für HTML-Elemente zu verwenden.

Verwenden Sie clip-path , um hier einige ungewöhnliche Effekte zu erzeugen. Die schrägige Form ist ein Aspekt, aber wir erhalten auch den Stretching -Effekt. Das Menü verfügt über zwei unabhängige Kulturen - eine links und eine rechts -, wodurch die Ernte zu unterschiedlichen Zeiten mit Übergangsverzögerungen animiert wird. Das Ergebnis ist eine sehr entspannte Stretchanimation. Da die Standardlockerung nichtlinear ist, können Verzögerungen zu einem leichten Gummibandeffekt führen.

Der zweite Trick hier ist, Verzögerungen entsprechend der Richtung anzuwenden. Wenn der aktive Zustand nach rechts gehen muss, muss die rechte Seite zuerst die Animation starten und umgekehrt. Ich erhalte Richtungsbewusstsein, indem ich ein kleines JavaScript verwende, um die richtige Klasse basierend auf Klicks anzuwenden.

Creative Four: Slice Slicing

Wie oft sehen Sie kreisförmige Menüs im Internet? Lächerlich, richtig! ? Nun, clip-path macht es nicht nur möglich, es ist auch ganz einfach.

Die Menüs, die wir normalerweise sehen, enthalten Links, die in Einzel- oder sogar Dropdown-Menüs angeordnet sind, genau wie der erste Trick, den wir zuvor gesehen haben. Was wir hier tun, ist, diese Links in Bögen anstelle von Rechtecken zu setzen. Natürlich ist die Verwendung von Rechtecken der traditionelle Weg. Die Idee hier ist, mobilfreundlichere Interaktionen zu untersuchen und zwei spezifische UX-Prinzipien im Auge zu behalten:

• Ein klares Ziel, einfach mit dem Daumen zu klicken
• Änderungen treten in der Nähe des Fokus auf - wo Ihr visueller Fokus liegt

Diese Demonstration richtet sich nicht speziell an clip-path . Ich habe gerade clip-path verwendet, um den Stift zu erstellen. Wie bei der vorherigen erweiterbaren Menü -Demo ist dies eine praktische Frage. Mit clip-path und 50% Grenzradius bekam ich sofort den erforderlichen Bogen.

Kreative Fünf: Schaltfläche umschalten

Die Schaltfläche "Schalter" trägt immer Webentwickler wie uns. Es scheint, als würde jede Woche eine neue Erläuterung des Umschusses eingeführt. OK, das ist meins:

Diese Demo ist ein Remake von Dribbble Screenshot von Oleg Frolov. Es kombiniert alle drei in diesem Artikel beschriebenen Techniken. Diese sind:

• Doppelschnitt
• Skalierung des Clippfads
• Ernteüberlagerungen

Alle diese Schalter scheinen eines gemeinsam zu haben. Sie bestehen aus einem ovalen Hintergrund und einem Kreis, ähnlich einem echten mechanischen Schalter. Die Art und Weise, wie diese Schaltfläche funktioniert, besteht darin, den kreisförmigen clip-path im kreisförmigen Behälter zu vergrößern. Der Container schneidet den Inhalt durch overflow: hidden , dh Doppelpflanzen.

Ein weiterer wichtiger Teil der Demo ist die Verwendung von zwei abwechselnden Versionen im Tag. Es sind Originalversionen und ihre Yin-Yang-Inversion spiegelte Kopien. Die Verwendung von zwei Versionen anstelle einer Version ist das Risiko einer Wiederholung, ein bequemes Problem. Mit beiden Versionen müssen wir nur einen Übergang für die erste Version erstellen. Wir können dann das meiste davon für die zweite Version wiederholen. Am Ende des Übergangs wechselt die Schaltfläche "Schaltfläche" auf die entgegengesetzte Version. Da die umgekehrte Version dem vorherigen Endstatus übereinstimmt, können Änderungen nicht gefunden werden. Der Vorteil dieser Technik besteht darin, Teile der Animation wiederzuverwenden. Der Nachteil ist, dass es Stottern geben wird, wenn die Animation unterbrochen wird. Dies geschieht, wenn der Benutzer die Schaltfläche zum Umschalten drückt, bevor die Animation abgeschlossen ist.

Lassen Sie uns wieder einen Blick hinter die Kulissen schauen:

Abschluss

Sie könnten denken: Erkundung ist eine Sache, aber was ist mit der Produktion? Kann ich auf der Website, an der ich gerade arbeite, clip-path verwenden? Ist es bereit, in Produktion zu gehen?

Nun, es gibt keine einfache Antwort auf diese Frage. Unter anderem gibt es zwei weitere Probleme, die sorgfältig untersucht werden müssen:

1. Browserunterstützung
2. Leistung

Zum Zeitpunkt des Schreibens unterstützen etwa 93% der Browser es laut Caniuse. Ich denke, wir sind kurz vor der Massenadoption. Beachten Sie, dass diese Nummer das Webkit -Präfix berücksichtigt.

Es gibt auch das Argument des IE, aber das ist wirklich kein Argument für mich. Ich kann nicht sehen, was die zusätzliche Anstrengung für den IE bedeutet. Sollten Sie Problemumgehungen für unsichere Browser erstellen? Ihre Benutzer sind besser dran, einen modernen Browser zu verwenden. Natürlich gibt es einige seltene Situationen, die als Erbe angesehen werden müssen. In diesen Fällen können Sie jedoch überhaupt nicht in Betracht ziehen, moderne CSS zu verwenden.

Was ist also mit Leistung? Nun, da die Dinge immer mehr werden, wird die Aufführung schwierig, aber ich werde nicht sagen, dass uns etwas davon abhält, heute clip-path zu verwenden. Die Leistung, die immer gemessen wird, ist wichtig. Im Durchschnitt kann clip-path einen höheren Leistungsauswirkungen haben als andere CSS-Regeln. Aber denken Sie daran, dass die Praxis, die wir hier vorstellen, Ratschläge, kein Gesetz ist. Stellen Sie sich sie als Vorschläge vor. Entwickeln Sie die Gewohnheit, die Leistung zu messen.

Schneiden Sie Ihre Seite in Stücke. Sehen Sie, was passiert!