Effets de survol CSS sympas qui utilisent l'écrêtage d'arrière-plan, les masques et la 3D

Nous avons parcouru une série d'articles sur des approches intéressantes des effets de survol CSS. Nous avons commencé par un tas d'exemples qui utilisent CSS background propriétés, puis est passé à la text-shadow propriété 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 le rendre facile à gérer.

Dans cet article, nous nous appuierons sur ces deux articles pour créer des animations de survol CSS encore plus complexes. Nous parlons d'écrêtage 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 cette fois-ci des techniques avancées et repousser les limites de ce que CSS peut faire avec les effets de survol !

---

Voici juste un avant-goût de ce que nous préparons :

Effets de survol à l'aide de background-clip

Parlons de background-clip. Cette propriété CSS accepte un text valeur du mot clé qui nous permet d'appliquer des dégradés à la texte d'un élément au lieu du réel fond.

Ainsi, par exemple, nous pouvons changer la couleur du texte au survol comme nous le ferions en utilisant le color propriété, mais de cette façon nous animons le changement de couleur :

Tout ce que j'ai fait c'est ajouter background-clip: text à l'élément et transition le background-position. Ça ne doit pas être plus compliqué que ça !

Mais nous pouvons faire mieux si nous combinons plusieurs dégradés avec différentes valeurs d'écrêtage d'arrière-plan.

Dans cet exemple, j'utilise deux dégradés différents et deux valeurs avec background-clip. Le premier dégradé de fond est clippé sur le texte (grâce au text valeur) pour définir la couleur au survol, tandis que le deuxième dégradé d'arrière-plan crée le soulignement inférieur (grâce à la padding-box évaluer). Tout le reste est directement copié à partir de le 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 de manière à donner l'impression que le texte est numérisé, puis coloré :

Cette fois, j'ai changé la taille du premier dégradé 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 n'avons fait qu'effleurer la surface de ce que nous pouvons faire avec notre background-clippouvoirs de ping ! Cependant, cette technique est probablement quelque chose que vous voudriez éviter d'utiliser en production, car Firefox est connu pour avoir un beaucoup de bugs signalés lié à background-clip. Safari a également des problèmes de support. Cela ne laisse que Chrome avec un support solide pour ce genre de choses, alors peut-être l'ouvrir pendant que nous continuons.

Passons à un autre effet de survol en utilisant background-clip:

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'extraordinaire ici. Tout ce que je fais, c'est faire glisser un dégradé tout en augmentant la taille d'un autre.

Mais nous sommes ici pour examiner les effets de survol avancés, n'est-ce pas ? Modifions-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 à l'animation :

