S’amuser avec les effets de survol de liens
Un concepteur avec qui je travaille présentait des comps lors d’une récente réunion d’équipe. Elle avait fait un travail formidable pour assembler le concept d’un système de conception, des composants aux modèles et tout le reste qui rendrait tout développeur frontal heureux.
Mais il y avait un minuscule détail dans son travail qui a attiré mon attention: l’état de vol stationnaire pour les liens était un gribouillage.
Huh! Non seulement je n’avais pas vu ça auparavant, mais l’idée ne m’avait même jamais traversé l’esprit. Il s’avère qu’il en existe de nombreuses instances sur des sites en direct, l’une étant Le contour. C’est la mise en œuvre qui a inspiré le design.
Cool, je me suis dit. Nous pouvons faire quelque chose comme un dégradé d’arrière-plan linéaire ou même une image d’arrière-plan. Mais ! Ce n’était pas la fin de la conception. Il s’avère que c’est aussi animé. Encore une fois, à partir du Contour:
Whoa! C’est assez sauvage. Je ne savais pas comment aborder cela, honnêtement, car animer l’une de mes idées initiales serait difficile, en particulier pour le support multi-navigateurs.
Alors, comment le Contour a-t-il fonctionné? Il s’avère que c’est SVG. Nous pouvons faire un chemin sinueux et l’animer assez facilement:
Voir le Gribouillage du stylo de Geoff Graham (@geoffgraham) sur CodePen.
Mais comment cela fonctionne-t-il avec un lien? Eh bien, nous pouvons utiliser SVG sur la propriété background-image:
Voir le Gribouillage du stylo de Geoff Graham (@geoffgraham) sur CodePen.
Mais c’est un peu merdique parce qu’on ne peut pas vraiment animer ça. Nous avons besoin de meilleures valeurs pour cela. Cependant, nous pouvons inline CSS directement sur le SVG dans la propriété background-image. Nous ne pouvons pas simplement copier et coller le code SVG dans la propriété, mais nous pouvons avec un encodage approprié:
Voir le Gribouillage de stylo de Geoff Graham (@geoffgraham) sur CodePen.
Et, comme SVG peut contenir ses propres styles dans le balisage, l’animation peut être lancée directement dans la propriété background-image, de la même manière que nous le ferions avec CSS dans une tête de document HTML ou CSS en ligne en HTML.
Voir le gribouillage du stylo par Geoff Graham (@geoffgraham) sur CodePen.
Nous pouvons le styliser un peu différemment, si nous le souhaitons:
Voir le lien de stylo Effectz–Gribouillage de Geoff Graham (@geoffgraham) sur CodePen.
C’est inspirant !
Je ne sais pas si un gribouillage animé fait une bonne expérience utilisateur et, franchement, ce n’est pas le but de ce post. Le fait est que Le contour avait une idée amusante avec une implémentation CSS lisse.
Cela m’a fait penser à d’autres styles de survol non standard (peut-être même non conventionnels) que nous pouvons faire avec des liens. Encore une fois, mettre de côté la convivialité et passer un bon moment avec CSS
L’effet de bordure en arrière-plan
Peut-être que cette même bordure inférieure sur le lien par défaut peut se développer et devenir l’arrière-plan complet du lien au survol:
Voir le lien de plume Effectz–Background en survol par Geoff Graham (@geoffgraham) sur CodePen.
Diable, nous pouvons même faire quelque chose de similaire horizontalement:
Voir le lien de stylo Effectz– Arrière-plan horizontal de Geoff Graham (@geoffgraham) sur CodePen.
L’effet de texte décrit
Supprimons la couleur de la police et laissons un contour derrière.
Voir le lien de stylo Effectz–Outline en survol par Geoff Graham (@geoffgraham) sur CodePen.
L’effet de texte surélevé
Une autre idée est de soulever le texte comme s’il sortait de la page au survol:
Voir le lien de plume Effectz – Texte surélevé au survol par Geoff Graham (@geoffgraham) sur CodePen.
L’effet d’échange de polices-oo
C’est tellement peu pratique que cela me rend LOL, mais pourquoi pas:
Voir la police Effectz–Swap de lien de stylo en survol par Geoff Graham (@geoffgraham) sur CodePen.
L’effet « Turn it Up, Chris”
Désolé, Chris. Tu sais que tu l’aimes. ❤️
Voir le lien du stylo Effectz – Montez-le, Chris! par Geoff Graham (@geoffgraham) sur CodePen.