Clipping, Clipping und Mehr Clipping!

Es gibt so viele Dinge, die man mit Clipping-Pfaden machen kann. Ich habe mich schon seit einiger Zeit damit beschäftigt und verschiedene Techniken und Anwendungsfälle dafür entwickelt – und ich möchte meine Erkenntnisse mit Ihnen teilen! Ich hoffe, dies wird neue Ideen für lustige Dinge wecken, die Sie mit der CSS-Eigenschaft clip-path machen können. Hoffentlich werden Sie sie entweder in Ihren Projekten verwenden oder damit herumspielen und Spaß haben.

Bevor wir eintauchen, ist es erwähnenswert, dass dies mein dritter Beitrag hier auf CSS-Tricks über Clipping-Pfade ist. Für ein wenig Hintergrundinformationen sollten Sie sich diese vielleicht ansehen.

• Using CSS Clip Path to Create Interactive Effects
• Verwendung von CSS Clip Path zur Erstellung interaktiver Effekte, Teil II

Dieser Artikel steckt voller *neuer* Ideen!

Idee 1: Der doppelte Clip

Ein raffinierter Trick ist die Verwendung von Clipping-Pfaden, um Inhalte mehrmals zu schneiden. Das mag offensichtlich klingen, aber ich habe nicht viele Leute gesehen, die dieses Konzept nutzen.

Betrachten wir zum Beispiel ein erweiterbares Menü.

Siehe den Pen
The more menu von Mikael Ainalem (@ainalem)
auf CodePen.

Clipping kann nur einmal auf einen DOM-Knoten angewendet werden. Ein Knoten *kann* nicht mehrere aktive Instanzen derselben CSS-Regel haben, was bedeutet, dass ein clip-path pro Instanz. Dennoch gibt es keine Obergrenze für die Anzahl, wie oft Sie geschnittene Knoten kombinieren können. Wir können zum Beispiel ein geschnittenes <div> in ein anderes geschnittenes <div> usw. platzieren. In der Ahnenreihe der DOM-Knoten können wir beliebig viele separate Schnitte anwenden.

Genau das habe ich in der obigen Demo gemacht. Ich habe einen geschnittenen Knoten einen anderen geschnittenen Knoten ausfüllen lassen. Das übergeordnete Element fungiert als Begrenzung, die das untergeordnete Element beim Zoomen ausfüllt. Dies erzeugt einen ungewöhnlichen Effekt, bei dem ein abgerundetes Menü erscheint. Betrachten Sie es als eine fortgeschrittene Methode von overflow: hidden.

Sie können natürlich argumentieren, dass SVGs besser für diesen Zweck geeignet sind. Im Vergleich zu Clipping-Pfaden kann SVG viel mehr leisten. Unter anderem bietet SVG eine glatte Skalierung. Wenn Clipping Bézier-Kurven vollständig unterstützen würde, sähe die Unterhaltung anders aus. Dies ist zum Zeitpunkt des Schreibens nicht der Fall. Trotzdem sind Clipping-Pfade sehr praktisch. Ein Knoten, eine CSS-Regel und Sie sind bereit. Was die obige Demo betrifft, so leisten Clipping-Pfade gute Arbeit und sind somit eine praktikable Option.

Ich habe ein kurzes Video zusammengestellt, das die Funktionsweise des Menüs erklärt.

Idee 2: Zooming Clip Paths

Ein weiterer (weniger offensichtlicher) Trick ist die Verwendung von Clipping-Pfaden zum Zoomen. Wir können tatsächlich CSS-Übergänge verwenden, um Clipping-Pfade zu animieren!

Das Übergangssystem ist erstaunlich, wie es aufgebaut ist. Meiner Meinung nach ist seine Ergänzung für das Web einer der größten Sprünge, die das Web in den letzten Jahren gemacht hat. Es unterstützt Übergänge zwischen einer ganzen Reihe verschiedener Werte. Clipping-Pfade gehören zu den akzeptierten Werten, die wir animieren können. Animation im Allgemeinen bedeutet Interpolation zwischen zwei Extremen. Für das Clipping bedeutet dies eine Interpolation zwischen zwei vollständigen, unterschiedlichen Pfaden. Hier zeigt das ausgefeilte Animationssystem des Webs seine Stärke. Es funktioniert nicht nur mit Einzelwerten – es funktioniert auch beim Animieren von Wertesätzen.

Beim spezifischen Animieren von Clipping-Pfaden wird jede Koordinate *separat* interpoliert. Das ist wichtig. Es lässt Clipping-Pfad-Animationen kohärent und flüssig aussehen.

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

