Écrasement, coupure et plus d'écrêtage!

L'utilisation magique de CSS clip-path Attribut: Explorez une variété de techniques créatives et de cas d'application. Cet article partagera une série d'effets intéressants réalisés à l'aide clip-path , dans l'espoir de vous inspirer à l'appliquer dans votre projet ou à faire des tentatives créatives.

Ceci est le troisième article sur clip-path publié par l'auteur sur CSS-Tricks. Si vous voulez connaître l'arrière-plan, vous pouvez d'abord lire l'article suivant:

• Créer des effets interactifs à l'aide de CSS clip-path
• Créer des effets interactifs à l'aide de CSS clip-path , partie 2

Cet article présentera de nouvelles idées!

Creative One: Double Cut

Une astuce intelligente consiste à utiliser plusieurs fois clip-path pour recadrer du contenu. Cela peut sembler évident, mais en fait peu de gens utilisent ce concept.

Par exemple, regardons un menu élargi:

clip-path ne peut être appliqué qu'une seule fois sur un seul nœud DOM. Un nœud ne peut pas avoir plusieurs instances actives des mêmes règles CSS en même temps, ce qui signifie que chaque instance n'a qu'un seul clip-path . Cependant, il n'y a pas de limite supérieure sur le nombre de fois qu'un nœud de culture combiné est combiné. Par exemple, nous pouvons couper un<div> Placé dans un autre recadré<code><div> À l'intérieur, et ainsi de suite. Dans la relation ancestrale du nœud Dom, nous pouvons appliquer autant de cultures indépendantes. C'est exactement ce qui est fait dans la démonstration ci-dessus. J'ai un nœud recadré pour remplir un autre nœud recadré. Le nœud parent agit comme la limite et les nœuds enfants remplissent le nœud parent lors de la mise à l'échelle. Cela produit un effet inhabituel d'un menu arrondi. Considérez-le comme une méthode avancée de <code>overflow: hidden .

Bien sûr, vous pouvez penser que SVG est plus adapté à cette fin. Par rapport à clip-path , SVG peut obtenir plus de fonctions. Cela inclut le zoom lisse. Si clip-path prend en charge la courbe de Bezier, la situation sera différente. Mais au moment de la rédaction, ce n'est pas le cas. Quoi qu'il en soit, clip-path est très pratique. Avec un nœud, une règle CSS, vous pouvez commencer. En ce qui concerne la démonstration ci-dessus, clip-path fait le travail et est donc une option viable.

J'ai fait une courte vidéo pour expliquer comment le menu fonctionne en interne:

Creative Two: Scale Clipping Path

Une autre astuce (moins évidente) consiste à utiliser clip-path pour la mise à l'échelle. Nous pouvons réellement utiliser la transition CSS pour animer clip-path !

Le système de transition est incroyable dans la façon dont il est construit. À mon avis, son ajout est l'un des plus grands sauts dans le développement de la technologie Web ces dernières années. Il prend en charge les transitions de différentes valeurs. clip-path est une valeur acceptable que nous pouvons animation. L'animation signifie généralement l'interpolation entre deux valeurs extrêmes. Pour clip-path , cela signifie l'interpolation entre deux chemins complètement différents. C'est là que le système d'animation fins du Web montre ses avantages. Il fonctionne non seulement pour les valeurs uniques, mais aussi pour les ensembles de valeur animés.

Lors de l'animation clip-path , chaque coordonnée est interpolée séparément . C'est très important. Cela rend l'animation clip-path cohérente et lisse.

Jetons un coup d'œil à la démo. Cliquez sur l'image pour redémarrer l'effet:

Dans cette démo, j'ai utilisé la transition clip-path . Il est utilisé pour évoluer à partir d'un clip-path couvrant une petite zone à un autre énorme clip-path . La version minimale de clip-path est beaucoup plus petite que la résolution - en d'autres termes, elle n'est pas visible à l'œil nu lorsqu'elle est appliquée. L'autre valeur extrême est légèrement supérieure à la fenêtre. À ce niveau de zoom, il n'y a pas de culture visible, car toutes les cultures se produisent en dehors de la zone visible. L'animation entre ces deux clip-path différentes aura des effets intéressants. La forme recadrée semble montrer ce qui est derrière lorsqu'elle est mise à l'échelle.

Vous avez peut-être remarqué que cette démo utilise différentes formes. Dans ce cas, j'ai utilisé le logo de la marque de baskets populaire. Cela vous donne une idée de la façon dont cela fonctionne dans un scénario plus réaliste.

De même, voici une vidéo qui explique les détails techniques en détail:

Creative Three: Crop Recouper

Une autre idée est de créer des effets de mise en évidence à l'aide clip-path . Par exemple, supposons que nous voulons utiliser clip-path pour créer l'état actif d'un menu.

Le chemin de découpage ci-dessus s'étend entre les différentes options de menu lorsque vous anime. De plus, nous avons utilisé une forme intéressante pour faire ressortir l'interface utilisateur.

Cette démo utilise une copie modifiée du même contenu, où la copie est située en haut du contenu existant. Il se trouve dans la même position exactement que l'unité de menu et est utilisé comme état actif. Essentiellement, cela ressemble à tout autre état d'activité régulière du menu. La différence est qu'il est créé à l'aide clip-path au lieu d'utiliser des styles CSS fantaisie sur les éléments HTML.

