CSS : Les fonds dégradés

Les dégradés radiaux

Le code correspondant

... <style> div{display : inline-block ; width : 44% ; height : 400px ; margin:1% ; border : 1px solid black ;} } #degrade_radial_1 {border-radius : 200px ;background : radial-gradient(black, white) ; } #degrade_radial_2{border-radius : 200px ;background : radial-gradient(green, lime, white ) ; } #degrade_radial_3{border-radius : 200px ;background: radial-gradient(darkgreen,green, lime, white ) ; } #degrade_radial_4{border-radius : 200px ;background: radial-gradient(black,darkgreen,green, lime, white ) ; } ... <div id = 'degrade_radial_1' > </div> <div id = 'degrade_radial_2' > </div> <div id = 'degrade_radial_3' > </div> <div id = 'degrade_radial_4' > </div> ...

Commentaire du CSS

Les boîtes DIV deviennent de type inline-block de façon à ce qu'elles se positionnent les unes à côté des autres (tant qu'il y a de la place) et non plus les unes en dessous des autres.
Les boîtes DIV font 44% par 400 mais grâce à border-radius : 200px ces boîtes apparaissent telles des ronds !

La fonction radial-gradient est facile à mettre en oeuvre. Il suffit d'indiquer en paramètres les couleurs successives du dégradé.
Par défaut le dégradé part du centre de la boîte.

Attention les DIV apparaîtront tels des ronds sur un écran normal (largeur > à 900 pixels) car alors la page (BODY) fait 900px de large et donc les DIV auront une largeur de 400px environ (44% de 900).
Mais sur un petit écran les DIV vont prendre la forme de pillules.

Dégradés linéaires

Le code CSS correspondant

#degrade_2_180 {background : linear-gradient(to bottom, black ,white) ; } #degrade_3_45{background : linear-gradient( 45deg, green,lime, white ) ; } #degrade_3_90{background: linear-gradient(to right, red, orange, white ) ; } #degrade_4_135{background : linear-gradient(135deg, black, purple,pink, white ) ; }

Commentaire

Le premier argument de la fonction linear-gradient est l'axe du dégradé exprimé sous forme d'un angle ou d'une expression commençant par le mot "to".
Les arguments suivants de la fonction linear-gradient sont les couleurs du dégradé (au moins deux couleurs).

Conclusion

La possibilité de pouvoir produire un dégradé en CSS est une grande avancée technique. Car auparavant si on souhaitait avoir une boîte avec un fond dégradé il fallait produire une image correspondant à ce dégradé grâce à un logiciel tel photoshop ou gimp puis utiliser cette image de dégradé comme arrière-plan de cette boîte.
Retour menu