« //
»

CSS #01 : Souligner vos liens de couleur différente

Par Bouctoubou ~ le 10-10-2008 ~ Développement, Tutoriels

Astuce CSS 01

Voici un nouveau type de billet sur ce blog, des petites astuces CSS que les intégrateurs confirmés connaitront sûrement déjà mais qui plairont je l’espère aux débutants.

La première astuce consiste à changer la couleur du soulignement d’un lien par rapport au texte avec l’attribut border ou insérer une image avec l’attribut background.

Le code html du lien
<div id="exemple">La <a href="#">couleur</a> de mon lien souligné</div>
Le css correspondant au lien
a {
color:#3300FF; /* Couleur du lien */
text-decoration:none; /* Suppression du soulignement par défaut */
border-bottom:1px dotted #CC0000; /* Couleur pour le nouveau soulignement avec l'attribut border */
}
Résultat pour cet exemple
La couleur de mon lien souligné

On peut aussi si on le souhaite modifier les valeurs pour l’attribut a:hover, a:visited, etc. Pour par exemple changer la couleur du survol ou la taille du border, son style : solid, dotted, dashed, etc1.

a:hover {
color:#3300FF; /* Couleur du lien au survol */
border-bottom:2px dotted #CC0000; /* Couleur du soulignement au survol avec une taille de 2px */
}
La couleur de mon lien souligné avec changement au survol
Et avec l’attribut background ?

Un peu plus original, vous pouvez aussi mettre une image pour souligner vos liens. Exemple ci-dessous :

Fond Lien

a {
background: url(fond-lien.jpg) bottom no-repeat; /* Bottom pour que l'image soit en dessous du lien */
color:#CC0000; /* Couleur du lien */
text-decoration:none; /* Suppression du soulignement par défaut */
padding-bottom:3px; /* Un padding pour espacer l'image du lien, ne marche pas sur IE */
}
La couleur de mon lien souligné avec une image
Conclusion pour cette astuce

Une astuce CSS très simple à mettre en place, avec des possibilités intéressantes pour apporter un peu d’originalité à son design / intégration non ? Qu’en pensez-vous ?

  1. Vous pouvez voir les différents styles de l’attribut border sur ce lien. [↩]

Ce billet vous a plu ? Abonnez vous au flux RSS Flux RSS Bouctoubou


( 6 commentaires )

  • jparia ( 11-10-2008 )

    Oui, l’idée est sympa,
    j’utilise ce type de style pour différencier différents liens (aide, remarque, alerte…) avec des couleurs et des icônes différentes à droite du lien.
    Asctuce:
    pour éviter que le texte passe au dessus de l’icône, j’applique un padding-right légèrement supérieur à la largeur de celle-ci.

    exemple:

    .lienaide {
    cursor: pointer;
    color: #696;
    text-decoration: underline;
    background-image: url(ico_aide.gif) no-repeat right top;
    padding-bottom: 2px;
    padding-right: 18px;
    height: 16px;
    }

    Répondre
  • Lio ( 11-10-2008 )

    Très sympa cette nouvelle série de billets.

    Explications claires, code propre de valide : de vraies ressources pour les débutants :)

    Répondre
  • Bouctoubou ( 12-10-2008 )

    @jparia : Oui, ce que je fais aussi souvent pour mettre un icône sur une liste à puce par exemple.

    @Lio : Merci Lio! :)

    Répondre
  • ekevin ( 14-10-2008 )

    J’aime bien aussi faire l’inverse partir d’un lien souligné vers un lien non souligné, exemple :

    a { text-decoration: underline; }
    a: hover { text-decoration: none; }

    ou encore s’amuser avec font-weight à bold ou normal, exemple

    a { text-decoration: none; }
    a: hover { font-weight: bold; }

    Répondre
  • jerr ( 14-10-2008 )

    Merci de l’astuce ;)

    Répondre
  • Bouctoubou ( 16-10-2008 )

    @ekevin : Oui, les classiques :) De toute façon c’est bien de varier le a, du a:hover!

    @jerr : De rien! :)

    Répondre

Laisser une réponse