Tutoriel CSS3 - sommaire

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

Vous savez déjà remplir le fond d'une boite avec une couleur unie ou avec une image. Sachez qu'avec CSS3 il est désormais possible de définir un dégradé radial ou linéaire pour remplir le fond d'une boite.

Un exemple de dégradé complexe

Non ce superbe ciel azur n'est pas une image réalisée avec un logiciel de dessin mais un dégradé radial produit uniquement avec du CSS !

Des dégradés radiaux simples

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

Les différents dégradés radiaux :
• dégradé radial tricolore
• dégradé radial quadricolore
• dégradé radial 4 nuances de rouge notées en rgba (transparence progressive)
• dégradé radial 5 nuances de jaune notéés en rgba (transparence progressive)

Le code CSS correspondant

.arrondi{display : inline-block ; width : 300px ; height : 300px ; margin:1% ; 
	border : 1px solid black ; border-radius : 150px; }
	
#degrade_radial_1 {background : radial-gradient(black, silver,lightgray) ; }
#degrade_radial_2 {background : radial-gradient(darkgreen, green, lime,palegreen ) ; }
#degrade_radial_3 {background: radial-gradient(rgba(255,0,0,1),rgba(255,0,0,0.7),
	rgba(255,0,0,0.5),rgba(255,0,0,0.2)); }
#degrade_radial_4 {background: radial-gradient(rgba(255,255,0,1),rgba(255,255,0,0.7),
	rgba(255,255,0,0.5),rgba(255,255,0,0.2), rgba(255,255,0,0) ) }

Le HTML

Analyse du code

Via la classe "arrondi" les 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).
Les DIV deviennent des ronds grâce à border-radius : 150px.
Sauf précision contraire les différentes couleurs se partagent de façon égale le rayon du dégradé;
Par défaut le dégradé part du centre de la boîte.
Comme vous le constatez, les couleurs peuvent être notées via leur nom ou leur code (héxadécimal, rgb, rgba).

Dégradés linéaires simples

Un dégradé linéaire a 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

.carre{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 ) ; }

Le code HTML

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

Nous avons supposé que la forme du dégradé radial é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

Admettez que c'est bluffant ; une seule instruction HTML (avec une règle de style en ligne) pour réaliser ce superbe dégradé radial.

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é
• par défaut les couleurs se répartissent équitablement dans le dégradé. Mais ici on indique que la couleur "turquoise" commence à 40% (donc fin de "orange") et se termine à 60% (début de la couleur suivante).

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 simple et court : <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ée du dégradé). Les valeurs possibles 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

Attention, ne confondez pas white et transparent

En effet dans la liste des couleurs vous pouvez employer le terme "transparent" (même orthographe qu'en français).

Code CSS et HTML d'un page web

Les deux dégradés radiaux sont identiques sauf la dernière couleur : "white" dans le premier et "transparent" dans le second.
Attention le background de la boite parente (élément "article") est "palegreen".

Le rendu

Remarquez bien la différence entre les deux dégradés.
Si la fond de la boite parente avait été "white", le rendu des deux dégradés aurait été identique.

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.
L'emploi des ces deux propriétés est encore une fois déroutante de simplicité.

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

Le rendu

Le code

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é a une portée de 100px or la hauteur de la boite étant de 400 pixels, le motif est donc répété 4 fois !

Un dégradé radial répétitif

Le rendu est assez psychanalytique

Le code correspondant

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.

Combiner border-image et un dégradé

Un superbe tableau impressionniste.

Le code de la page web

Emploi des propriétés préfixées border-image pour encadrer un dégradé radial.

Aperçu