Clipping, Clipping, und Mehr Clipping!

0
18

Es gibt so viele Dinge, die Sie tun können, mit clipping-Pfade. Ich habe zu erforschen, Sie für einige Zeit und haben sich mit verschiedenen Techniken und use-cases für Sie — und ich möchte meine Erkenntnisse mit Ihnen teilen! Ich hoffe, dieser Funke, neue Ideen für Spaß Dinge, die Sie tun können, mit der CSS clip-path Eigenschaft. Hoffentlich, Sie werden entweder setzen Sie Sie für Ihre Projekte oder spielen Sie herum und haben Spaß mit Ihnen.

Bevor wir Tauchen Sie ein in, es ist erwähnenswert, dass dies ist mein Dritter post hier auf CSS-Tricks über clip-Pfade. Möchten Sie vielleicht überprüfen Sie diese heraus für ein wenig hintergrund:

  • Mit CSS Clip-Pfad Erstellen-Interaktive Effekte
  • Mit CSS Clip-Pfad Erstellen-Interaktive Effekte, Teil II

Dieser Artikel ist voll von neuen Ideen!

Idee 1: Die Doppel-Clip

Ein netter trick ist die Verwendung von clipping-Pfaden zu schneiden Inhalt viele Male. Es mag offensichtlich klingen, aber ich habe nicht gesehen, viele Menschen mit diesem Konzept.

Zum Beispiel schauen wir uns eine wachsende Menü:

Siehe Stift
Das Menü “mehr” von Mikael Ainalem (@ainalem)
auf CodePen.

Clipping kann nur angewendet werden, um einen DOM-Knoten einmal. Ein Knoten kann mehrere aktive Instanzen der gleichen CSS-Regel, das bedeutet, dass ein clip-path pro Instanz. Doch, es gibt keine Obergrenze für wie viele Male, die Sie kombinieren können abgeschnitten Knoten. Wir können, zum Beispiel, legen Sie ein Ausgeschnittenes <div> innerhalb eines anderen beschnitten <div> und so weiter. In der Abstammung von DOM-Knoten, die wir anwenden können, wie viele verschiedene Schnitte, wie wir wollen.

Das ist genau das, was ich in der demo oben. Ich lasse einen beschnittenen Knoten füllen Sie einen anderen Knoten abgeschnitten. Die Muttergesellschaft fungiert als eine Grenze, die das Kind füllt sich beim Zoomen in. Dadurch entsteht ein ungewöhnlicher Effekt, bei dem ein abgerundetes Menü erscheint. Betrachten Sie es als eine fortschrittliche Methode overflow: hidden.

Sie können natürlich argumentieren, dass SVGs sind für diesen Zweck besser geeignet. Im Vergleich zu clipping-Pfade, SVG ist in der Lage zu tun viel mehr. Unter anderem SVG bietet glatte Skalierung. Wenn clipping voll unterstützt Bezier-Kurven, das Gespräch wäre anders. Dies ist nicht der Fall bei der Zeit des Schreibens. Unabhängig davon, clipping-Pfade sind sehr bequem. Ein Knoten, eine CSS-Regel und du bist gut zu gehen. Soweit der demo oben ist besorgt, clipping-Pfade machen einen guten job und sind somit eine sinnvolle option.

Ich habe kurze video, das erklärt das Innenleben des Menüs:

Idee 2: Zoomen Clip-Pfade

Eine andere (weniger offensichtlich) der trick ist die Verwendung von clipping-Pfade, um zu Zoomen. Wir können tatsächlich mithilfe von CSS-transitions animieren, clipping-Pfade!

Das übergangssystem ist schon erstaunlich, wie es gebaut wird. Meiner Meinung nach, seine Hinzufügung zu der web ist einer der größten Sprünge, die das web hat sich in den letzten Jahren stattgefunden. Es unterstützt die übergänge zwischen einer Vielzahl von verschiedenen Werten. Clipping Wege sind unter den anerkannten Werte, die wir animieren können. Animation im Allgemeinen, bedeutet interpolation zwischen zwei extremen. Für clipping, dies entspricht einer interpolation zwischen zwei komplett verschiedene Wege. Hier ist, wo die web-raffinierten animation-system zeigt seine Stärke. Es hat nicht nur Arbeit mit einzelnen Werten — es funktioniert auch bei der Animation Werte.

Beim animieren von clipping-Pfade insbesondere jede Koordinate bekommt, die separat interpoliert. Das ist wichtig. Es macht clipping-Pfad-Animationen sehen kohärente und glatt.