Utilisez clip-path pour créer des effets inhabituels ici. La forme inclinée est un aspect, mais nous obtenons également l'effet d'étirement. Le menu a deux cultures indépendantes - une à gauche et une à droite, ce qui permet à la récolte d'être animée à différents moments en utilisant des retards de transition. Le résultat est une animation extensible très détendue. Étant donné que l'assouplissement par défaut est non linéaire, les retards peuvent entraîner un léger effet de caoutchouc.

La deuxième astuce ici consiste à appliquer les retards en fonction de la direction. Si l'état actif doit se déplacer vers la droite, le côté droit doit d'abord démarrer l'animation et vice versa. J'obtiens une sensibilisation à la direction en utilisant un petit javascript pour appliquer la bonne classe en fonction des clics.

Four créatifs: tranche de tranche

À quelle fréquence voyez-vous des menus en expansion en circulaire sur le Web? Ridicule, juste! ? Eh bien, clip-path ne le rend pas seulement, c'est assez simple.

Les menus que nous voyons habituellement contiennent des liens disposés dans des menus en ligne ou même en ligne, tout comme le premier truc que nous avons vu auparavant. Ce que nous faisons ici, c'est mettre ces liens dans des arcs au lieu de rectangles. Bien sûr, utiliser des rectangles est la manière traditionnelle. L'idée ici est d'explorer des interactions plus adaptées aux mobiles et de garder à l'esprit deux principes UX spécifiques:

• Un objectif clair, facile à cliquer avec votre pouce
• Les changements se produisent près de la concentration - où est votre objectif visuel

Cette démonstration n'est pas spécifiquement destinée à clip-path . Je viens d'utiliser clip-path pour créer le stylo. Encore une fois, comme la démo du menu extensible précédent, c'est une question pratique. En utilisant clip-path et un rayon de bordure à 50%, j'ai immédiatement obtenu l'arc requis.

Creative Five: Boute à bascule

Le bouton à bascule attribue toujours des développeurs Web comme nous. Il semble qu'une nouvelle explication de bouton à bascule sera introduite chaque semaine. Ok, c'est à moi:

Cette démo est un remake de la capture d'écran Dribbble d'Oleg Frolov. Il combine les trois techniques décrites dans cet article. Ce sont:

• Bousculade
• Path de clip de mise à l'échelle
• Superpositions des cultures

Tous ces commutateurs semblent avoir une chose en commun. Ils se composent d'un fond ovale et d'un cercle, similaire à un véritable commutateur mécanique. La façon dont ce bouton à bascule fonctionne consiste à agrandir le clip-path circulaire à l'intérieur du conteneur circulaire. Le conteneur coupe le contenu via overflow: hidden , c'est-à-dire double cultures.

Un autre élément clé de la démo est l'utilisation de deux versions alternées dans la balise. Ce sont des versions originales et leurs copies en miroir d'inversion Yin-Yang. En utilisant deux versions au lieu d'une version, en prenant le risque de répétition, un problème pratique. Avec les deux versions, nous avons juste besoin de créer une transition pour la première version. Nous pouvons ensuite répéter la majeure partie de cela pour la deuxième version. À la fin de la transition, le bouton à bascule passe à la version opposée. Étant donné que la version inversée est la même que l'état final précédent, les modifications ne peuvent pas être trouvées. L'avantage de cette technique est de réutiliser des parties de l'animation. L'inconvénient est qu'il y aura un bégaiement lorsque l'animation sera interrompue. Cela se produit lorsque l'utilisateur appuie sur le bouton à bascule avant la fin de l'animation.

Jetons à nouveau un coup d'œil dans les coulisses:

Conclusion

Vous pourriez penser: l'exploration est une chose, mais qu'en est-il de la production? Puis-je utiliser clip-path sur le site Web sur lequel je travaille actuellement? Est-il prêt à entrer en production?

Eh bien, il n'y a pas de réponse facile à cette question. Entre autres choses, il y a deux autres problèmes qui doivent être soigneusement étudiés:

1. Support de navigateur
2. performance

Au moment de la rédaction du présent document, environ 93% des navigateurs le soutiennent selon Caniuse. Je pense que nous sommes sur le point de l'adoption de masse. Notez que ce numéro prend en compte le préfixe WebKit.

Il y a aussi l'argument de IE, mais ce n'est vraiment pas un argument pour moi. Je ne vois pas ce que signifie l'effort supplémentaire pour IE. Devriez-vous créer des solutions de contournement pour les navigateurs dangereux? Vos utilisateurs sont mieux utilisés par un navigateur moderne. Bien sûr, il y a des situations rares qui doivent être considérées comme un héritage. Mais dans ces cas, vous ne pouvez pas envisager d'utiliser du CSS moderne.

Alors qu'en est-il des performances? Eh bien, à mesure que les choses deviennent de plus en plus, les performances deviennent délicates, mais je ne dirai pas que rien nous empêchera d'utiliser clip-path aujourd'hui. Les performances qui sont toujours mesurées sont importantes. En moyenne, clip-path peut avoir un impact de performance plus important que les autres règles CSS. Mais rappelez-vous que la pratique que nous introduisons ici est un conseil, pas une loi. Considérez-les comme des suggestions. Développer l'habitude de mesurer les performances.

Allez-y et coupez votre page en morceaux. Voyez ce qui se passe!