AccueilFAQRechercherMembresGroupesS'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.


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

    Partagez
    avatar
    Vorn
    MasculinAge : 22Messages : 2342

    le 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



    avatar
    Wavy
    FémininAge : 17Messages : 39

    le Mar 19 Mai 2015 - 19:01

    Merci !
    avatar
    kinai0107
    MasculinAge : 42Messages : 15

    le Mer 27 Mai 2015 - 17:00

    merci
    avatar
    Kimirsu Anko
    MasculinAge : 17Messages : 88

    le Mer 24 Juin 2015 - 15:15

    Merci !
    avatar
    cynical-echo
    FémininAge : 21Messages : 41

    le Mar 11 Aoû 2015 - 1:26

    Merci beaucoup. :)
    avatar
    Kelalin
    FémininAge : 26Messages : 1958

    le Mar 11 Aoû 2015 - 13:24

    Merci. (´∇ノ`*)ノ
    avatar
    rosebleudu10
    FémininAge : 28Messages : 189

    le Lun 24 Aoû 2015 - 17:01

    merci
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Lun 24 Aoû 2015 - 20:06

    Merci :) L'effet est très sympa !
    avatar
    melah
    FémininAge : 27Messages : 8

    le Mer 26 Aoû 2015 - 17:39

    merci
    avatar
    Pollux
    FémininAge : 27Messages : 97

    le Ven 28 Aoû 2015 - 9:46

    merci
    avatar
    Kraiyz
    MasculinAge : 21Messages : 29

    le Jeu 10 Sep 2015 - 18:01

    Merci !
    avatar
    Jane Bingum
    FémininAge : 20Messages : 80

    le Sam 26 Sep 2015 - 12:44

    Superbe! *.*
    avatar
    fair game
    FémininAge : 28Messages : 13

    le Dim 27 Sep 2015 - 1:47

    mzeci
    avatar
    Missy 26
    FémininAge : 29Messages : 60

    le Lun 28 Sep 2015 - 15:05

    Merci
    avatar
    Lestrange
    FémininAge : 22Messages : 163

    le Mar 10 Nov 2015 - 21:20

    Merci pour l'astuce °°
    avatar
    elfyqchan
    FémininAge : 21Messages : 64

    le Mar 24 Nov 2015 - 22:30

    La curiosité m'emporte. Merci pour le code ♥



    avatar
    Zoé
    FémininAge : 19Messages : 185

    le Ven 18 Déc 2015 - 22:06

    micii



    avatar
    Mohank
    MasculinAge : 23Messages : 20

    le Lun 25 Jan 2016 - 21:16

    Merci!
    avatar
    chocapikeuh
    FémininAge : 26Messages : 12

    le Ven 5 Fév 2016 - 1:20

    Idem par curiosité, je vais tester !! merki !
    avatar
    Neya
    FémininAge : 19Messages : 164

    le Sam 6 Fév 2016 - 14:17

    Très beau
    avatar
    Lusso
    MasculinAge : 21Messages : 36

    le Sam 6 Fév 2016 - 15:53

    Merci ! :)
    avatar
    Specter
    MasculinAge : 22Messages : 10

    le Dim 7 Fév 2016 - 4:55

    Merci Wink
    avatar
    Asaliah
    FémininAge : 33Messages : 120

    le Mer 24 Fév 2016 - 9:21

    Merci !



    avatar
    l'intruse
    FémininAge : 24Messages : 39

    le Jeu 7 Avr 2016 - 1:13

    Merci!! :popcorn:
    avatar
    Usolia Naviento
    FémininAge : 25Messages : 25

    le Ven 12 Aoû 2016 - 1:00

    J'ai trop envie d'essayer Wink Merci!
    avatar
    .Lucifer.
    MasculinAge : 45Messages : 179

    le Jeu 6 Oct 2016 - 11:31

    Merci pour l'astuce ! Wink



    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Oct 2018 - 17:39