Schauen wir uns die demo. Klicken Sie auf ein Bild starten Sie den Effekt:

Siehe Stift
Marke cut-zoom von Mikael Ainalem (@ainalem)
auf CodePen.

Ich bin mit clip-path übergänge in dieser demo. Es wird benutzt, um zoom-in von einem clipping-Pfad Abdeckung einer kleinen region gehen in eine andere riesengroße. Die kleinste version des clipping-Pfad ist viel kleiner als die Auflösung — in anderen Worten, es ist für das Auge unsichtbar, wenn Sie angewendet werden. Das andere extrem ist geringfügig größer ist als der viewport. In dieser zoom-Stufe, keine Schnitte sichtbar sind, da alle clipping erfolgt außerhalb des sichtbaren Bereichs. Animieren zwischen diesen zwei verschiedenen clipping-Pfade erzeugt einen interessanten Effekt. Die beschnittene Form scheint zu offenbaren, der Inhalt dahinter, wie es vergrößert.

Wie Sie vielleicht bemerkt haben, die demo verwendet unterschiedliche Formen haben. In diesem Fall bin ich mit logos von beliebten Schuh-Marken. Dies gibt Ihnen eine Vorstellung, wie der Effekt Aussehen würde, wenn in einem realistischeren Szenario.

Wieder, hier ist ein video, dass Spaziergänge durch den technischen Sachen im detail:

Idee 3: Ein Ausgeschnittenes Overlay

Eine weitere Idee ist die Verwendung von clipping-Pfaden zu erstellen, highlight-Effekte. Zum Beispiel, sagen wir, wir möchten, nutzen Beschneidungspfade zu erstellen, die einen aktiven Zustand in einem Menü.

Siehe Stift
Schiefe dehnbar Menü von Mikael Ainalem (@ainalem)
auf CodePen.

Die beschnittenen Pfad oben Strecken zwischen den verschiedenen Menü-Optionen, wenn es animiert wird. Außerdem sind wir über eine interessante Form, um die Benutzeroberfläche zeichnen sich ein bisschen.

Die demo nutzt eine veränderte Kopie der Inhalte, wenn die Kopie sitzt oben auf vorhandene Inhalte. Es befindet sich in der exakt gleichen position wie das Menü und dient wie der Zustand aktiv ist. Im wesentlichen, scheint es, wie alle anderen normalen aktiven Zustand für ein Menü. Der Unterschied ist, dass es erstellt wurde, mit clipping-Pfade eher als schickes CSS-Stilen auf HTML-Elemente.

Mit clipping ermöglicht die Erstellung von einige ungewöhnliche Effekte hier. Die schiefe Form, ist eine Sache, aber wir bekommen auch das dehnbare Wirkung als gut. Das Menü kommt mit zwei separate Schnittwunden — eine auf der linken und auf der rechten—, die es möglich macht, zu animieren, die Schnitte mit verschiedenen mit transition-timing-Verzögerungen. Das Ergebnis ist eine dehnbare animation mit sehr wenig Aufwand. Als Standard-Lockerung ist nicht-linear, die Verzögerung verursacht eine leichte Gummi-band-Effekt.

Der zweite trick hier ist, die Verzögerungen je nach Richtung. Wenn der aktive Zustand muss sich nach rechts bewegen, dann auf der rechten Seite muss zu animieren ersten, und Umgekehrt. Ich bekomme die Richtungs-Bewusstsein, indem Sie mit einem Bindestrich von JavaScript auf die richtige Klasse entsprechend auf Klicks.

Idee 4: die Stückchen von der Torte

Wie oft sieht man eine kreisförmige erweitert-Menü auf der web? Absurd, richtig!? Naja, clipping-Pfade, die es nicht nur möglich, sondern ziemlich trivial, wie gut.

Siehe Stift
Das kreisförmige Menü von Mikael Ainalem (@ainalem)
auf CodePen.

Wir normalerweise sehen die Menüs, die links enthalten, angeordnet in einer einzelnen Linie oder sogar in den dropdowns, wie der erste trick, den wir uns angeschaut. Was wir hier tun, stattdessen wird die Platzierung dieser links innenbogen statt Rechtecke. Mithilfe von Rechtecken würde den konventionellen Weg, natürlich. Die Idee hier ist, um zu erforschen, mobile-freundliche Interaktion mit zwei spezifische UX-Prinzipien im Hinterkopf:

  • Ein klares Ziel, das ist angenehm zu Tippen mit einem Daumen
  • Veränderung findet in der Nähe der zentrale Punkt — die Stelle, wo Ihre visuellen Fokus ist im moment

