Voilà un tutoriel qui pourra vous intéresser ! Je suis désolée, il faut avoir accès au panneau d'administration. Ensuite=>Affichage=>Images et Couleurs=>Couleurs=>Feuille de style CSS.
Je vais vous apprendre à personnaliser vos liens avec et sans le passage de la souris.
Avec le passage de la souris, cela s'appellera des
transitions.
Pour les liens normaux, sans le passage du curseur, voici le code:
- Code:
-
a {
Propriété: Valeur;
Propriété:Valeur;
}
Remplissez comme vous le désirez, ou alors vos liens prendrons la valeur par défaut, comme vous les avez modifiés dans "Couleurs".
Pour faire une ombre, et mettre une couleur spécifique à vos liens, le code sera:
- Code:
-
a {
text-shadow: 1px 1px 1px black;
color: blue;
}
Vous pouvez modifier les pixels, regardez ce qui vous plaît le plus ! Ainsi que la couleur, vous remplacerez "black" (bon on sait jamais il y a peut-être quelqu'un qui ne connaît pas ><). Et la couleur du texte aussi, si vous voulez du jaune, mettez "yellow" à la place de "blue".
Maintenant, passons au survol de la souris. "Hover" indique qu'au passage de la souris, vos liens se transformeront selon vos propriétés et valeurs choisies.
- Code:
-
a:hover {
Propriété: Valeur;
Propriété: Valeur;
}
Choisissez la durée de transition avec ces propriétés:
- Code:
-
transition : 1s;
-moz-transition: 1s;
J'ai mis une seconde.
La propriété "text-décoration" avec "none" comme valeur vous enlève le soulignement qui pouvait y avoir avant, comme ça vous êtes tranquille pour faire vos soulignements à vous
Vous pouvez changer la police, mais moi je ne le fais pas, je préfère tout garder par défaut, c'est mieux
Quelques exemples de liens que vous pourrez essayer:
Exemple 1 - Code:
-
a {
text-decoration : none;
color:pink;
}
a:hover {
text-decoration : none !important;
border-bottom:1px dashed white;
-moz-transition : 1s;
transition : 1s;
text-shadow: 1px 1px black;
}
Exemple 2: - Code:
-
a {
text-decoration : none;
color:blue;
border-bottom:1px dashed white;
}
a:hover {
text-decoration : none !important;
border-bottom:1px double darkblue;
-moz-transition : 1s;
transition : 1s;
}
Exemple 3: - Code:
-
a {
text-decoration : none;
color:indigo;
border-bottom:1px dashed white;
}
a:hover {
text-decoration : none !important;
border-bottom:1px solid indigo;
-moz-transition : 1s;
transition : 1s;
text-shadow: 1px 1px white;
}
En espérant que ça vous aide !