AccueilDernières imagesRechercherS'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.

-34%
Le deal à ne pas rater :
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 – 100Hz HDR 10+, ...
919 € 1399 €
Voir le deal

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

    Vorn
    Vorn
    MasculinAge : 27Messages : 2342

    Lun 26 Mar 2012 - 18:40



    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  JGBUOP6
    avatar
    KanyeWest
    MasculinAge : 32Messages : 137

    Lun 26 Mar 2012 - 19:10

    hâate de voiiir :)

    Merci
    Lineae
    Lineae
    FémininAge : 36Messages : 135

    Lun 26 Mar 2012 - 23:32

    Par curiosité, merci d'avance pour le partage :p



    [CSS] Hover (défilement bref) sur les noms catégories et forums  Signso10
    Aki'
    Aki'
    FémininAge : 27Messages : 258

    Mar 27 Mar 2012 - 8:14

    Merci
    Parka
    Parka
    MasculinAge : 44Messages : 100

    Mar 27 Mar 2012 - 15:59

    Voir
    Vorn
    Vorn
    MasculinAge : 27Messages : 2342

    Mar 27 Mar 2012 - 17:07

    De rien Wink



    [CSS] Hover (défilement bref) sur les noms catégories et forums  JGBUOP6
    Kisuke.U
    Kisuke.U
    MasculinAge : 26Messages : 66

    Mar 27 Mar 2012 - 18:24

    Merci Very Happy



    [CSS] Hover (défilement bref) sur les noms catégories et forums  649969Laggron2
    The Fallen Angel
    The Fallen Angel
    MasculinAge : 27Messages : 36

    Mar 27 Mar 2012 - 19:10

    Merci pour le partage
    Vorn
    Vorn
    MasculinAge : 27Messages : 2342

    Mar 27 Mar 2012 - 19:11

    De rien :)



    [CSS] Hover (défilement bref) sur les noms catégories et forums  JGBUOP6
    Xplo-Sion
    Xplo-Sion
    FémininAge : 29Messages : 266

    Mer 28 Mar 2012 - 1:43

    Ce n'est pas le système de transition ?



    [CSS] Hover (défilement bref) sur les noms catégories et forums  121926034f5e3fbba2a48
    Vorn
    Vorn
    MasculinAge : 27Messages : 2342

    Mer 28 Mar 2012 - 7:56

    Pas vraiment non ^^ Si tu parles du tuto de Taktiik, non je pense pas :p



    [CSS] Hover (défilement bref) sur les noms catégories et forums  JGBUOP6
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 28 Mar 2012 - 10:29

    Je déplace dans CodaeActif où ce sera plus utile et surtout plus consulté Wink
    Merci d'avoir rédigé l'astuce ^^



    sign
    Sleepy
    Sleepy
    MasculinAge : 29Messages : 60

    Mer 28 Mar 2012 - 11:24

    la curiosité est un vilain défaut x.x Merci pour le partage



    [CSS] Hover (défilement bref) sur les noms catégories et forums  Sig_ne10
    Médea
    Médea
    FémininAge : 29Messages : 43

    Mer 28 Mar 2012 - 14:12

    Merci °3°
    Vorn
    Vorn
    MasculinAge : 27Messages : 2342

    Mer 28 Mar 2012 - 21:02

    Merci Captain :) et de rien les gens :)


    Edit: J'ai rajouter un exemple :)



    [CSS] Hover (défilement bref) sur les noms catégories et forums  JGBUOP6
    Elphemeria
    Elphemeria
    FémininAge : 29Messages : 17

    Sam 31 Mar 2012 - 16:49

    J'savais même pas que cet effet existait x) Merci beaucoup pour le tuto ^-^
    titou9322
    titou9322
    MasculinAge : 28Messages : 158

    Lun 2 Avr 2012 - 23:14

    Veux voir
    Emy
    Emy
    FémininAge : 32Messages : 17

    Mar 3 Avr 2012 - 11:56

    Super effet! :)
    Vorn
    Vorn
    MasculinAge : 27Messages : 2342

    Mar 3 Avr 2012 - 19:33

    Merci Wink



    [CSS] Hover (défilement bref) sur les noms catégories et forums  JGBUOP6
    Citizen
    Citizen
    MasculinAge : 33Messages : 7

    Jeu 5 Avr 2012 - 18:32

    Ahaha, je veux tester aussi, ça m'a l'air bien amusant ; super bon boulot n'empêche
    Erebe
    Erebe
    FémininAge : 30Messages : 25

    Sam 7 Avr 2012 - 12:18

    Merci beaucoup ! :DD
    Jimmy
    Jimmy
    MasculinAge : 28Messages : 166

    Dim 8 Avr 2012 - 12:09

    veux voir
    Sasu'X74
    Sasu'X74
    MasculinAge : 30Messages : 142

    Lun 16 Avr 2012 - 20:54

    Thanks !



    [CSS] Hover (défilement bref) sur les noms catégories et forums  Uchiha_sasuke_signature_by_dr_giddy
    avatar
    Yin
    FémininAge : 26Messages : 43

    Lun 16 Avr 2012 - 23:33

    Arigato ^^ Ca donne super bien ^^
    Jae Joong
    Jae Joong
    MasculinAge : 34Messages : 34

    Mar 17 Avr 2012 - 9:08

    Merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 1:35