Die demo ist nicht speziell über clipping-Pfade. Ich bin eben auch nutzen Beschneidungspfade zu erstellen, die den Stift. Wieder, wie das erweiterbare Menü demo erwähnt, ist es eine Frage der Bequemlichkeit. Mit clipping und einen border-radius von 50%, bekomme ich die Bögen die ich brauche in kürzester Zeit.

Idee 5: Das Umschalten

Schaltet nie aufhören, zu überraschen web-Entwickler wie uns. Es scheint so, jemand stellt eine neue interpretation eines toggle-jede Woche. Naja, hier ist meins:

Siehe Stift
Umgekehrtes wechseln von Mikael Ainalem (@ainalem)
auf CodePen.

Die demo-Version ist ein remake von diesem dribbble shot von Oleg Frolov. Es vereint alle drei der Techniken, die wir in diesem Artikel behandelt. Diese sind:

  • Der Doppel-clip
  • Zoomen clip-Pfade
  • Ein overlay abgeschnitten

Alle diese on/off-Schalter scheinen zu haben eine Sache gemeinsam. Sie bestehen aus einem ovalen hintergrund und einen Kreis, ähnlich echten mechanischen Schalter. Die Art und Weise dieser Umschalter funktioniert, ist durch das up-scaling eine kreisförmige clipping-Pfad innerhalb einer abgerundeten container. Die container schneidet den Inhalt durch overflow: hidden, also das doppelte clipping.

Ein weiterer wichtiger Teil der demo ist mit zwei alternierenden Versionen im markup. Sie sind das original und seine yin-yang invertiert, gespiegelt kopieren. Mit zwei Versionen statt einer ist, das Risiko, sich wiederholende, eine Frage der Bequemlichkeit. Mit zwei, brauchen wir nur, um einen übergang für die erste version. Wir können dann verwenden die meisten es für die zweite. Am Ende des übergangs der toggle-schaltet die entgegengesetzte version. Als die umgekehrte version ist identisch mit der vorhergehenden end-Zustand, ist es unmöglich zu erkennen, die Verschiebung. Die gute Sache über diese Technik ist die Wiederverwendung von teilen der animation. Der Nachteil ist der jank, die wir erhalten, wenn eine Unterbrechung der animation. Das passiert, wenn der Benutzer die Schläge wechseln, bevor die animation abgeschlossen ist.

Lassen Sie uns wieder mal unter die Haube schauen:

Schlusswort

Man könnte denken: die Exploration ist eine Sache, aber was ist Produktion? Kann ich mit clipping-Pfade auf einer Website zur Zeit arbeite ich an? Ist es bereit für die prime time?

Gut, dass die Frage nicht eine einfache Antwort. Es gibt, unter anderem, zwei Probleme näher betrachten:

1. Browser-Unterstützung
2. Leistung

Zu der Zeit des Schreibens gibt es, laut caniuse, über 93% browser-Unterstützung. Ich würde sagen, wir sind auf der Schwelle von der Masse. Beachten Sie, diese Zahl nimmt der WebKit-Präfix berücksichtigt.

Es gibt auch immer das IE-argument, aber es ist wirklich kein argument für mich. Ich kann nicht sehen, dass es sich lohnt, zu gehen die extra Meile für den IE. Sollten Sie erstellen workarounds für eine unsichere browser? Ihre Benutzer sind besser dran mit einem modernen browser. Es gibt, natürlich, ein paar seltene Fälle, wo legacy ist ein muss. Aber Sie wahrscheinlich nicht berücksichtigen, modernen CSS überhaupt in solchen Fällen.

Wie wäre die Leistung dann? Gut, die Leistung schwierig wird, wie die Dinge sich häufen, aber nichts, dass ich sagen würde, dass würde uns daran hindern, mit clipping-Pfade heute. Es ist immer die gemessene Leistung zählt. Es ist wahrscheinlich, dass die Beschneidung im Durchschnitt verursacht eine größere Leistungseinbußen als bei anderen CSS-Regeln. Aber denken Sie daran, dass die Praktiken, die wir haben die hier behandelt werden, sind Empfehlungen, kein Gesetz. Sie als solche zu behandeln. Machen Sie eine Gewohnheit aus der Messung der Leistung.

Gehen Sie auf, schneiden Sie Ihre web-Seiten in Stücke. Sehen, was passiert!