Text-decoration technique avancée en CSS3

css3 counter

Presque la quasi-totalité de nous intégrateur web ont déjà utilisé cette propriété.
Par exemple, la plupart des navigateurs soulignent par défaut tous les liens que nous empressions de supprimer rapidement par la propriété text-decoration: none.
Mais c’est que vous ignorez qu’on peut aller encore plus loin avec cette propriété, ainsi il existe des sous-propriétés pour affiner et ainsi avoir des résultats plus fin.

La propriété text-decoration-line

La propriété text-decoration ajoute un trait de soulignement, un surlignement, un texte barré ou la combinaison de plusieurs propriétés.
Plusieurs propriétés de décoration peuvent être attribuées à un seul élément.

Vous l’auriez remarqué, on peut avoir à la fois un soulignage et un surlignage sur l’élément à l’aide des propriétés text-decoration.

A part cela plusieurs valeurs s’offre à nous :

  • none: pas de soulignement
  • underline : dessine une bordure de 1px au bas du texte.
  • line-through : barre le texte concerné
  • overline : dessine une bordure de 1px au haut du texte.

La propriété text-decoration-color

Par défaut la couleur des lignes de soulignement est identique au couleur du texte. Mais maintenant vous pouvez changer cela ( idem pour la propriété overline /line-through…)

La propriété text-decoration-color supporte n’importe que valeur de couleurs, de type RGBa, Hexadécimale ou HSLa

Coté compatibilité text-decoration-color fonctionne dans les versions actuelles de Firefox et Safari mais sous chrome il faudra utiliser une version préfixer (-webkit )

La propriété text-decoration-style

La propriété text-decoration-style définit le style du soulignement sur les éléments que ce soit un soulignement, overline, ou line-through…

Plusieurs valeurs s’offre à nous pour gérer la mise en forme de la bordure:

  • Solid : la valeur par défaut, la bordure se présente comme une ligne unique solide.
  • Double : la bordure se présente sous la forme d’une double ligne
  • Dotted : la bordure se présente sous la forme de pointillée
  • Dashed : la bordure se présente sous la forme de tiret
  • Wavy : la bordure se présente sous la forme ondulée

Répondre