7 techniques pour styliser le soulignement en CSS

7 techniques pour styliser les soulignements en CSS

On connaît évidemment les balises pour souligner un texte en HTML mais il existe d’autres techniques en CSS qui rendent le soulignement plus esthétique et que vous pourrez utiliser pour animer un hover sur un lien par exemple.

A travers cet article illustré d’exemples vous devriez trouver votre bonheur. Il explique qu’en fonction de la situation il faut utiliser telle ou telle technique et il en recense pas moins de 7 :

  • text-decoration
  • border-bottom
  • box-shadow
  • background-image
  • SVG filters
  • Underline.js (canvas)
  • text-decoration-*

Je dois dire que les résultats sont vraiment top :

Souligner un texte avec box-shadow
Utilisation de box-shadow
Souligner un texte avec border-bottom
Utilisation de border-bottom
Souligner un texte avec un background-image
Utilisation de background-image

L’article : css-tricks.com/styling-underlines-web/

 

Si vous en voulez plus, n’hésitez pas à me suivre sur Facebook et sur Twitter.

Laisser un commentaire :

Votre adresse email ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.