[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

Feng.Yi

Age : 109Messages : 30

Ven 17 Mai 2013 - 4:00

Merci!

.Hunter

Age : 27Messages : 1054

Ven 17 Mai 2013 - 10:14

J'aime beaucoup pour cette astuce! :)

Sweet Angel

Age : 41Messages : 153

Sam 18 Mai 2013 - 10:33

Merci d'avance!

Victorica

Age : 27Messages : 21

Sam 18 Mai 2013 - 17:15

Merci !

MaryChou

Age : 28Messages : 16

Lun 20 Mai 2013 - 13:48

Merci pour le tuto :)

Sparky59

Age : 24Messages : 54

Lun 20 Mai 2013 - 15:20

Merci ^^

Archeos

Age : 28Messages : 60

Dim 26 Mai 2013 - 17:01

Super j'adore **

Nezumi

Age : 34Messages : 16

Jeu 30 Mai 2013 - 12:58

Merci

Zaidko

Age : 22Messages : 81

Sam 1 Juin 2013 - 10:58

Merci beaucoup ! Je cherchais partout ce tuto *-*

Nao'

Age : 33Messages : 31

Dim 2 Juin 2013 - 8:48

Merci ~

Stiou

Age : 30Messages : 42

Dim 2 Juin 2013 - 12:03

Oh je veux voiiiiir *-*
Merci beaucoup pour le tuto ♥

Tempo'

Age : 25Messages : 7

Dim 2 Juin 2013 - 14:41

Merci!

Ailou ~3

Age : 25Messages : 61

Mer 5 Juin 2013 - 15:52

Merci ! :)

Vector.

Age : 25Messages : 39

Mer 5 Juin 2013 - 20:22

Merci

Louna Luna

Age : 29Messages : 147

Jeu 6 Juin 2013 - 13:12

Merci !

Lulapsy

Age : 26Messages : 10

Lun 10 Juin 2013 - 20:34

Toutes les astuces sont géniales, wahou *-*

Lolloe

Age : 23Messages : 26

Lun 10 Juin 2013 - 21:08

Mercii c'est très beau !

Lysun

Age : 29Messages : 8

Sam 15 Juin 2013 - 16:43

Ce tuto m'intéresse, merci ! o/

GeoNimo

Age : 39Messages : 48

Dim 16 Juin 2013 - 17:36

merci

Bridgess

Age : 26Messages : 59

Dim 16 Juin 2013 - 18:28

Vraiment sympa comme code  ! Merci de l'avoir partagé ! Je l'utiliserais surement pour mon prochain thème :3

Opaline

Age : 24Messages : 86

Dim 16 Juin 2013 - 21:56

Merci :3

Parking

Age : 29Messages : 29

Lun 17 Juin 2013 - 18:28

Merci *^*

Eldiir

Age : 38Messages : 33

Mer 19 Juin 2013 - 3:35

Merci pour ce tuto! :)

Malizia.

Age : 28Messages : 90

Mer 19 Juin 2013 - 15:39

Merci !

Edana

Age : 34Messages : 173

Ven 21 Juin 2013 - 9:29

Merci! =D

Contenu sponsorisé