• Mettre de l'opacité aux bordures

    Par Lockpine dans Codage le 13 Juillet 2019 à 11:05

    Code à mettre dans la partie CSS.

    Ce code permet de changer l'opacité d'un ou plusieurs bords.

    Div sera à remplacer par votre sélecteur.

    Le X indique la taille de vos bordures.

    Les couleurs se font ici grâce au code RGBA que vous pouvez trouver facilement sur Internet. Les 3 premiers chiffres (en rouge) servent pour la couleur. Ils vont de 0 à 255. Le quatrième chiffre (en violet) permet d'indiquer l'opacité allant de 0.0 à 1.

    "border-top" concerne la bordure du haut, "border-right" pour la bordure droite, "border-bottom" pour la bordure du bas et enfin, "border-left" pour la bordure à gauche.

    div {
        border-top: Xpx solid rgba(255, 0, 0, .5);
        border-right: Xpx solid rgba(255, 0, 0, .5);
        border-bottom: Xpx solid rgba(255, 0, 0, .5);
        border-left: Xpx solid rgba(255, 0, 0, .5);
        -webkit-background-clip: padding-box; /* SAFARI */
        background-clip: padding-box; /* OPERA, CHROME, FIREFOX, INTERNET EXPLORER */
    }

    Ce qui nous donne un code de ce style :

    #menu1 {
        border-top: 10px solid rgba(255, 255, 255, .5);
        border-right: 10px solid rgba(255, 255, 255, .5);
        border-bottom: 10px solid rgba(255, 255, 255, .5);
        border-left: 10px solid rgba(255, 255, 255, .5);
        -webkit-background-clip: padding-box; /* SAFARI */
        background-clip: padding-box; /* OPERA, CHROME, FIREFOX, INTERNET EXPLORER */
    }

     

    Mettre de l'opacité aux bordures


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :