Les effets cool CSS survolent des effets qui utilisent l'écrêtage d'arrière-plan, les masques et la 3D

Nous avons maintenant parcouru une série de messages sur les approches intéressantes des effets de volants CSS. Nous avons commencé avec un tas d'exemples qui utilisent les propriétés d'arrière-plan CSS, puis avons ensuite été passés à la propriété Text-Shadow où nous n'avons techniquement pas utilisé d'ombres. Nous les avons également combinés avec des variables CSS et CALC () pour optimiser le code et faciliter la gestion.

Dans cet article, nous allons construire ces deux articles pour créer des animations CSS encore plus complexes. Nous parlons de coupure d'arrière-plan, de masques CSS et même de se mouiller les pieds avec des perspectives 3D. En d'autres termes, nous allons explorer les techniques avancées cette fois-ci et repousser les limites de ce que CSS peut faire avec les effets de survol!

Série d'effets de volants cool:

1. Effets de survol cool qui utilisent les propriétés d'arrière-plan
2. Effets de survol cool qui utilisent CSS TextShadow
3. Effets de volants cool qui utilisent l'écrêtage d'arrière-plan, les masques et la 3D ( vous êtes ici! )

Voici juste un avant-goût de ce que nous faisons:

Effects de survol en utilisant le clip de fond

Parlons de clip de fond. Cette propriété CSS accepte une valeur de mot-clé texte qui nous permet d'appliquer des gradients au texte d'un élément au lieu de l' arrière-plan réel.

Ainsi, par exemple, nous pouvons modifier la couleur du texte sur le plan de survol, car nous utiliserions la propriété de couleur, mais de cette façon, nous animons le changement de couleur:

Tout ce que j'ai fait, c'est ajouter du clip de fond: du texte à l'élément et de la transition de la position d'arrière-plan. Ne doit pas être plus compliqué que ça!

Mais nous pouvons faire mieux si nous combinons plusieurs gradients avec différentes valeurs de coupure d'arrière-plan.

Dans cet exemple, j'utilise deux gradients différents et deux valeurs avec des plans d'arrière-plan. Le premier gradient d'arrière-plan est coupé au texte (grâce à la valeur du texte) pour définir la couleur sur Hover, tandis que le deuxième gradient d'arrière-plan crée le sous-trait inférieur (grâce à la valeur de la boîte de padding). Tout le reste est tout droit copié à partir du travail que nous avons fait dans le premier article de cette série.

Que diriez-vous d'un effet de survol où la barre glisse de haut en bas d'une manière qui semble que le texte soit scanné, puis coloré:

Cette fois, j'ai changé la taille du premier gradient pour créer la ligne. Ensuite, je le glisse avec l'autre dégradé qui met à jour la couleur du texte pour créer l'illusion! Vous pouvez visualiser ce qui se passe dans ce stylo:

Nous avons seulement rayé la surface de ce que nous pouvons faire avec nos pouvoirs de clignotage en arrière-plan! Cependant, cette technique est probablement quelque chose que vous voudriez éviter d'utiliser dans la production, car Firefox est connu pour avoir beaucoup de bogues rapportés liés à l'arrière-plan. Safari a également des problèmes de soutien. Cela ne laisse que Chrome avec un soutien solide à ce genre de choses, alors peut-être l'ouvrir pendant que nous continuons.

Passons à un autre effet de survol en utilisant le clip de fond:

Vous pensez probablement que celui-ci a l'air super facile par rapport à ce que nous venons de couvrir - et vous avez raison, il n'y a rien d'antancière ici. Tout ce que je fais, c'est glisser un dégradé tout en augmentant la taille d'un autre.

Mais nous sommes ici pour regarder les effets avancés de volants, non? Changeons-le un peu pour que l'animation soit différente lorsque le curseur de la souris quitte l'élément. Même effet de survol, mais une fin différente de l'animation:

Cool non? disséquons le code:

 .Hover {
  --c: # 1095C1; / * la couleur * /

  Couleur: # 0000;
  arrière-plan: 
    Gradient linéaire (90deg, #FFF 50%, var (- c) 0) calc (100% - var (--_ p, 0%)) / 200%, 
    Gradient linéaire (var (- c) 0 0) 0% 100% / var (--_ p, 0%) sans répétition,
    var (--_ c, # 0000);
  -Webkit-Background-Clip: texte, padding-box, padding-box;
          Clip d'arrière-plan: text, padding-box, padding-box;
  Transition: 0s, couleur .5s, couleur fond .5S;
}
.Hover: Hover {
  Couleur: #FFF;
  --_ c: var (- c);
  --_ P: 100%;
  Transition: 0,5s, couleur 0s 0,5, couleur arrière 0s .5S;
}

Nous avons trois couches d'arrière-plan - deux gradients et la couleur d'arrière-plan définie à l'aide de la variable —_ C qui est initialement définie sur transparent (# 0000). En survol, nous changeons la couleur en blanc et la variable —_ C en couleur principale (--c).

Voici ce qui se passe sur cette transition: premièrement, nous appliquons une transition à tout, mais nous retardons la couleur et la couleur d'arrière-plan de 0,5 s pour créer l'effet coulissant. Juste après cela, nous changeons la couleur et la couleur d'arrière-plan. Vous ne remarquez peut-être aucun changement visuel car le texte est déjà blanc (grâce au premier gradient) et l'arrière-plan est déjà défini sur la couleur principale (grâce au deuxième gradient).

Ensuite, sur Mouse Out, nous appliquons un changement instantané à tout (remarquez le délai 0s), à l'exception de la couleur et de la couleur d'arrière-plan qui ont une transition. Cela signifie que nous avons remis tous les gradients à leurs états initiaux. Encore une fois, vous ne verrez probablement aucun changement visuel car la couleur du texte et la couleur d'arrière-plan ont déjà changé sur le plan de survol.

Enfin, nous appliquons la décoloration à la couleur et à une couleur d'arrière-plan pour créer la partie de la souris de l'animation. Je sais, il peut être difficile de saisir, mais vous pouvez mieux visualiser l'astuce en utilisant différentes couleurs:

Soulevez ce qui précède souvent et vous verrez les propriétés qui animer sur la survol et celles qui animent sur la souris. Vous pouvez alors comprendre comment nous avons atteint deux animations différentes pour le même effet de volants.

N'oublions pas la technique de commutation à sec que nous avons utilisée dans les articles précédents de cette série pour aider à réduire la quantité de code en utilisant une seule variable pour le commutateur:

 .Hover {
  --c: 16 149 193; / * la couleur à l'aide du format RVB * /

  Couleur: RGB (255 255 255 / var (--_ i, 0));
  arrière-plan:
    / * Gradient # 1 * /
    Gradient linéaire (90deg, #FFF 50%, RGB (var (- c)) 0) CALC (100% - var (—_ i, 0) * 100%) / 200%,
    / * Gradient # 2 * /
    Gradient linéaire (RGB (var (- c)) 0 0) 0% 100% / calc (var (--_ i, 0) * 100%) sans répétition,
    / * Couleur d'arrière-plan * /
    rgb (var (- c) / var (--_ i, 0));
  -Webkit-Background-Clip: texte, padding-box, padding-box;
          Clip d'arrière-plan: text, padding-box, padding-box;
  --_ T: calc (var (--_ i, 0) *. 5s);
  transition: 
    var (--_ t),
    couleur calc (.5s - var (--_ t)) var (--_ t),
    Background-Color calc (.5s - var (—_ t)) var (--_ t);
}
.Hover: Hover {
  --_ i: 1;
}

Si vous vous demandez pourquoi j'ai atteint la syntaxe RVB pour la couleur principale, c'est parce que je devais jouer avec la transparence alpha. J'utilise également la variable --_ t pour réduire un calcul redondant utilisé dans la propriété de transition.

Avant de passer à la partie suivante, voici plus d'exemples d'effets de survol que j'ai fait il y a quelque temps qui reposent sur le clip de fond. Il serait trop long de détailler chacun, mais avec ce que nous avons appris jusqu'à présent, vous pouvez facilement comprendre le code. Cela peut être une bonne inspiration d'essayer certains d'entre eux seuls sans regarder le code.

Je sais, je sais. Ce sont des effets de volants fous et rares et je me rends compte qu'ils sont trop dans la plupart des situations. Mais c'est comment pratiquer et apprendre CSS. N'oubliez pas que nous repoussons les limites des effets de survol du CSS. L'effet de survol peut être une nouveauté, mais nous apprenons de nouvelles techniques en cours de route qui peuvent très certainement être utilisées pour d'autres choses.

Effets de survol en utilisant le masque CSS

Devinez quoi? La propriété CSS Mask utilise les gradients de la même manière que la propriété d'arrière-plan, vous verrez donc que ce que nous faisons ensuite est assez simple.

Commençons par construire un soulignement fantaisie.

J'utilise un arrière-plan pour créer une bordure inférieure en zig-zag dans cette démo. Si je voulais appliquer une animation à ce soulignement, il serait fastidieux de le faire en utilisant les propriétés d'arrière-plan seules.

Entrez le masque CSS.

Le code peut sembler étrange, mais la logique est toujours la même que nous l'avons fait avec toutes les animations d'arrière-plan précédentes. Le masque est composé de deux gradients. Le premier gradient est défini avec une couleur opaque qui couvre la zone de contenu (grâce à la valeur de la boîte de contenu). Ce premier gradient rend le texte visible et cache la bordure zig-zag inférieure. Content-box est la valeur de masque-clip qui se comporte de la même manière que le clip

 Box de contenu linéaire-gradient (# 000 0 0)

Le deuxième gradient couvrira toute la zone (grâce à la boîte de padding). Celui-ci a une largeur définie à l'aide de la variable —_ P, et il sera placé sur le côté gauche de l'élément.

 Linear-Gradient (# 000 0 0) 0 / var (--_ p, 0%) Padding-Box

Maintenant, tout ce que nous avons à faire est de modifier la valeur de --_ p sur le plan pour créer un effet coulissant pour le deuxième gradient et révéler le soulignement.

 .Hover: Hover {
  --_ P: 100%;
  couleur: var (- c);
}

La démo suivante utilise avec les couches de masque comme arrière-plans pour mieux voir l'astuce. Imaginez que les parties vertes et rouges sont les parties visibles de l'élément tandis que tout le reste est transparent. C'est ce que le masque fera si nous utilisons les mêmes gradients avec.

Avec une telle astuce, nous pouvons facilement créer beaucoup de variations en utilisant simplement une configuration de gradient différente avec la propriété Mask:

Chaque exemple de cette démo utilise une configuration de gradient légèrement différente pour le masque. Remarquez également la séparation du code entre la configuration d'arrière-plan et la configuration du masque. Ils peuvent être gérés et maintenus indépendamment.

Modifions la configuration d'arrière-plan en remplaçant plutôt le zig-zag avec un soulignement ondulé:

Une autre collection d'effets de survol! J'ai gardé toutes les configurations de masque et changé l'arrière-plan pour créer une forme différente. Maintenant, vous pouvez comprendre comment j'ai pu atteindre 400 effets de survol sans pseudo-éléments - et nous pouvons encore en avoir plus!

Comme, pourquoi pas quelque chose comme ceci:

Voici un défi pour vous: la frontière de cette dernière démo est un dégradé utilisant la propriété Mask pour le révéler. Pouvez-vous comprendre la logique derrière l'animation? Il peut sembler complexe à première vue, mais il est super similaire à la logique que nous avons examinée pour la plupart des autres effets de survol qui reposent sur les gradients. Postez votre explication dans les commentaires!

Effets de survol en 3D

Vous pouvez penser qu'il est impossible de créer un effet 3D avec un seul élément (et sans recourir à des pseudo-éléments!) Mais CSS a un moyen de le faire.

Ce que vous voyez, il n'y a pas de véritable effet 3D, mais plutôt une illusion parfaite de 3D dans l'espace 2D qui combine les propriétés CSS, CSS, PATH CLIP et transform.

La première chose que nous faisons est de définir nos variables:

 --c: # 1095C1; /* couleur */
--B: .1em; / * longueur de bordure * /
--d: 20px; / * profondeur du cube * /

Ensuite, nous créons une bordure transparente avec des largeurs qui utilisent les variables ci-dessus:

 --_ s: calc (var (- d) var (- b));
couleur: var (- c);
Border: solide # 0000; / * Quatrième valeur définit l'alpha de la couleur * /
largeur de bordure: var (- b) var (- b) var (--_ s) var (--_ s);

Les côtés supérieurs et droits de l'élément doivent tous deux égaler la valeur - b tandis que les côtés inférieurs et gauche doivent être égaux à la somme de --b et - d (qui est la variable --_ s).

Pour la deuxième partie de l'astuce, nous devons définir un dégradé qui couvre toutes les zones frontalières que nous avons définies précédemment. Un gradient conique fonctionnera pour cela:

 Contexte: gradient conique (
  à gauche var (--_ s) inférieur var (--_ s),
  # 0000 90deg, var (- c) 0
 ) 
 0 100% / calc (100% - var (- b)) CALC (100% - var (- b)) box de bordure;

Nous ajoutons un autre dégradé pour la troisième partie de l'astuce. Celui-ci utilisera deux valeurs de couleur blanche semi-transparentes qui chevauchent le premier gradient précédent pour créer différentes nuances de la couleur principale, nous donnant l'illusion de l'ombrage et de la profondeur.

 gradient conique (
  à gauche var (- d) en bas var (- d),
  # 0000 90DEG,
  RVB (255 255 255 / 0,3) 0 225DEG,
  RGB (255 255 255 / 0,6) 0
) Border-Box

La dernière étape consiste à appliquer un chemin de clip CSS pour couper les coins pour cette sensation de longue ombre:

 Path de clip: polygone (
  0% var (- d), 
  var (- d) 0%, 
  100% 0%, 
  100% calc (100% - var (- d)), 
  calc (100% - var (- d)) 100%, 
  0% 100%
)

C'est tout! Nous venons de faire un rectangle 3D avec rien d'autre que deux gradients et un chemin de clip que nous pouvons facilement ajuster en utilisant les variables CSS. Maintenant, tout ce que nous avons à faire est de l'animer!

Remarquez les coordonnées de la figure précédente (indiquée en rouge). Mettons à jour ceux pour créer l'animation:

 Path de clip: polygone (
  0% var (- d), / * inverse var (- d) 0% * /
  var (- d) 0%, 
  100% 0%, 
  100% calc (100% - var (- d)), 
  calc (100% - var (- d)) 100%, / * inverse 100% calc (100% - var (- d)) * / 
  0% 100% / * inverse var (- d) calc (100% - var (- d)) * /
)

L'astuce consiste à cacher les parties en bas et gauche de l'élément, donc tout ce qui reste est un élément rectangulaire sans profondeur.

Ce stylo isole la partie clip-chemin de l'animation pour voir ce qu'elle fait:

La touche finale consiste à déplacer l'élément dans la direction opposée en utilisant Translate - et l'illusion est parfaite! Voici l'effet utilisant différentes valeurs de propriété personnalisées pour des profondeurs variables:

Le deuxième effet de survol suit la même structure. Tout ce que j'ai fait, c'est mettre à jour quelques valeurs pour créer un mouvement supérieur gauche au lieu d'un haut à droite.

Combinant des effets!

Ce qui est génial à propos de tout ce que nous avons couvert, c'est qu'ils se complètent tous. Voici un exemple où j'ajoute l'effet Text-Shadow du deuxième article de la série à la technique d'animation d'arrière-plan du premier article tout en utilisant le truc 3D que nous venons de couvert:

Le code réel peut être confus au début, mais allez-y et disséquez-le un peu plus loin - vous remarquerez qu'il s'agit simplement d'une combinaison de ces trois effets différents, à peu près baisés ensemble.

Permettez-moi de terminer cet article avec un dernier effet de survol où je combine l'arrière-plan, le chemin de clip et un soupçon de perspective pour simuler un autre effet 3D:

J'ai appliqué le même effet aux images et le résultat était assez bon pour simuler la 3D avec un seul élément:

Vous voulez un regard plus approfondi sur le fonctionnement de cette dernière démo? J'ai écrit quelque chose dessus.

Emballage

Oof, nous avons fini! Je sais, c'est beaucoup de CSS délicats mais (1) nous sommes sur le bon site Web pour ce genre de chose, et (2) l'objectif est de pousser notre compréhension des différentes propriétés CSS à de nouveaux niveaux en leur permettant d'interagir les uns avec les autres.

Vous demandez peut-être quelle est la prochaine étape à partir d'ici maintenant que nous fermons cette petite série d'effets avancés de volant CSS. Je dirais que la prochaine étape consiste à prendre tout ce que nous avons appris et à les appliquer à d'autres éléments, comme les boutons, les éléments de menu, les liens, etc. Nous avons gardé les choses assez simples en ce qui concerne la limitation de nos astuces à un élément de cap pour cette raison exacte; L'élément réel n'a pas d'importance. Prenez les concepts et courez avec eux pour créer, expérimenter et apprendre de nouvelles choses!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!