Siehe den Pen
Brand cut zoom von Mikael Ainalem (@ainalem)
auf CodePen.

Ich verwende in dieser Demo clip-path-Übergänge. Sie werden verwendet, um von einem Clipping-Pfad, der einen winzigen Bereich abdeckt, zu einem anderen riesigen zu zoomen. Die kleinste Version des Clipping-Pfads ist viel kleiner als die Auflösung – mit anderen Worten, sie ist für das Auge unsichtbar, wenn sie angewendet wird. Das andere Extrem ist etwas größer als das Viewport. Bei dieser Zoomstufe sind keine Schnitte sichtbar, da das gesamte Clipping außerhalb des sichtbaren Bereichs stattfindet. Das Animieren zwischen diesen beiden unterschiedlichen Clipping-Pfaden erzeugt einen interessanten Effekt. Die geschnittene Form scheint den dahinterliegenden Inhalt zu enthüllen, während sie hineinzoomt.

Wie Sie vielleicht bemerkt haben, verwendet die Demo unterschiedliche Formen. In diesem Fall verwende ich Logos beliebter Schuhmarken. Das gibt Ihnen eine Vorstellung davon, wie der Effekt in einem realistischeren Szenario aussehen würde.

Auch hier gibt es ein Video, das die technischen Details im Detail durchgeht.

Idee 3: Ein geschnittener Overlay

Eine weitere Idee ist die Verwendung von Clipping-Pfaden, um Highlight-Effekte zu erzeugen. Angenommen, wir möchten Clipping-Pfade verwenden, um einen aktiven Zustand in einem Menü zu erstellen.

Siehe den Pen
Skewed stretchy menu von Mikael Ainalem (@ainalem)
auf CodePen.

Der geschnittene Pfad erstreckt sich beim Animieren zwischen den verschiedenen Menüoptionen. Außerdem verwenden wir eine interessante Form, um die Benutzeroberfläche ein wenig hervorzuheben.

Die Demo verwendet eine geänderte Kopie desselben Inhalts, wobei die doppelte Kopie über dem vorhandenen Inhalt liegt. Sie befindet sich an exakt derselben Position wie das Menü und dient als aktiver Zustand. Im Wesentlichen erscheint es wie jeder andere reguläre aktive Zustand für ein Menü. Der Unterschied besteht darin, dass es mit Clipping-Pfaden anstelle von schicken CSS-Stilen auf HTML-Elementen erstellt wird.

Die Verwendung von Clipping ermöglicht hier einige ungewöhnliche Effekte. Die verzerrte Form ist eine Sache, aber wir bekommen auch den dehnenden Effekt. Das Menü hat zwei separate Schnitte – einen links und einen rechts –, die es ermöglichen, die Schnitte mit unterschiedlichem Timing durch Übergangsverzögerungen zu animieren. Das Ergebnis ist eine dehnbare Animation mit sehr wenig Aufwand. Da die Standard-Easing-Funktion nichtlinear ist, verursacht die Verzögerung einen leichten Gummibandeffekt.

Der zweite Trick hier ist, die Verzögerungen richtungsabhängig anzuwenden. Wenn sich der aktive Zustand nach rechts bewegen muss, muss die rechte Seite zuerst mit der Animation beginnen und umgekehrt. Die Richtungsabhängigkeit erhalte ich durch einen Hauch von JavaScript, um beim Klicken die richtige Klasse anzuwenden.

Idee 4: Stücke des Kuchens

Wie oft sieht man ein kreisförmiges erweiterbares Menü im Web? Unverschämt, oder!? Nun, Clipping-Pfade machen es nicht nur möglich, sondern auch ziemlich einfach.

Siehe den Pen
The circular menu von Mikael Ainalem (@ainalem)
auf CodePen.

Normalerweise sehen wir Menüs, die Links in einer einzigen Zeile oder sogar in Dropdowns enthalten, wie beim ersten Trick, den wir uns angesehen haben. Was wir hier stattdessen tun, ist, diese Links in Bögen anstelle von Rechtecken zu platzieren. Die Verwendung von Rechtecken wäre natürlich die konventionelle Methode. Die Idee hier ist, eine mobilfreundlichere Interaktion mit zwei spezifischen UX-Prinzipien im Hinterkopf zu erforschen.

• Ein klares Ziel, das mit dem Daumen angenehm zu tippen ist.
• Die Veränderung geschieht nahe dem Brennpunkt – dem Ort, auf den Sie sich gerade visuell konzentrieren.

