10 extraits CSS pour créer de superbes effets de texte de soulignement animés

Le soulignement CSS par défaut fonctionne très bien. Qui pourrait le détester ?

Mais il y a toujours place pour améliorer les choses. Vous ne pensez peut-être pas que vous pouvez faire grand-chose avec les soulignements, mais si vous vous plongez dans l'animation CSS, vous réaliserez tout ce que vous pouvez vraiment faire !

J'ai trié d'innombrables styles de soulignement CSS et choisi mes meilleurs choix pour les meilleurs soulignements personnalisés sur le Web. Si l'un d'entre eux attire votre attention, n'hésitez pas à intervenir et à essayer de jouer avec le code source.

1. Souligné alterné

Si vous déplacez votre curseur entre ces liens, vous remarquerez quelque chose d'amusant. L'effet de soulignement dans le menu de navigation modifie en fait les styles entre les liens.

Non seulement cela, mais il se déplace dynamiquement à travers la navigation pour donner l'illusion qu'il s'agit d'un bloc singulier. Assez cool, non ?

Vous pouvez faire tout cela vous-même avec un peu de CSS en ajoutant le bloc souligné dans un élément HTML. Étonnamment simple compte tenu du peu de code dont vous avez besoin (environ 60 lignes de CSS).

2. Couvrant plusieurs lignes

Les styles de saut de ligne CSS sont délicats et difficiles à contourner. Mais avec un peu d'ingéniosité, le développeur Will King a construit ce stylo créant un effet de soulignement dynamique qui peut s'étendre sur plusieurs lignes sans aucun bug.

Notez que cela repose sur un peu de JavaScript pour garder la ligne intacte. Mais il est également suffisamment dynamique pour fonctionner avec n'importe quel lien sur la page, donc peu importe la façon dont vous formatez le texte.

De plus, tout cela utilise un dégradé CSS3 personnalisé pour l'arrière-plan, ce qui est sacrément cool.

3. Soulignement coulissant

Le développeur Ryan Morse a créé cet effet de soulignement glissant très simple reposant uniquement sur CSS. C'est une solution assez élégante étant donné qu'elle ne nécessite même pas d'élément HTML supplémentaire.

Vous pouvez concevoir vos menus de navigation comme n'importe quel autre site et utiliser cet effet CSS pour créer des animations coulissantes dynamiques. De plus, tous les résultats peuvent être modifiés dans le code CSS qui inclut les assouplissements et la durée totale.

4. Meilleur texte souligné

À première vue, vous ne remarquerez peut-être rien de différent avec ce soulignement. Mais si vous la comparez à la démo "par défaut" plus bas dans la page, vous verrez que cela a vraiment l'air beaucoup mieux.

Dans le meilleur soulignement de texte de Lukas Horak, vous remarquerez que la barre sous le texte s'intègre mieux dans les éléments descendants. Cela prend en compte les formes de lettres comme 'g' et 'p' où les lignes tombent sous la hauteur de ligne habituelle.

De plus, le soulignement lui-même est poussé légèrement plus bas sous le texte, de sorte qu'il prend une nouvelle apparence par rapport à la valeur par défaut du navigateur.

5. Styles d'animation

Ce stylo unique arbore quelques effets de soulignement personnalisés créés avec du CSS pur par le développeur Matthew Scott.

Il propose quatre styles de soulignement très spécifiques basés sur certaines transitions CSS courantes :

• De droite à gauche
• De gauche à droite
• Animer vers l'extérieur
• Animer vers l'intérieur

Vous remarquerez que cela fonctionne sur les transitions CSS3 courantes qui fonctionnent à la fois en survolant le lien et en déplaçant votre curseur hors du lien.

Certainement des effets sympas et ils sont tous assez faciles à transposer dans vos propres projets.

6. Plus de styles d'animation

Voici un autre pack d'animations de soulignement personnalisées, celles-ci créées par dev Kseso.

Celles-ci vont un peu plus à l'extrême avec les styles de soulignement poussant les ombres CSS3 pour des effets lumineux. Vous pouvez probablement l'utiliser comme modèle pour créer un design de sabre laser Star Wars rad si vous avez le temps (ou aimez simplement Star Wars).

7. Juste tomber

J'ai vu cet effet sur quelques sites Web et c'est probablement l'un de mes favoris. Le soulignement déroulant utilise du CSS pur et anime la ligne avec un effet de transition.

Avec cette animation, vous avez toujours l'impression que chaque "bordure" de soulignement se connecte à chaque lien. Je l'aime plus que les lignes qui glissent entre les liens car cet effet semble plus vif et plus direct.

Si vous voulez une véritable approche minimaliste pour souligner les effets, vous devez absolument essayer de travailler avec ce code.

8. Développer l'animation

Le style de soulignement en expansion se trouve dans le pack de soulignement que j'ai mentionné plus tôt. Mais ce soulignement spécifique est un peu différent car il utilise une synchronisation d'animation personnalisée.

Notez qu'il utilise la fonction cubic-bezier() pour créer une animation unique au survol.

Cela s'exécute un peu plus rapidement que la transition "linéaire" par défaut, ce qui donne un effet assez différent. Et vous pouvez même essayer de personnaliser vous-même l'animation de Bézier pour créer votre propre style de soulignement unique.

9. Soulignements CSS personnalisés

Voici un autre style qui peut vraiment fonctionner sur n'importe quel site Web. Le développeur Tristan Wilson a créé ces soulignements simples qui bordent la ligne quelques pixels plus bas sous le texte.

C'est juste assez subtil pour être remarqué, mais cela ne fera certainement pas une énorme différence dans la convivialité. Cet effet est vraiment une question d' esthétique plus que de convivialité supplémentaire.

Si vous voulez que vos soulignements se démarquent vraiment de tout le troupeau, cet ensemble est un excellent point de départ.

10. Montage entre descendeurs

Plus tôt, j'ai mentionné la personnalisation des styles de soulignement pour s'adapter aux descendeurs de type. Eh bien, ce stylo de Jonathan Neal fait exactement cela et n'utilise rien de plus que HTML5 et CSS3.

L'effet entier dépend de quelques propriétés CSS3 : box-shadow et text-shadow pour être précis.

Cela crée l'illusion qu'il y a de l'espace sur le côté des éléments descendants et donne au soulignement une sensation plus élégante.

Certainement un choix propre pour n'importe quel site Web et c'est aussi une belle façon d'alterner votre couleur de soulignement.

11. Dégradés personnalisés

Si vous essayez vraiment de repousser les limites, essayez de retravailler ce stylo avec son style de dégradé de soulignement personnalisé.

Le dégradé passe par CSS3 afin que vous puissiez changer les couleurs en tout ce que vous voulez. Et si vous pouvez le croire, cette chose ne nécessite aucun HTML supplémentaire pour fonctionner. Ciblez simplement les liens d'ancrage que vous souhaitez et copiez / collez les codes CSS pour obtenir vos propres soulignements de dégradé.

Parmi toutes ces conceptions, j'espère certainement qu'il y aura un bel effet que vous pourrez retirer de cette collection.

Les concepteurs ne pensent pas toujours aux effets de soulignement, mais il y a beaucoup de choses que vous pouvez faire avec la typographie et si vous connaissez CSS, alors vraiment, le ciel est la limite.