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 désormais 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.
Les différents dégradés radiaux :
- dégradé radial bicolore
- dégradé radial tricolore
- dégradé radial quadricolore
- dégradé radial pentacolore (5 couleurs)
Le code CSS et HTML correspondant
<![CDATA[
...
<style>
.boite{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 class ="boite" id = 'degrade_radial_1' > </div>
<div class ="boite" id = 'degrade_radial_2' > </div>
<div class ="boite" id = 'degrade_radial_3' > </div>
<div class ="boite" id = 'degrade_radial_4' > </div>
...
]]>
Commentaire du code
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.
Les différents dégradés linéaires :
- premier dégradé : bicolore (du haut) vers le bas (ou angle de 180 degrés)
- deuxième dégradé : tricolore avec un angle de 45 degrés (ou diagonale du bas vers le haut)
- troisième dégradé : tricolore allant (de la gauche) vers la droite (ou angle de 90 degrés)
- quatrième dégradé : quadricolore avec un angle de 135 degrés (ou diagonale du haut vers le bas)
Le code CSS correspondant
<![CDATA[
.boite{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).
L'axe du dégradé :
- 180 degrés (ou "to bottom") pour un dégradé vertical du haut vers le bas
- 45 degrés (ou "to top right") pour un dégradé diagonal du bas vers le haut
- 90 degrés (ou "to right") pour un dégradé horizontal de la gauche vers la droite
- 135 degrés (ou "to bottom right") pour un dégradé diagonal du haut vers le bas
Dégradés radiaux complexes
Abordons maintenant des dégradés radiaux plus sophistiqués.
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 :
<![CDATA[
<div class ="boite" style ="width : 100%; height : 400px ; background-image :
radial-gradient( farthest-corner ellipse at bottom center, orange 0%, blue 50%, skyblue 100% );">
</div>
]]>
Examinons maintenant tout les arguments de la commande radial-gradiant.
- farthest-corner : indique que le dégradé se termine jusqu'au coin le plus éloigné
- ellipse : le dégradé est de forme elliptique ; autre mot clé possible : circle (valeur par défaut)
- bottom center : position de départ du dégradé
- blue 50% : par défaut les couleurs se répartissent équitablement dans le dégradé (si 3 couleurs chacunes 1/3) mais ici on indique
que la couleur "blue" commence à 50% (donc fin de "orange") et se termine à 90% sur l'axe (début de "skyblue")
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 :
<![CDATA[
<div class ="boite" 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é.
Les valeurs possibles de cet argument sont :
- closest-corner : vers le coin le plus proche
- closest-side : vers le côté le plus proche
- farthest-corner : vers le coin le plus lointain
- farthest-side : vers le côte le plus lointain
Dégradés répétifs
Tant pour les dégradés radiaux que linéaires le motif du dégradé peut être répété.
En effet il existe les propriétés repeating-linear-gradiant & repeating-radial-gradiant.
Un dégradé linéaire répétitif
Le code :
<![CDATA[
<div class ="boite" 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 100px or la hauteur de la boite étant de 400 pixels, le motif est répété 4 fois !
Un dégradé radial répétitif
Le rendu est assez psychanalytique.
Le code correspondant :
<![CDATA[
<div class="boite" 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.
Les dégradés CSS et les zones de dessin dans la page
Je vous rappelle que si vous voulez dessiner (dessins statique ou animé) dans une page il faut utiliser l'API Canvas ou le langage SVG.
Rien n'interdit d'appliquer un dégradé CSS à une balise CANVAS ou SVG de la page.
En d'autres termes vous pouvez utiliser toute la puissance des dégradés CSS pour créer le "background" de votre zone de dessin Canvas ou SVG.