Cool non ? disséquons le code :

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Nous avons trois calques d'arrière-plan - deux dégradés et le background-color défini à l'aide --_c variable initialement définie sur transparent (#0000). Au survol, nous changeons la couleur en blanc et le --_c variable à la couleur principale (--c).

Voici ce qui se passe à ce sujet transition: D'abord, on applique une transition à tout mais on retarde la color ainsi que background-color by 0.5s pour créer l'effet de glissement. Juste après cela, nous changeons le color et par background-color. Vous ne remarquerez peut-être aucun changement visuel car le texte est déjà blanc (grâce au premier dégradé) et l'arrière-plan est déjà défini sur la couleur principale (grâce au deuxième dégradé).

Ensuite, à la sortie de la souris, nous appliquons un changement instantané à tout (remarquez le 0s retard), à l'exception du color ainsi que background-color qui ont une transition. Cela signifie que nous remettons tous les gradients à leurs états initiaux. Encore une fois, vous ne verrez probablement aucun changement visuel car le texte color ainsi que background-color déjà changé au survol.

Enfin, nous appliquons le fondu à la couleur et un background-color pour créer la partie mouse-out de l'animation. Je sais, cela peut être difficile à saisir mais vous pouvez mieux visualiser l'astuce en utilisant différentes couleurs :

Survolez ce qui précède plusieurs fois et vous verrez les propriétés qui s'animent au survol et celles qui s'animent au passage de la souris. Vous pouvez alors comprendre comment nous sommes arrivés à deux animations différentes pour le même effet de survol.

Il ne faut pas oublier la technique de commutation DRY 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; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color 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 choisi la syntaxe RVB pour la couleur principale, c'est parce que j'avais besoin de jouer avec la transparence alpha. j'utilise aussi la variable --_t pour réduire un calcul redondant utilisé dans le transition propriété.

Avant de passer à la partie suivante, voici d'autres exemples d'effets de survol que j'ai réalisés il y a quelque temps et qui reposent sur background-clip. 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 seul sans regarder le code.

Je sais je sais. Ce sont des effets de survol fous et peu courants et je me rends compte qu'ils sont trop dans la plupart des situations. Mais c'est ainsi que pratiquer et apprendre le CSS. Rappelez-vous, nous pousser les limites des effets de survol CSS. L'effet de survol est 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 à l'aide de CSS mask

Devine quoi? Le CSS mask La propriété utilise les dégradés de la même manière que la background propriété le fait, vous verrez donc que ce que nous allons faire ensuite est assez simple.

Commençons par construire un soulignement fantaisie.

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

Entrez CSS mask.

Le code peut sembler étrange mais la logique est toujours la même que celle que nous avons faite avec toutes les animations d'arrière-plan précédentes. La mask est composé de deux dégradés. Le premier dégradé est défini avec une couleur opaque qui recouvre la zone de contenu (grâce au content-box évaluer). Ce premier dégradé rend le texte visible et masque la bordure inférieure en zigzag. content-box est mask-clip valeur qui se comporte comme background-clip

linear-gradient(#000 0 0) content-box

Le deuxième dégradé couvrira toute la zone (grâce à padding-box). Celui-ci a une largeur qui est définie à l'aide de la --_p variable, 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 changer la valeur de --_p au survol pour créer un effet de glissement pour le deuxième dégradé et révéler le soulignement.

.hover:hover { --_p: 100%; color: var(--c);
}

La démo suivante utilise les calques de masque comme arrière-plan pour mieux voir l'astuce se dérouler. Imaginez que les parties vertes et rouges sont les parties visibles de l'élément alors que tout le reste est transparent. C'est ce que fera le masque si nous utilisons les mêmes dégradés avec lui.

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

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

Modifions la configuration de l'arrière-plan en remplaçant le soulignement en zigzag par un soulignement ondulé :

Une autre collection d'effets de survol ! J'ai conservé 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 pour atteindre 400 effets de survol sans pseudo-éléments — et on peut encore en avoir plus !

Genre, pourquoi pas quelque chose comme ça :

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

Effets de survol en 3D

Vous pensez peut-être 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 d'y arriver.

Ce que vous y voyez n'est pas un véritable effet 3D, mais plutôt une parfaite illusion de 3D dans l'espace 2D qui combine le CSS background, clip-pathet transform .

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

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

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

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Les côtés supérieur et droit de l'élément doivent tous deux être égaux au --b valeur tandis que les côtés inférieur et gauche doivent être égaux à la somme de --b ainsi que --d (qui est le --_s variable).

Pour la deuxième partie de l'astuce, nous devons définir un dégradé qui couvre toutes les zones de bordure que nous avons définies précédemment. UN conic-gradient ça marchera pour ça :

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

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

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

La dernière étape consiste à appliquer un CSS clip-path pour couper les coins pour cette sensation d'ombre portée :

clip-path: polygon( 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 créer un rectangle 3D avec rien d'autre que deux dégradés et un clip-path que nous pouvons facilement ajuster à l'aide de variables CSS. Maintenant, il ne nous reste plus qu'à l'animer !

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

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

L'astuce consiste à masquer les parties inférieure et gauche de l'élément afin qu'il ne reste qu'un élément rectangulaire sans aucune profondeur.

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

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

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

Combiner les effets!

Ce qui est génial avec tout ce que nous avons couvert, c'est qu'ils se complètent tous. Voici un exemple où j'ajoute le text-shadow effet du deuxième article dans la série au background technique d'animation du premier article tout en utilisant l'astuce 3D que nous venons de couvrir :

Le code réel peut être déroutant 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 mélangés.

Permettez-moi de terminer cet article avec un dernier effet de survol où je combine l'arrière-plan, le chemin du clip et une touche 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 voir de plus près le fonctionnement de cette dernière démo ? J'ai écrit quelque chose dessus.

Emballage en place

Ouf, nous avons terminé ! Je sais, c'est beaucoup de CSS délicat mais (1) nous sommes sur le bon site Web pour ce genre de chose, et (2) le but est de pousser notre compréhension des différentes propriétés CSS à de nouveaux niveaux en leur permettant d'interagir avec un autre.

Vous vous demandez peut-être quelle est la prochaine étape maintenant que nous clôturons cette petite série d'effets de survol CSS avancés. Je dirais que la prochaine étape consiste à prendre tout ce que nous avons appris et à l'appliquer à d'autres éléments, comme les boutons, les éléments de menu, les liens, etc. Nous avons gardé les choses assez simples en limitant nos astuces à un élément d'en-tête 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 !

---

Effets de survol CSS sympas qui utilisent l'écrêtage d'arrière-plan, les masques et la 3D publié à l'origine le Astuces CSS. Vous devriez recevoir le bulletin.

• Coinsmart. Le meilleur échange Bitcoin et Crypto d'Europe.
• Platoblockchain. Intelligence métaverse Web3. Connaissance amplifiée. ACCÈS LIBRE.
• CryptoHawk. Radar Altcoins. Essai gratuit.
• Source : https://css-tricks.com/css-hover-effects-background-masks-3d/