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

Vorn

Age : 28Messages : 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

Chocolakato

Age : 34Messages : 837

Mer 4 Juil 2012 - 3:15

Ouiiiiiii, ça c'est cool

Kispz.

Age : 27Messages : 27

Mer 4 Juil 2012 - 18:36

J'aime beaucoup le résultat , merci pour le partage (:

Alehandra

Age : 29Messages : 43

Lun 9 Juil 2012 - 0:07

Merci pour l'astuce. o/

T_Time

Age : 27Messages : 104

Mer 11 Juil 2012 - 15:05

Thanks :)

Maï-li

Age : 32Messages : 30

Sam 14 Juil 2012 - 9:52

^^ cooool mercii =)

Lakxi

Age : 31Messages : 40

Ven 20 Juil 2012 - 12:04

ow, c'est cool !
thks : )

Vine

Age : 35Messages : 9

Ven 20 Juil 2012 - 19:34

Excellent ! Un code super sympa, merci à toi :)

kamisama19

Age : 30Messages : 17

Sam 21 Juil 2012 - 16:48

Merci ~ c'est ce que je cherchais =w=

Reiõ

Age : 31Messages : 206

Dim 22 Juil 2012 - 14:46

Merci =)

Tetsu

Age : 25Messages : 23

Dim 29 Juil 2012 - 17:23

Haaan je veux voir ;o; vive Never Utopia et leurs membres :)

Drizzle

Age : 26Messages : 135

Lun 30 Juil 2012 - 14:55

Arigatô

Mitsuomi Takayanagi

Age : 32Messages : 76

Sam 4 Aoû 2012 - 0:39

Merci pour l'astuce

ChocoCookie

Age : 25Messages : 22

Sam 4 Aoû 2012 - 11:37

Nyaa~ Arigatô !

Nunuelle

Age : 25Messages : 28

Dim 5 Aoû 2012 - 14:49

J'ai envie de voir le code alors je poste un petit merci

Naruhiko

Age : 26Messages : 119

Lun 6 Aoû 2012 - 20:21

Merci !

Lexie

Age : 33Messages : 46

Mar 7 Aoû 2012 - 1:09

Merci

Slown

Age : 29Messages : 62

Mar 7 Aoû 2012 - 13:24

Merci

âme

Age : 59Messages : 154

Mer 8 Aoû 2012 - 13:56

Je veux bien découvrir, merci :)

CathyCréation

Age : 45Messages : 207

Mer 8 Aoû 2012 - 14:00

merci

cosmos-chann

Age : 27Messages : 115

Mer 8 Aoû 2012 - 15:30

Merci

Pontos

Age : 30Messages : 23

Mer 8 Aoû 2012 - 16:02

Merci !

Laega

Age : 35Messages : 106

Jeu 9 Aoû 2012 - 15:28

Merci pour ce tuto, je me mets tout de suite à la tache.
Nickel ça fonctionne et ça rend super bien!

Jo-Champi

Age : 36Messages : 68

Sam 11 Aoû 2012 - 4:21

Je veux!!!

Nyan-cat

Age : 26Messages : 326

Sam 11 Aoû 2012 - 8:40

michiii 83

FREAKS*

Age : 29Messages : 30

Dim 12 Aoû 2012 - 1:23

Merci

Contenu sponsorisé