[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

Skyleen

Age : 32Messages : 476

Jeu 24 Mai 2012 - 16:20

Merci

Mymz

Age : 32Messages : 24

Dim 3 Juin 2012 - 4:28

L'effet est mortel ! Merci !

vic_le_faucheur

Age : 30Messages : 764

Dim 3 Juin 2012 - 12:25

Salut,

Bonne idée ce tuto.

Par contre je vais émettre une petite remarque =).
Les effets au survol, il faut les utiliser avec soin car ça peux vite devenir pénible (c'est pas le cas ici), ou alors ça peux faire des truc assez énervant (c'est le cas ici ^^).
En l’occurrence, si on place la souris vers le début du titre, le titre se déplace, puis dépasse le curseur, il revient alors en arrière et retourne sur le curseur, ce qui donne des allez-retours sans fin très désagréables.
Il faudrait mettre le titre dans une division ("div"), qui prenne toute la place et lorsque celle ci est survolée, on décale le titre. Ca permettrais de résoudre ce problème.

Voilà voilà ^^

Miss Volchok

Age : 37Messages : 139

Mer 6 Juin 2012 - 3:12

Voyons voir, merci.

Vorn

Age : 28Messages : 2342

Sam 9 Juin 2012 - 16:17

Vic < Très bonne idée ! =)

Shirabi

Age : 28Messages : 47

Sam 9 Juin 2012 - 16:28

Merci encore à vous =D

Sheelal

Age : 32Messages : 30

Lun 11 Juin 2012 - 10:40

Merci :)

Mzelle Machin

Messages : 118

Lun 11 Juin 2012 - 21:02

Merci =)

Metamorphe

Age : 31Messages : 17

Mar 12 Juin 2012 - 14:11

Merci ! ♥

Hiroshina

Age : 30Messages : 37

Jeu 14 Juin 2012 - 10:24

Merci (:

K'Aya

Age : 25Messages : 427

Sam 16 Juin 2012 - 20:31

Merci d'avance pour cette astuce :)

bubble82

Age : 79Messages : 12

Ven 22 Juin 2012 - 21:25

Super tuto (: merci ♥

Ju' de fruits

Age : 31Messages : 82

Dim 24 Juin 2012 - 12:31

Merci beaucouuup *O*

Celska

Age : 29Messages : 39

Dim 24 Juin 2012 - 14:11

Sunkyou !!

Aureeliie

Age : 25Messages : 90

Lun 25 Juin 2012 - 15:18

mERCI !

Vorn

Age : 28Messages : 2342

Lun 25 Juin 2012 - 15:32

De rien ^^

Milkshake

Age : 25Messages : 29

Mar 26 Juin 2012 - 20:35

Merci

Killike

Age : 30Messages : 33

Mar 26 Juin 2012 - 23:05

oh merci pour ce tuto! =)

Imperatif

Age : 30Messages : 38

Mer 27 Juin 2012 - 21:36

Merci :)

servity

Age : 52Messages : 82

Jeu 28 Juin 2012 - 10:57

merci beaucoup

L*

Age : 30Messages : 44

Jeu 28 Juin 2012 - 15:06

Merci beaucoup pour le partage :)

3uphemia

Age : 29Messages : 28

Jeu 28 Juin 2012 - 20:19

Merci Captain :)

3uphemia

Age : 29Messages : 28

Jeu 28 Juin 2012 - 20:26

Merciii

Moony

Age : 24Messages : 14

Lun 2 Juil 2012 - 12:11

Merci beaucoup pour l'astuce, ça rend bien !

Minow

Age : 24Messages : 14

Lun 2 Juil 2012 - 13:09

Merci I want to see that now x)

Contenu sponsorisé