[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

Kaminari Raiten

Age : 27Messages : 46

Jeu 18 Avr 2013 - 20:24

Merci pour ce magnifique tuto.

Chione

Age : 23Messages : 397

Ven 19 Avr 2013 - 18:39

Super !

Arthanys

Age : 32Messages : 7

Sam 20 Avr 2013 - 16:13

Je vais essayer ça, merci beaucoup ! ^^

X-Miiss-X

Age : 25Messages : 12

Lun 22 Avr 2013 - 21:06

Très joli, merci beaucoup !

Ravener

Age : 33Messages : 193

Mer 24 Avr 2013 - 0:09

Merci beaucoup!

Par contre, j'ai un hic. La transition de couleur fonctionne parfaitement, mais mon texte ne se décalle pas. Je suis pourtant sur Firefox et ton exemple fonctionne très bien o_O

Invité

Mer 24 Avr 2013 - 12:41

Thanks

Invité

Mer 24 Avr 2013 - 14:14

Merci du partage *.*

samael

Age : 46Messages : 15

Mer 24 Avr 2013 - 18:47

merci

Valinwë

Age : 33Messages : 120

Ven 26 Avr 2013 - 1:00

merci beaucoup !

White Pear

Age : 25Messages : 22

Sam 27 Avr 2013 - 22:58

Merci beaucoup !

DanJack

Age : 30Messages : 155

Dim 28 Avr 2013 - 1:37

Merci beaucoup pour cette astuce

Zooé

Age : 27Messages : 66

Mer 1 Mai 2013 - 16:35

Envie de voir cela au plus vite, merci!

Evydence

Age : 28Messages : 60

Mer 1 Mai 2013 - 21:34

Merci!

fregadeth

Age : 47Messages : 80

Jeu 2 Mai 2013 - 18:27

merci

Hinate-Chan

Age : 29Messages : 44

Sam 4 Mai 2013 - 19:13

Merci ! ♥

ptite_perle

Age : 61Messages : 128

Sam 4 Mai 2013 - 22:06

Merci

Loras Tyrell

Age : 33Messages : 14

Dim 5 Mai 2013 - 1:57

depuis le temps que je cherchais a faire cet effet. Merci beaucoup =)

Cyanna

Age : 37Messages : 59

Mar 7 Mai 2013 - 2:52

Voyons voir cela, merci d'avance !

Miyun

Age : 26Messages : 34

Jeu 9 Mai 2013 - 23:52

Superbe merci :o !

Eyes_SHM

Age : 32Messages : 11

Sam 11 Mai 2013 - 1:42

Merci pour ce tuto :)

Archeos

Age : 28Messages : 60

Sam 11 Mai 2013 - 12:53

Merci pour le partage. =3

Ivy

Age : 28Messages : 45

Sam 11 Mai 2013 - 17:10

Merci !

Amiko

Age : 33Messages : 51

Sam 11 Mai 2013 - 21:38

Merci !

Aeeklez

Age : 33Messages : 37

Mar 14 Mai 2013 - 17:21

merci !

Alexya

Age : 33Messages : 9

Jeu 16 Mai 2013 - 10:36

Merci !

Contenu sponsorisé