• Flèches monter / descendre

    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, ou dans les statistiques, ça marche aussi.

    • En rouge: les identifiants, j'ai noté id1 et id2, vous pouvez changer, mais dans ce cas, il faudra noter 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 les mêmes identifiants utilisé dans le code HTML.
    • En vert, la position fixed permet à vos images de rester fixe sur votre blog. Elles ne bougeront pas en cas de scroll, 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.

    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 en jouant sur l'opacité.

    #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.

     

    Où trouver des flèches ?

    Iconsdb ou Icones8

     

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


    Tags Tags : , ,
  • Commentaires

    1
    Dimanche 8 Septembre 2019 à 20:03

    Bonjour ! 

    Je tenais à te remercier pour les codes que tu nous donne car ça m'a vraiment aidé ! Surtout pour les flèches, là, je n'y arrivais pas. Je sais pas ce que je faisais de mal mais zut quoi. Alors que là, c'est allé tip top. C'est magnifique je suis trop contente merci beaucoup ! 

     

    J'ai tout de même une question, tu les trouves où les images des flèches ? Sur internet tout bêtement ou il y a un endroit aussi pratique que ton blog ? 

    Bonne soirée/ journée ! 

    • Voir les réponses
    2
    Mardi 1er Août 2023 à 19:53

    Merci beaucoup pour ces explications claires et précises ! 

    Au passage, j'adore le design de ton blog. ^^

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter