[Cet article est un cours de CSS portant sur la base des transitions, accessible à tous. Pour un article plus complet et plus avancé, je te conseille celui de Nagalia sur le sujet : clique]

Comme vous l'aurez certainement remarqué, dans les fonctionnalités par défauts d'eklablog, si on passe sa souris sur un lien, par exemple, il change de couleur sans transition, comme ceci :

Sauf que peut-être avez vous vu des blogs, comme celui sur lequel vous êtes actuellement en train de lire, où il y a justement une transition : le changement de couleur se fait progressivement. J'ai personnellement toujours trouvé ça très joli et je peux vous dire que quand j'ai compris comment on faisait, j'ai été super contente!

Dans cet article, vous apprendrez :

• Ce qu'est une transition et comment la construire avec le CSS
• À appliquer une transition à différents navigateurs
• À appliquer une transition sur le module derniers visiteurs
• À appliquer une transition sur les liens de votre blog
• À appliquer une transition sur les avatars des commentaires

Donc bref, tout d'abord, un peu d'explications :

On peut appliquer cet effet de transition à des liens, mais aussi d'autres choses, comme par exemple les avatars du module "derniers visiteurs" (si vous avez entré dans le code CSS une propriété pour modifier l'opacité lorsque l'on passe sa souris dessus et que vous rentrez une propriété de transition, alors elle prendra un certain temps à s'effectuer).

La transition se construit comme ceci (code à ne pas copier/coller dans le CSS comme certains ont pu faire précédemment, il ne fonctionne pas puisque c'est la manière dont se construit la transition, pas une transition en soi) : 

#selecteur {
        transition: x.xs;}

En bleu/violet : le sélecteur qui vous permet de choisir l'élément à modifier

En vert, la propriété qui code pour une transition.

En bleu, la valeur qui indique le temps de la transition, vous pouvez modifier le nombre (ex : une transition courte fera 0.2 s quand une transition longue fera 0.8 voire 1s)
/!\ Il est très important de ne pas mettre de virgule, elle est remplacée par un point (0.3s et pas 0,3s) ; veillez également à rester en secondes, j'ai eu un exemple récemment d'une personne qui avait mis à la place de "0.3s", "(400)deg" car elle voulais une rotation! Si vous faites ces erreurs, le code ne fonctionnera pas! /!\ 

Enfin, mais vous commencez à être habitués, en rouge, les accolades à mettre au début et à la fin d'un code ainsi que, en gris, le point-virgule permettant de séparer les propriétés.

Pour appliquer votre transition à différents navigateurs, il faut rajouter des éléments à votre base :

- "-webkit-transition" pour que le code fonctionne sur safari et chrome

-"-moz-transition" pour mozilla-firefox

Je sais qu'il y en a aussi un pour opéra et explorer mais a) je me souviens plus du code et b) personne utilise ces navigateurs ^^'

Donc bref, en rajoutant ces deux éléments, on a donc ceci :

#selecteur {
        transition: x.xs;
        -webkit-transition: x.xs;
        -moz-transition: x.xs;}

Appliquons à présent ce principe aux avatars du module "derniers visiteurs"

.module_menu_type_lastvisitors img {
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;}

Donc ici, on peut bien entendu changer la valeur, comme déjà dit, mettre par exemple "0.2s" ou "1s" à la place de ce que j'ai écrit, selon le temps que vous voulez que ça prenne. Ensuite, je tiens à préciser que si vous n'avez mis aucune propriété sur ce sélecteur, ce code sera inutile parce qu'il y aura une transition sur aucun changement... donc pas de transition xD Bref, voilà.

Ensuite, mettons une transition aux liens de ton blog :

#body a{
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;}

On peut encore une fois changer la valeur du temps ici, comme déjà dit plus haut. De plus, n'hésitez pas à coller tous ces codes dans le CSS, à le dupliquer et rajouter ":hover" après le sélecteur pour faire en sorte que la transition s'effectue quand on passe sa souris sur l'élément et quand on l'enlève.

Enfin, dernier code que je vous donne sur le sujet, appliquer une transition sur les avatars des commentaires :

.commentavatar img {
transition: 0.3s;
-webkit-transition: 0.3s;
-mozkit-transition: 0.3s;}

Donc voilà rien de très compliqué, encore une fois c'est le même principe, on change juste le sélecteur.

Bref, j'espère que cet article aura instruit ceux qui ne connaissaient rien de tout ça, et je vous invite une fois de plus à visiter l'article de Nagalia cité plus haut si vous voulez quelque chose de plus complexe et avancé, ceci fait plutôt office d'introduction au sujet. Bonne dernière journée de vacances (tristesse T-T),

Votre dévouée D r e a m