Ajouter un effet de transition sur les liens

par **Chacha** Sam 9 Fév 2013 - 14:11

Ajouter un effet de transition sur les liens

Cette astuce vous permettra d’ajouter un effet de transition sur les liens de votre forum Forumactif. Celle-ci est simple et accessible à toutes les versions, puisqu’elle ne se base que sur quelques lignes de CSS. Aucune condition particulière n’est requise pour appliquer ce tutoriel. L’effet peut être ajouté sur les forums de toutes versions, avec ou sans feuille de styles déjà personnalisée.

Qu’est-ce qu’un effet de transition ?

Pour commencer, décrivons l’effet recherché. À l’heure actuelle, sur les forums, lorsque vous passez le curseur de votre souris sur vos liens, ceux-ci passent d’une couleur à une autre sans aucune transition ; le changement est net. Aujourd’hui, sur plusieurs forums, la propriété CSS3 de transition voit le jour…

Ajouter un effet de transition sur les liens 14-03-11

Où et comment l’appliquer ?

La transition peut-être appliquée sur n’importe quel élément. Ici, nous allons le faire sur l’ensemble des liens de votre forum, mais en modifiant l’identifiant de l’élément depuis la feuille de styles, il est parfaitement possible de modifier la donne.

Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS)

Ici, les éléments qui nous intéressent sont donc les liens. En CSS, ils sont représentés par la lettre a. Dans la feuille de style, on déclare donc notre élément :

Code:: a {

On intègre ensuite les propriétés de transition à la suite, en prenant bien en compte les différents préfixes pour chaque navigateur :

Code:: a { -moz-transition:all 0.5s; /* Mozilla Firefox */ -webkit-transition:all 0.5s; /* Safari et Google Chrome */ -o-transition:all 0.5s; /* Opera */ transition:all 0.5s; }

Ici, la valeur donnée est all 0.5s, ce qui signifie que la transition prendra effet sur tous les éléments relatifs à notre identifiant et qu’elle s’appliquera sur un délai de 0.5 secondes. Selon l’effet désiré, plusieurs choses peuvent être changées ici :

Le mode d’application (ici, à mettre à la place de all) :
- color : couleur d’écriture du texte ;
- background : couleur de fond du texte ;
- opacity : opacité du texte ;
- etc.
Le temps d’application (ici, à mettre à la place de 0.5s) :
Si vous voulez que la transition soit courte, il faut mettre une valeur inférieure à 1 seconde. En revanche, si vous voulez une transition plus longue, il faut mettre une valeur supérieure à 1 seconde.

Exemple avec une transition de 5 secondes appliquée seulement sur les couleurs :

Code:: a { -moz-transition:color 5s; /* Mozilla Firefox */ -webkit-transition:color 5s; /* Safari et Google Chrome */ -o-transition:color 5s; /* Opera */ transition:color 5s; }

Transition et survol

Une fois la transition appliquée sur les liens, il n’y a plus qu’à définir ce que l’on veut voir changer au survol. Pour ça, on utilise le pseudo-élément :hover, accolé à l’identifiant a.

Par exemple, une couleur d’écriture :

Code:: a:hover { color:#FF0000; }

Ou bien une couleur de fond :

Code:: a:hover { background-color:#FF0000; }

Personnaliser d’autres liens

En utilisant simplement l’identifiant a, on personnalisera tous les liens du forum. Mais il peut arriver de vouloir personnaliser un lien en particulier… par exemple, le lien des titres des forums. Pour ça, on garde l’identifiant a et on ajoute le nom du lien (voir le tutoriel : Les principaux identifiants CSS (phpBB2 & phpBB3)).

Exemple avec la version phpBB2 :

Code:: a.forumlink {

La marche à suivre est ensuite la même que pour les liens généraux !

 Voir aussi le tutoriel Les principaux identifiants CSS (phpBB2 & phpBB3) ;
 Voir aussi le tutoriel Le CSS, comment ça marche ?