[CSS] Hover (défilement bref) sur les noms catégories et forums

Vorn

Age : 27Messages : 2342

Lun 26 Mar 2012 - 18:40

Rappel du premier message :

#phpBB2

Bonjour ^^ Grâce à un petit bidouillage, et à la finition de notre codeur préféré Taktiik, je peux vous dévoiler cette astuce ^^ qui donnera:

Ici l'exemple

Si vous ne l'avez pas encore compris, il s'agit du titre de forum ( ou catégorie ) qui glisse quand la souris passe dessus.

Donc déjà, ce qu'il faut savoir, c'est que c'est le «:hover » qui va permettre cette astuce, accompagné d'une modification du .forumlink. On commence par prendre la partie

Code:

.forumlink
{
Vos personnalisations
}

.

On y ajoute les propriétés suivantes:

Code:

display: block;
  color: red; /* Couleur de départ */
text-align: left;
transition: all 1s; /* Durée de la transition, mettez les mêmes valeurs partout, ça sera plus facile */
-moz-transition: all 1s;
-webkit-transition: all 1s;

Maintenant, on passe au a.forumlink:hover, à rajouter dans la feuille CSS.

Code:

a.forumlink:hover
{
  color: green; /* Couleur d'arrivée */
  margin-left: 15px; /* Décalement ( nombre de px à décaler pour l'arrivée)*/
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}


Voilà voilà :) Merci à Taktiik pour l'aide aussi ^^

Vos commentaires et remerciements sont toujours bienvenus ^^

Si vous avez des problèmes avec ce LS, venez poster ici.

Dernière édition par Winst le Mer 25 Avr 2012 - 19:44, édité 3 fois

Sweeney.

Age : 33Messages : 6

Ven 11 Jan 2013 - 19:06

Merci !!

Kriisten25

Age : 30Messages : 190

Sam 12 Jan 2013 - 14:01

Oh mon Dieu c'est ce que je voulais *_* !

Merciiiii !

Eques

Age : 27Messages : 109

Dim 13 Jan 2013 - 5:53

Merci :)

Edward Speleers

Age : 36Messages : 460

Dim 13 Jan 2013 - 19:26

Très utile merci

Hel

Age : 33Messages : 14

Dim 13 Jan 2013 - 21:36

Merci bien !

Canard

Age : 25Messages : 25

Lun 14 Jan 2013 - 17:14

Merci !

yhaa

Age : 27Messages : 15

Lun 14 Jan 2013 - 21:22

Merci beaucoup

Plume de Phénix

Age : 24Messages : 24

Sam 19 Jan 2013 - 16:32

Merci !

Apokalip'z

Age : 30Messages : 290

Ven 25 Jan 2013 - 22:39

très utile et très sympa. je prends, merci^^

Hyen0w

Age : 30Messages : 42

Sam 26 Jan 2013 - 12:26

Merci \ô/

Joxtop

Age : 32Messages : 47

Dim 27 Jan 2013 - 16:46

merci

Léoshadow

Age : 25Messages : 47

Dim 27 Jan 2013 - 20:06

Merci

Petite-Lune

Age : 24Messages : 16

Dim 27 Jan 2013 - 20:31

Merciiiiiii !

Patou972

Age : 45Messages : 180

Lun 28 Jan 2013 - 1:03

merci beaucoup bisous

Toupimero

Age : 63Messages : 56

Mer 30 Jan 2013 - 12:17

La curiosité m'a dit de poster (a).
Merci d'avance en tout cas, ce code a l'air vraiment très pratique :)

Riss

Age : 26Messages : 26

Mer 30 Jan 2013 - 15:03

Merci !!!

Nuity

Age : 27Messages : 11

Mer 30 Jan 2013 - 17:58

Merci :)

Reader's Tale

Age : 32Messages : 4

Mer 30 Jan 2013 - 22:03

Merciii ♥

Teseu

Age : 29Messages : 54

Sam 2 Fév 2013 - 15:54

Merci

tchoupi

Age : 34Messages : 9

Dim 3 Fév 2013 - 11:39

Merci

Lilly31

Age : 32Messages : 97

Dim 3 Fév 2013 - 11:50

Envi de voir :)

Katie-Lexie

Age : 34Messages : 6

Dim 3 Fév 2013 - 17:13

Merci pour le partage!

Lyrasaphira

Age : 28Messages : 12

Dim 3 Fév 2013 - 17:48

Merci :)

petit lu

Age : 31Messages : 184

Dim 3 Fév 2013 - 20:35

Merci beaucoup

BloodyMoony

Age : 31Messages : 76

Lun 4 Fév 2013 - 10:30

Sympa !!! J'ai hâte de savoir comme faire ça !

Contenu sponsorisé