Graphista
Bienvenue sur Graphista !
Ici, vous pourrez prendre des cours, ouvrir votre galerie, progresser, vous amuser... Inscrivez-vous !

Sinon, connectez-vous pour avoir accès au forum.

Le staff <3.
Graphista
Bienvenue sur Graphista !
Ici, vous pourrez prendre des cours, ouvrir votre galerie, progresser, vous amuser... Inscrivez-vous !

Sinon, connectez-vous pour avoir accès au forum.

Le staff <3.

Graphista

Joyeux Noël !!! Ce forum est spécialisé en graphisme, mais ouvre depuis peu sa partie codage. Vous pourrez prendre des cours, ouvrir votre galerie, vous amuser tout en graphant et plein d'autres choses ! Bienvenue =D.
 

Partagez
 

 Personnaliser le style des liens-Transitions

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Diamant


Dauphin
Diamant


Messages : 880
Date d'inscription : 07/09/2011
Age : 25

Personnaliser le style des liens-Transitions Empty
MessageSujet: Personnaliser le style des liens-Transitions   Personnaliser le style des liens-Transitions EmptyMar 26 Juin - 11:53

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 Wink Vous pouvez changer la police, mais moi je ne le fais pas, je préfère tout garder par défaut, c'est mieux Smile

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 !
Revenir en haut Aller en bas
http:// http://danse-rpg.forum.gratuit.fr
 

Personnaliser le style des liens-Transitions

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graphista :: Partie Codage :: Tutoriels-