Ajouter un effet de transition sur les liens

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

  • 0

Astuce Ajouter un effet de transition sur les liens

Message par Chacha le 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…

Voici ce que celle-ci vous permettra de faire : Démonstration


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.

Rendez-vous dans :
Panneau d’administration ► Affichage ► Couleurs ► Onglet "Feuille de styles 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;
    }

Explications :
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 :
    1) 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.

    2) 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 (CF : 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 Wink



Tutoriels complémentaires
- Les principaux identifiants CSS (phpBB2 & phpBB3)
- Le CSS, comment ça marche ?


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49792
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum