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!