Transitions sur les titres de catégories et forums
Un ptit code tout simple afin d'animer vos titres de catégories et de forums au survol.
JUSTE UN PETIT MERCI POUR VOIR ET OBTENIR TOUS LES CODES
INFORMATIONS
Effets
visibles avec les navigateurs : Firefox(à jour), Safari, Chrome, Opéra
et IE comme d'hab à la traine, non testé sur IE9, donc à vous de me dire
si ces effets fonctionnent avec la dernière version de IE.
Les valeurs de transition sont à appliquer à l'état normal et non à l'état survolé (hover), comme je le vois fréquemment.
Au hover (survol), on ne met que ce qui doit changer.
PARTIE CSS
► Le HTML étant déjà en place, il suffit de modifier le CSS.
Affichage -->
Couleurs -->
Onglet feuille de style CSS- Spoiler:
- Code:
-
/* -------- TITRE CATÉGORIE ------ */
.secondarytitle, .secondarytitle h2 {
font: 20px Arial;
color: #D1A781;
-webkit-transition: all 1s ease; /* pour navigateur webkit */
-moz-transition: all 1s ease; /* pour navigateur mozilla */
-o-transition: all 1s ease; /* pour navigateur opera */
transition: all 1s ease; /* pour les navigateurs récents */
}
/* -------- TITRE CATÉGORIE AU SURVOL ------ */
.secondarytitle:hover, .secondarytitle h2:hover {
font-size: 24px;
margin-left: 50px;
color: #CC0000;
}
► Je mets au survol les propriétés que je souhaite modifier. Là j'ai mis
la taille du texte, sa couleur et une marge de 50px à gauche.
La transition se fera donc entre les propriétés déclarées à l'état normal et celles déclarées à l'état survolé et vice versa.
► Et je fais la même chose avec le titre des forums :
- Spoiler:
- Code:
-
/* -------- TITRE FORUM ------ */
.forumlink {
font: 20px Arial;
color: #D1A781;
-webkit-transition: all 1s ease; /* pour navigateur webkit */
-moz-transition: all 1s ease; /* pour navigateur mozilla */
-o-transition: all 1s ease; /* pour navigateur opera */
transition: all 1s ease; /* pour les navigateurs récents */
}
/* -------- TITRE FORUM AU SURVOL ------ */
.forumlink:hover{
font-size: 22px;
margin-left: 50px;
color: #CC0000;
}
► Peut être appliqué à n'importe quel texte, lien, ou même bloc de contenu.