Ce n’est pas un exercice difficile en CSS. Mais permet de voir quelque convention mise en place par souci d’ergonomie.
Pour commencer, les liens ont 4 états (défaut, visited, active, hover)
Dans la mesure du possible le designer va au minimum se charger de l’état par défaut et l’état hover
De façon général sur une page,
Beaucoup de débutant font l'erreur de faire apparaître les éléments important en rouge
résultat : l’utilisateur pense pouvoir cliquer… alors que ce n’est pas le cas.
Voici notre petit lien, première chose à faire : casser le css par défaut
Les navigateurs appliquent un style automatique (bleu + souligné). On commence donc par le neutraliser :
Oui, c'est pas compliqué il n'y a que 2 paramètres text-decoration et color
Pour ce qui est de la couleur on va mettre une variable donc plus haut
Donc on a un lien qui va apparaitre sans soulignement et en bleu
Poussons plus loin ce design et ajouton un peu d'animation pour se faire on va utiliser la pseudo-classe :hover
Designer des liens, ce n’est pas seulement esthétique :
? c’est surtout rendre la navigation claire et intuitive
À retenir :