AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-40%
Le deal à ne pas rater :
-40% sur Nike React Infinity Run Flyknit 2
95.97 € 159.99 €
Voir le deal

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

    Vorn
    Vorn
    MasculinAge : 24Messages : 2342

    Lun 26 Mar 2012 - 18:40

    Rappel du premier message :



    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



    [CSS] Hover (défilement bref) sur les noms catégories et forums  - Page 3 JGBUOP6
    Skyleen
    Skyleen
    FémininAge : 29Messages : 476

    Jeu 24 Mai 2012 - 16:20

    Merci



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Mymz
    Mymz
    FémininAge : 29Messages : 24

    Dim 3 Juin 2012 - 4:28

    L'effet est mortel ! Merci !



    :friends:
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 27Messages : 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
    Miss Volchok
    FémininAge : 34Messages : 139

    Mer 6 Juin 2012 - 3:12

    Voyons voir, merci.
    Vorn
    Vorn
    MasculinAge : 24Messages : 2342

    Sam 9 Juin 2012 - 16:17

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



    [CSS] Hover (défilement bref) sur les noms catégories et forums  - Page 3 JGBUOP6
    Shirabi
    Shirabi
    MasculinAge : 24Messages : 47

    Sam 9 Juin 2012 - 16:28

    Merci encore à vous =D
    Sheelal
    Sheelal
    MasculinAge : 28Messages : 30

    Lun 11 Juin 2012 - 10:40

    Merci :)



    [CSS] Hover (défilement bref) sur les noms catégories et forums  - Page 3 Sheela17
    Mzelle Machin
    Mzelle Machin
    FémininMessages : 118

    Lun 11 Juin 2012 - 21:02

    Merci =)
    Metamorphe
    Metamorphe
    FémininAge : 28Messages : 17

    Mar 12 Juin 2012 - 14:11

    Merci ! Very Happy
    Hiroshina
    Hiroshina
    FémininAge : 27Messages : 37

    Jeu 14 Juin 2012 - 10:24

    Merci (:
    K'Aya
    K'Aya
    FémininAge : 22Messages : 427

    Sam 16 Juin 2012 - 20:31

    Merci d'avance pour cette astuce :)
    bubble82
    bubble82
    FémininAge : 76Messages : 12

    Ven 22 Juin 2012 - 21:25

    Super tuto (: merci ♥
    Ju' de fruits
    Ju' de fruits
    FémininAge : 28Messages : 82

    Dim 24 Juin 2012 - 12:31

    Merci beaucouuup *O*



    Celska
    Celska
    FémininAge : 26Messages : 39

    Dim 24 Juin 2012 - 14:11

    Sunkyou !!



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    Aureeliie
    Aureeliie
    FémininAge : 22Messages : 90

    Lun 25 Juin 2012 - 15:18

    mERCI !
    Vorn
    Vorn
    MasculinAge : 24Messages : 2342

    Lun 25 Juin 2012 - 15:32

    De rien ^^



    [CSS] Hover (défilement bref) sur les noms catégories et forums  - Page 3 JGBUOP6
    Milkshake
    Milkshake
    FémininAge : 22Messages : 29

    Mar 26 Juin 2012 - 20:35

    Merci
    Killike
    Killike
    FémininAge : 27Messages : 33

    Mar 26 Juin 2012 - 23:05

    oh merci pour ce tuto! =)



    [CSS] Hover (défilement bref) sur les noms catégories et forums  - Page 3 Essaie4
    Imperatif
    Imperatif
    MasculinAge : 27Messages : 38

    Mer 27 Juin 2012 - 21:36

    Merci :)
    servity
    servity
    MasculinAge : 49Messages : 82

    Jeu 28 Juin 2012 - 10:57

    merci beaucoup



    [CSS] Hover (défilement bref) sur les noms catégories et forums  - Page 3 HadqjCkktw
    L*
    L*
    FémininAge : 27Messages : 44

    Jeu 28 Juin 2012 - 15:06

    Merci beaucoup pour le partage :)
    3uphemia
    3uphemia
    FémininAge : 26Messages : 28

    Jeu 28 Juin 2012 - 20:19

    Merci Captain :)
    3uphemia
    3uphemia
    FémininAge : 26Messages : 28

    Jeu 28 Juin 2012 - 20:26

    Merciii Wink
    Moony
    Moony
    FémininAge : 21Messages : 14

    Lun 2 Juil 2012 - 12:11

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



    « La vie est un mystère qu'il faut vivre, et non un problème à résoudre.  »
    Minow
    Minow
    FémininAge : 21Messages : 14

    Lun 2 Juil 2012 - 13:09

    Merci Wink I want to see that now x)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 20:05