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 : 21Messages : 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
    Chocolakato
    FémininAge : 28Messages : 795

    le Mer 4 Juil 2012 - 3:15

    Ouiiiiiii, ça c'est cool Very Happy



    avatar
    Kispz.
    FémininAge : 21Messages : 27

    le Mer 4 Juil 2012 - 18:36

    J'aime beaucoup le résultat , merci pour le partage (:






    avatar
    Alehandra
    FémininAge : 23Messages : 43

    le Lun 9 Juil 2012 - 0:07

    Merci pour l'astuce. o/
    avatar
    T_Time
    FémininAge : 20Messages : 104

    le Mer 11 Juil 2012 - 15:05

      Thanks :)
    avatar
    Maï-li
    FémininAge : 26Messages : 30

    le Sam 14 Juil 2012 - 9:52

    ^^ cooool mercii =)
    avatar
    Lakxi
    FémininAge : 25Messages : 40

    le Ven 20 Juil 2012 - 12:04

    ow, c'est cool !
    thks : )
    avatar
    Vine
    FémininAge : 29Messages : 9

    le Ven 20 Juil 2012 - 19:34

    Excellent ! Un code super sympa, merci à toi :)
    avatar
    kamisama19
    FémininAge : 24Messages : 17

    le Sam 21 Juil 2012 - 16:48

    Merci ~ c'est ce que je cherchais =w=
    avatar
    Reiõ
    MasculinAge : 25Messages : 206

    le Dim 22 Juil 2012 - 14:46

    Merci =)
    avatar
    Tetsu
    FémininAge : 18Messages : 23

    le Dim 29 Juil 2012 - 17:23

    Haaan je veux voir ;o; vive Never Utopia et leurs membres :)
    avatar
    Drizzle
    FémininAge : 20Messages : 135

    le Lun 30 Juil 2012 - 14:55

    Arigatô



    avatar
    Mitsuomi Takayanagi
    Age : 26Messages : 76

    le Sam 4 Aoû 2012 - 0:39

    Merci pour l'astuce



    avatar
    ChocoCookie
    FémininAge : 19Messages : 22

    le Sam 4 Aoû 2012 - 11:37

    Nyaa~ Arigatô !



    Life in colors
    avatar
    Nunuelle
    FémininAge : 19Messages : 28

    le Dim 5 Aoû 2012 - 14:49

    J'ai envie de voir le code alors je poste un petit merci
    avatar
    Naruhiko
    MasculinAge : 20Messages : 119

    le Lun 6 Aoû 2012 - 20:21

    Merci !



    avatar
    Lexie
    FémininAge : 26Messages : 46

    le Mar 7 Aoû 2012 - 1:09

    Merci
    avatar
    Slown
    FémininAge : 23Messages : 62

    le Mar 7 Aoû 2012 - 13:24

    Merci Very Happy
    avatar
    âme
    FémininAge : 53Messages : 154

    le Mer 8 Aoû 2012 - 13:56

    Je veux bien découvrir, merci :)



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    CathyCréation
    FémininAge : 38Messages : 207

    le Mer 8 Aoû 2012 - 14:00

    merci
    avatar
    cosmos-chann
    FémininAge : 21Messages : 115

    le Mer 8 Aoû 2012 - 15:30

    Merci
    avatar
    Pontos
    MasculinAge : 24Messages : 23

    le Mer 8 Aoû 2012 - 16:02

    Merci !
    avatar
    Laega
    FémininAge : 28Messages : 106

    le Jeu 9 Aoû 2012 - 15:28

    Merci pour ce tuto, je me mets tout de suite à la tache.
    Nickel ça fonctionne et ça rend super bien!
    avatar
    Jo-Champi
    FémininAge : 29Messages : 68

    le Sam 11 Aoû 2012 - 4:21

    Je veux!!! :love:
    avatar
    Nyan-cat
    FémininAge : 19Messages : 326

    le Sam 11 Aoû 2012 - 8:40

    michiii 83



    avatar
    FREAKS*
    FémininAge : 23Messages : 30

    le Dim 12 Aoû 2012 - 1:23

    Merci Razz
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 18:54