Die Demo handelt nicht spezifisch von Clipping-Pfaden. Ich verwende nur zufällig Clipping-Pfade, um den Pen zu erstellen. Auch hier ist es wie bei der erweiterbaren Menü-Demo zuvor eine Frage der Bequemlichkeit. Mit Clipping und einem Radius von 50 % erhalte ich die benötigten Bögen im Handumdrehen.

Idee 5: Der Toggle

Toggles erstaunen Webentwickler wie uns immer wieder. Es scheint, als ob jede Woche jemand eine neue Interpretation eines Toggles einführt. Nun, hier ist meine.

Siehe den Pen
Inverted toggle von Mikael Ainalem (@ainalem)
auf CodePen.

Die Demo ist ein Remake von diesem Dribbble-Shot von Oleg Frolov. Sie kombiniert alle drei Techniken, die wir in diesem Artikel behandelt haben. Diese sind:

• Der doppelte Clip
• Zooming Clip Paths
• Ein geschnittener Overlay

Alle diese Ein-/Aus-Schalter scheinen eines gemeinsam zu haben. Sie bestehen aus einem ovalen Hintergrund und einem Kreis, die echten mechanischen Schaltern ähneln. Die Funktionsweise dieses Toggles besteht darin, einen kreisförmigen Clipping-Pfad innerhalb eines abgerundeten Containers hochzuskalieren. Der Container schneidet den Inhalt per overflow: hidden, d. h. doppelter Clip.

Ein weiterer wichtiger Teil der Demo ist die Verwendung von zwei alternierenden Versionen im Markup. Dies sind das Original und seine Yin-Yang-invertierte, gespiegelte Kopie. Die Verwendung von zwei Versionen anstelle von einer ist, um nicht repetitiv zu werden, eine Frage der Bequemlichkeit. Mit zweien müssen wir nur einen Übergang für die erste Version erstellen. Dann können wir den größten Teil davon für die zweite wiederverwenden. Am Ende des Übergangs schaltet der Toggle zur entgegengesetzten Version. Da die invertierte Version identisch mit dem vorherigen Endzustand ist, ist der Wechsel unmöglich zu erkennen. Das Gute an dieser Technik ist die Wiederverwendung von Teilen der Animation. Der Nachteil ist das Ruckeln, das wir bekommen, wenn die Animation unterbrochen wird. Das passiert, wenn der Benutzer den Toggle betätigt, bevor die Animation abgeschlossen ist.

Werfen wir noch einmal einen Blick unter die Haube.

Schlussworte

Sie denken vielleicht: Erkundung ist eine Sache, aber was ist mit der Produktion? Kann ich Clipping-Pfade auf einer Website verwenden, an der ich gerade arbeite? Ist es bereit für die Prime Time?

Nun, diese Frage hat keine einfache Antwort. Es gibt unter anderem zwei Probleme, die genauer betrachtet werden müssen.

1. Browserunterstützung
2. Leistung

Zum Zeitpunkt des Schreibens gibt es laut caniuse etwa 93 % Browserunterstützung. Ich würde sagen, wir stehen kurz vor der Massenverbreitung. Beachten Sie, dass diese Zahl das WebKit-Präfix berücksichtigt.

Es gibt auch immer das IE-Argument, aber es ist für mich wirklich kein Argument. Ich sehe nicht, dass es sich lohnt, die zusätzliche Mühe für IE zu machen. Sollten Sie Workarounds für einen unsicheren Browser erstellen? Ihre Benutzer sind mit einem modernen Browser besser dran. Es gibt natürlich einige seltene Fälle, in denen Legacy ein Muss ist. Aber in diesen Fällen werden Sie wahrscheinlich überhaupt keine modernen CSS in Betracht ziehen.

Wie sieht es mit der Leistung aus? Nun, die Leistung wird schwierig, wenn die Dinge sich ansammeln, aber nichts, was uns meiner Meinung nach davon abhalten würde, Clipping-Pfade heute zu verwenden. Es zählt immer die gemessene Leistung. Es ist wahrscheinlich, dass Clipping im Durchschnitt einen größeren Leistungseinbruch verursacht als andere CSS-Regeln. Aber denken Sie daran, dass die hier behandelten Praktiken Empfehlungen und keine Gesetze sind. Behandeln Sie sie als solche. Machen Sie es sich zur Gewohnheit, die Leistung zu messen.

Gehen Sie voran, zerlegen Sie Ihre Webseiten. Mal sehen, was passiert!