• Flèches monter / descendre

    Bonjour ! Petite astuce pour mettre des flèches qui vous permettront de monter ou de descendre plus rapidement de votre page. Le code est en deux parties, une HTML et une CSS.

    Partie HTML.

    <p><a title="#footer" href="#footer"><img id="id1" src="FLÈCHE BAS.PNG" alt="" /></a> <a title="#top" href="#top"><img id="id2" src="FLÈCHE HAUT.PNG" alt="" /></a></p>

    Ce code HTML est à coller dans le code source d'un module simple.

    • En rouge: les identifiants, j'ai noté id1 et id2, vous pouvez changer mais dans ce cas il faudra noté ces mêmes identifiants dans le code CSS plus tard.
    • En rose: adresses url de vos images (flèches), une qui part vers le bas et l'autre vers le haut.
    • En vert: le titre / nom qui apparaîtra au survol de l'image (vous pouvez noter ce que vous voulez "monter", "top"...).

     

    Partie CSS.

    #id1{position: fixed;
        right: 5px;
        bottom: 10%;   }
       
    #id2{position: fixed;
        right: 5px;
        bottom: 20%;   }

    • En rouge, on retrouve bien nos même identifiants mis dans le code HTML.
    • En vert, la position fixed permet à vos images de rester fixe, elles ne bougeront pas et donc seront toujours visibles.
    • En rose: la position des flèches sur votre blog, right par rapport au bort droit et bottom du bas. Vous pouvez mettre les valeurs en % ou en px.

    Voilà, une fois les deux parties installées vos flèches monter/descendre sont fonctionnelles. Vous pouvez également les personnaliser, comme les rendre plus discrètes par exemple.

    #id1{position: fixed;
        right: 5px;
        bottom: 20px;
        opacity: 0.3;}
       
    #id2{position: fixed;
        right: 5px;
        bottom: 70px;
        opacity: 0.3;}

    #id1:hover {opacity: 1;}

    #id2:hover {opacity:1;}

    Les flèches auront une opacité de 0.3 (légèrement transparente) et au survol (:hover), une opacité de 1, soit, totalement visible.

    Voilà le tuto est terminé, j’espère qu'il vous sera utile !


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :