Lovely Web [dot] Starszz [dot] Com

CODAGE DE SITE CSS Décoration des liens

Voici différentes manières de décorer les liens.

A chaque fois, vous pouvez :
- modifier les codes couleurs afin qu'ils s'adaptent aux couleurs de votre design.
- Épaissir les lignes s'il y en a (en remplaçant le 1 devant px par un autre chiffre).
- Mettre une ligne en pointillés à la place d'une ligne pleine en remplaçant solid par dotted quand c'est possible.
- Ajouter une couleur de fond à vos liens en ajoutant la ligne : background-color:#C0C0C0; . (voir 5) pour un exemple)

1) Liens soulignés
a:link { color: #C0C0C0; border-bottom: #000000 1px dotted; } a:visited { color: #C0C0C0; border-bottom: #000000 1px dotted; } a:hover { color: #C0C0C0; border-bottom: #000000 1px dotted; } a:active { color: #C0C0C0; border-bottom: #000000 1px dotted; }

Liens soulignés au survol de la souris :
a:link { color: #C0C0C0; } a:visited { color: #C0C0C0; } a:hover { color: #C0C0C0; border-bottom: #000000 1px dotted; } a:active { color: #C0C0C0; }

2) Liens surlignés
a:link { color: #C0C0C0; border-top: #000000 1px dotted; } a:visited { color: #C0C0C0; border-top: #000000 1px dotted; } a:hover { color: #C0C0C0; border-top: #000000 1px dotted; } a:active { color: #C0C0C0; border-top: #000000 1px dotted; }

Liens surlignés au survol de la souris :
a:link { color: #C0C0C0; } a:visited { color: #C0C0C0; } a:hover { color: #C0C0C0; border-top: #000000 1px dotted; } a:active { color: #C0C0C0; }

3) Liens soulignés et surlignés
a:link { color: #C0C0C0; border-top: #000000 1px dotted; border-bottom: #000000 1px dotted; } a:visited { color: #C0C0C0; border-top: #000000 1px dotted; border-bottom: #000000 1px dotted; } a:hover { color: #C0C0C0; border-top: #000000 1px dotted; border-bottom: #000000 1px dotted; } a:active { color: #C0C0C0; border-top: #000000 1px dotted; border-bottom: #000000 1px dotted; }

Liens soulignés et surlignés au survol de la souris :
a:link { color: #C0C0C0; } a:visited { color: #C0C0C0; } a:hover { color: #C0C0C0; border-top: #000000 1px dotted; border-bottom: #000000 1px dotted; } a:active { color: #C0C0C0; }

4) Liens barrés
a:link { color: #C0C0C0; text-decoration:line-through } a:visited { color: #C0C0C0; text-decoration:line-through } a:hover { color: #C0C0C0; text-decoration:line-through } a:active { color: #C0C0C0; text-decoration:line-through }

Liens barrés au survol de la souris :
a:link { color: #C0C0C0; } a:visited { color: #C0C0C0; } a:hover { color: #C0C0C0; text-decoration:line-through } a:active { color: #C0C0C0; }

5) Liens encadrés par un trait plein avec une couleur de fond au survol :
a:link { color: #C0C0C0; } a:visited { color: #C0C0C0; } a:hover { color: #C0C0C0; border:#000000 1px solid; background-color:#FFFFFF; } a:active { color: #C0C0C0; }

6) Liens se retournant vers la droite au survol :
a:link { color:#FFFFFF; text-decoration:none; font-weight:normal; } a:visited{ color:#FFFFFF; text-decoration:none; font-weight:normal; } a:active{ color:#FFFFFF; text-decoration:none; font-weight:normal; } a:hover{ color:#000000; text-decoration:none; font-weight:normal; filter:fliph; height:0; }

7) Liens se retournent vers le bas
a:link{ color:#FFFFFF; } a:visited{ color:#FFFFFF; } a:active{ color:#FFFFFF; } a:hover{ color:#000000; filter:flipv; height:0; }

8) Liens accompagnés d'une ombre
a:link{ color:#FFFFFF; } a:visited{ color:#FFFFFF; } a:active{ color:#FFFFFF; } a:hover{ color:#FFFFFF; filter:dropshadow(color=#000000,offX=1,offY=1); height:7pt; }

9) Liens devenant flous
a:link{ color:#FFFFFF; } a:visited{ color:#FFFFFF; } a:active{ color:#FFFFFF; } a:hover{ color:#000000; filter:blur(add="0",direction="180",strength="2"); height:0; }

10) Liens se mettent en majuscules et en gras
a:link{ color:#FFFFFF; } a:visited{ color:#FFFFFF; } a:active{ color:#FFFFFF; } a:hover{ color:#000000; font-weight:bold; text-transform:uppercase; }

11) Liens se grossissent
a:link{ color:#FFFFFF; } a:visited{ color:#FFFFFF; } a:active{ color:#FFFFFF; } a:hover{ color:#000000; font-size:20pt; }

12) Liens se mettent en gras
a:link{ color:#FFFFFF; } a:visited{ color:#FFFFFF; } a:active{ color:#FFFFFF; } a:hover{ color:#000000; font-weight:bold; }

... retour. - | - Des questions sur ce tutorial?