• Appliquer un dégradé aux objets

    Par Lockpine dans Codage le 13 Juillet 2019 à 12:01

    Code à mettre dans la partie CSS.

    /!\ Ce code ne fonctionne pas sur internet explorer.

    Ce code permet de créer un dégradé sur vos objets sans passer par un logiciel.

    Div sera à remplacer par votre sélecteur.

    COLOR1 doit être remplacé par votre premier code couleur et COLOR2 doit être remplacé par votre deuxième code couleur.

    "Left" signifie que le dégradé va commencer par la gauche pour finir par la droite. Vous pouvez remplacer par "right" pour un dégradé allant de la droite vers la gauche, par "top" pour un dégradé allant de bas en haut et "bottom" pour un dégradé allant du haut vers le bas.

    div {
        background-image: -webkit-linear-gradient(left, COLOR1, COLOR2); /* FIREFOX */
        background-image: -moz-linear-gradient(left, COLOR1, COLOR2); /* CHROME */
        background-image: -o-linear-gradient(left, COLOR1, COLOR2); /* OPERA */
    }

     Exemple avec top :

    Appliquer un dégradé aux objets

    Si vous préférez commencer le dégradé par un certain angle, alors il faudra appliquer ce code à la place :

    Le X indique le degré du début du dégradé que vous voulez. Il va de 0 à 50.

    div {
        background-image: -webkit-linear-gradient(Xdeg, COLOR1, COLOR2); /* FIREFOX */
        background-image: -moz-linear-gradient(Xdeg, COLOR1, COLOR2); /* CHROME */
        background-image: -o-linear-gradient(Xdeg, COLOR1, COLOR2); /* OPERA */
    }

    Exemple à 30deg :

    Appliquer un dégradé aux objets

    Aussi, si vous souhaitez avoir un dégradé centré plutôt que linéaire, il faudra remplacer "lineart" par "radial" et effacez la partie qui donne la direction ou le degré. Comme ceci :

    Si jamais vous souhaitez l'inverse de vos couleurs, il suffit d'inverser votre couleur 1 et votre couleur 2.

    div {
        background-image: -webkit-radial-gradient(COLOR1, COLOR2); /* FIREFOX */
        background-image: -moz-radial-gradient(COLOR1, COLOR2); /* CHROME */
        background-image: -o-radial-gradient(COLOR1, COLOR2); /* OPERA */
    }

    Exemple :

    Appliquer un dégradé aux objets


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :