Les ptits loups, je suis de retour sur le blog … après 2 mois d’absence, ouais. C’est la faute à Tinder, j’ai été trop occupée à boire des verres qu’à continuer les cours de code.

Au programme aujourd’hui, un petit tutoriel que j’ai piqué (honteusement) dans un bouquin, CSS3 pour les webdesigners, qui va nous aider à monter en style sur le menu de navigation. Ca ne va pas révolutionner vos pages web, mais disons que c’est plus sympa pour les mirettes.

Dans ce tutoriel, on part d’un menu qu’on a déjà créé en HTML et on ne va s’attaquer qu’au style dans le CSS. Les étapes sont ultra simples et rapides, et pourtant ca fait une vraie différence. J’ai réalisé l’exercice pour que tu voies les changements par toi-même.

Clique ici pour voir l’effet AVANT / APRES !

 

BONUS

Ca te plait et tu veux te lancer ? Télécharge le code CSS dont je me suis servie, c’est cadeau !
Télécharge le fichier CSS >>

 

1. Styler la couleur des liens

On rajoute une petite marge en interne aux liens. On met les liens en gras et en blanc, mais avec un blanc légèrement transparent pour faire apparaître l’arrière plan. Pour ça, on va utiliser la fonction rgba. L’auteur conseille de rajouter une couleur de secours, parce qu’il y aurait encore des navigateurs qui ne supportent pas la fonction rgba. Bon, le bouquin ayant été édité en 2011, je doute que ce soit encore le cas. Vous avez un avis sur la question ? Allez hop, on en parle dans les commentaires !

2. Ajouter une ombre très légère au texte

On va rajouter une ombre au texte, qui sera pratiquement imperceptible mais qui aidera quand même à donner un relief léger. On utilise à nouveau rgba pour définir la couleur de l’ombre (noir) et son opacité.

3. Styler le hover et le focus

Une des bases de l’expérience utilisateur sur le web, c’est de signaler la présence des liens cliquables. La manière la plus classique qui soit, c’est de créer un effet de style quand la souris passe au dessus d’un lien. On appelle ça le :hover. Ici, on va changer la couleur du texte des liens, et la couleur de l’arrière plan (un blanc très légèrement opaque). Rebelotte, on utilise rgba.

4. Arrondir les coins de la forme au survol de la souris

On continue à fignoler le :hover en arrondissant les angles de l’arrière plan. Et pour que cet arrondi apparaisse sur plusieurs navigateurs, on va rajouter des préfixes qui seront décodés dans Safari, Chrome, Firefox, Internet Explorer 4 et Opéra.

 

 Tu as envie d’avoir un menu qui pique moins les yeux ? Télécharge le fichier CSS, c’est facile !

Télécharge le fichier CSS >>