[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

Kitty Kat.

Age : 30Messages : 86

Sam 21 Sep 2013 - 0:17

J'adore !

Twins.

Age : 27Messages : 2

Sam 21 Sep 2013 - 11:55

Merci beaucoup !

artic marteen

Age : 31Messages : 22

Mer 2 Oct 2013 - 22:48

Merciii

Raymanou

Age : 31Messages : 49

Jeu 3 Oct 2013 - 19:47

MErci beaucoup pour l'astuce

Tekesuta

Age : 29Messages : 33

Jeu 3 Oct 2013 - 22:36

merciii!

le_bn

Age : 31Messages : 7

Ven 11 Oct 2013 - 21:44

Merci Vorn ! o/

Mayako

Age : 23Messages : 12

Ven 18 Oct 2013 - 16:35

Merci !

damon w salvatore

Age : 36Messages : 109

Ven 25 Oct 2013 - 0:27

MERCI

Fartiny

Age : 26Messages : 119

Ven 25 Oct 2013 - 18:39

ça a l'air top !

Kassou

Age : 24Messages : 43

Sam 26 Oct 2013 - 12:08

Merci du partage **

NaLu

Age : 28Messages : 176

Lun 28 Oct 2013 - 10:39

Merci du partage ^^

Afterglow

Age : 28Messages : 138

Mar 29 Oct 2013 - 2:36

Je trouve ça intéressant, je vais tenter merci pour l'astuce :)

Chadot

Age : 35Messages : 248

Mer 30 Oct 2013 - 9:53

Merchi

Mezou

Age : 24Messages : 56

Sam 2 Nov 2013 - 13:11

Merciiii

FreeSpirit

Age : 28Messages : 167

Dim 3 Nov 2013 - 14:56

Merci :)

Mangockie

Age : 25Messages : 40

Lun 4 Nov 2013 - 20:32

I wanna see è.é Thanks !

BloodyMonster

Age : 29Messages : 23

Dim 10 Nov 2013 - 18:59

Cool ! Merci **

Trych

Age : 29Messages : 81

Lun 11 Nov 2013 - 1:17

Mici :)

Nephylys

Age : 27Messages : 23

Lun 11 Nov 2013 - 18:58

thank o/

Sinavlia

Age : 26Messages : 158

Mer 13 Nov 2013 - 0:19

Merci ! :)

Siloë

Age : 35Messages : 59

Mer 13 Nov 2013 - 10:31

Je veux voir ça !
Merci pour le partage !

Ilfasidrel

Age : 25Messages : 36

Mer 13 Nov 2013 - 17:20

Merci :3

Fleurine

Age : 24Messages : 75

Mer 13 Nov 2013 - 21:40

Merci beaucoup !

aFlametGirl

Age : 32Messages : 39

Sam 16 Nov 2013 - 18:59

Merci à toi pour ce code !

Ayzi

Age : 32Messages : 24

Sam 16 Nov 2013 - 19:47

Merci

Contenu sponsorisé