CSS : les dégradés linéaires et radiaux avec CSS3

Un exemple de dégradé complexe

Non ce superbe ciel azur n'est pas une image réalisée avec un logiciel de dessin tel paint mais un dégradé radial produit uniquement avec du CSS !
Avec CSS3 on peut appliquer au "background" d'une boite un dégradé linéaire ou radial.

Des dégradés radiaux simples

Commençons par les dégradés radiaux.
Le dégradé rayonne à partir d'un point.

Le code correspondant

... <style> div{display : inline-block ; width : 300px ; height : 300px ; margin:1% ; border : 1px solid black ;} #degrade_radial_1{border-radius : 150px ;background : radial-gradient(black, white) ; } #degrade_radial_2{border-radius : 150px ;background : radial-gradient(green, lime, white ) ; } #degrade_radial_3{border-radius : 150px ;background: radial-gradient(darkgreen,green, lime, white ) ; } #degrade_radial_4{border-radius : 150px ;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 400 pixels par 400 mais grâce à border-radius : 200px ces boîtes apparaissent telles des cercles !

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.

Dégradés linéaires simples

Le dégradé respecte un axe.

Le code CSS correspondant

div{display : inline-block ; width : 300px ; height : 300px ; margin:1% ; border : 1px solid black ;} #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'un mot (top, right, bottom, etc.) et précédé de "to".
Les arguments suivants de la fonction linear-gradient sont les couleurs du dégradé (au moins deux couleurs).

Dégradés radiaux complexes

Exemple 1

Dans les exemples simples de dégradés radiaux nous avons supposé que la forme du dégradé était circulaire et que le dégradé partait du centre de la boite.
Or un dégradé radial peut être de forme elliptique et le dégradé peut partir d'un autre point que le centre de la boite.

Ci-dessous un coucher de soleil !

Le code HTML et CSS correspondant :

<div style ="width : 100%; height : 400px ; background-image : radial-gradient( farthest-corner ellipse at bottom center, orange 0%, blue 30%, skyblue 90% );"> </div>

L'argument relatif à la portée du dégradé ne concerne que les dégradés radiaux (fonction : radial-gradient).

Exemple 2

Reprenons le thème présenté en début de page : le superbe ciel d'été.

Le code est très court :

<div style ="width : 100%; height : 400px ; background-image : radial-gradient( farthest-corner circle at center, yellow 0%, aqua 25%, skyblue 50%);"> </div>

Il s'agit d'un dégradé radial circulaire qui part du centre de la boite et qui comprend trois couleurs.

Mais revenons sur le premier argument : porté du dégradé.

Dégradés répétifs

Un dégradé linéaire répétitif

Le code :

<div style ="width : 100%; height : 400px ; background-image : repeating-linear-gradient(black, blue, red 100px );"> </div>

Par défaut un dégradé linéaire va du haut vers le bas ; c'est ce que nous voulons donc le premier paramètre (axe du dégradé) peut être omis.
La commande devient "repeating-linear-gradient".
Le dégradé se déroule sur 100 px or la hauteur de la boite est 400 px donc le motif est répété 4 fois !

Un dégradé radial répétitif

Le code correspondant :

<div style ="width : 100%; height : 400px ; background-image : repeating-radial-gradient(farthest-side ellipse at center, lime, red 20% );"> </div>

Il s'agit d'un dégradé répétitif radial (et plus précisément elliptique) qui démarre du centre qui s'applique à 20% et est donc répété 5 fois.

Conclusion

La possibilité de pouvoir produire un dégradé en CSS est une grande avancée technique. Car auparavant si on souhaitait avoir une boite 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 "background" de cette boite.
Retour menu