Création de dégradés radiaux en CSS avec radial-gradient

En CSS, un dégradé est considéré comme une image qui va progressivement passer d’une couleur de base à une couleur d’arrivée.

Ainsi, nous allons pouvoir créer et utiliser les dégradés en CSS avec toutes les propriétés qui acceptent des images et notamment créer des dégradés en fond de nos éléments en utilisant la propriété background.

Nous allons pouvoir créer deux types de dégradés en CSS : des dégradés linéaires et des dégradés radiaux. Dans cette nouvelle leçon, nous allons apprendre à créer des dégradés radiaux.

 

Qu’est-ce qu’un dégradé radial ?

Un dégradé radial est un dégradé qui va partir d’un point central et se propager dans toutes les directions à partir de ce point.

Pour créer un dégradé radial, nous allons utiliser la notation radial-gradient() en valeur d’une propriété CSS acceptant des images comme background par exemple.

Voici un premier exemple de dégradé radial :

 

Comment se construit un dégradé radial en CSS

Pour créer un dégradé radial ou radial-gradient, nous allons devoir définir le point central ou point de départ de notre dégradé, les couleurs du dégradé ainsi que la taille de la forme finale de celui-ci. Nous allons également pouvoir fournir des color stops de la même façon qu’avec nos dégradés linéaires.

Le point d’origine ou point central du dégradé

Nous avons deux méthodes pour définir le point d’origine ou point central de notre radial-gradient : nous allons soit pouvoir utiliser des mots clefs, soit des valeurs absolues ou relatives. A noter que si on omet de préciser la position de départ pour notre dégradé radial, alors la position par défaut center sera utilisée.

Les mots clefs vont pouvoir être les mêmes qu’avec nos dégradés linéaires, à savoir top, right, bottom, left et center mais devrons être cette fois-ci être précédés du mot at.

Pour préciser les coordonnées d’un point, il faut normalement une valeur dans l’axe horizontal et une autre dans l’axe vertical et c’est la raison pour laquelle nous utiliserons souvent des mots clefs composées comme at top left. Si on ne précise que la valeur d’un axe (at top ou at left par exemple), alors la deuxième valeur calculée sera par défaut center.

Si on choisit d’utiliser des valeurs absolues ou relatives pour déterminer le point de départ de notre dégradé radial, alors il suffit de se rappeler que ces valeurs vont représenter l’écartement du point central du dégradé par rapport au coin supérieur gauche de son élément. Dans le cas où une seule valeur est passée, elle représentera l’écartement par rapport au bord gauche et par rapport au bord supérieur.

Si deux valeurs sont passées, la première représente l’écartement du point central par rapport au bord gauche tandis que la seconde représente l’écartement du point central du dégradé radial par rapport au coin supérieur de l’élément dans lequel on le crée.

La forme finale du dégradé

Pour définir la forme finale d’un dégradé radial, nous allons pouvoir utiliser les mots clefs circle (le dégradé aura une forme de cercle) soit ellipse (le dégradé sera une ellipse). Si aucune valeur n’est précisée, le dégradé sera un cercle dans le cas où une seule dimension a été précisée pour sa taille ou une ellipse dans le cas contraire.

La taille du dégradé

Nous allons également pouvoir indiquer la taille totale de notre dégradé radial soit de manière explicite en utilisant des valeurs soit en utilisant des mots clefs. La « taille du dégradé » correspond à la distance (ou aux distances) entre son point central et l’endroit où l’on va arriver à la dernière couleur déclarée dans le dégradé. Le reste de l’élément si le dégradé en soi possède une taille plus petite que lui sera rempli avec cette dernière couleur.

En ne passant qu’une valeur explicite, notre dégradé aura de fait la forme d’un cercle et la valeur passée sera la taille du rayon du dégradé. Si deux valeurs sont passées, la première représentera le « rayon » de l’ellipse dans l’axe horizontal tandis que la seconde représentera le « rayon » de l’ellipse dans l’axe vertical. Bien évidemment, on évitera de déclarer notre dégradé comme circle et de passer deux valeurs différentes en taille puisque cela n’aurait aucun sens.

Les mots clefs relatifs à la gestion de la taille d’un dégradé radial à notre disposition sont les suivants :

  • closest-side : Le dégradé va stopper dès qu’il va rencontrer le premier bord (le bord le plus proche) de l’élément auquel il est appliqué si il a une forme de cercle. Si il a une forme d’ellipse, alors il s’arrêtera au moment où il va toucher les deux côtés les plus proches dans les deux axes horizontal et vertical (il les touchera toujours en même temps par définition) ;
  • farthest-side : Le principe est le même que pour closest-side, à la différence que le dégradé va stopper lorsqu’il touchera le bord le plus lointain de l’élément auquel on l’applique cette fois-ci ;
  • closest-corner : Le dégradé va stopper dès qu’il va rencontrer le premier coin (le coin le plus proche) de l’élément auquel il est appliqué ;
  • farthest-corner : Même principe que pour closest-corner à la différence que la dégradé ne stoppera qu’une fois qu’il aura atteint l’angle le plus lointain de l’élément auquel on l’applique.

Notez que si on ne précise pas de taille pour notre dégradé radial alors c’est la valeur farthest-corner qui sera utilisée par défaut.

Couleurs et color stops du dégradé

Finalement, par rapport à la position des color stops, notre 0% correspond au point central ou point d’origine du dégradé radial tandis que 100% va correspondre à l’endroit où le dégradé se termine.

 

Exemples de création de dégradés radiaux

Dans les exemples suivants, je vais créer des dégradés radiaux que je vais placer en fond de mes éléments. Avant tout, je vous rappelle les valeurs par défaut qui seront appliquées au dégradé si elles sont omises :

  • Forme du dégradé : ellipse par défaut sauf si une seule valeur (ou deux valeurs identiques) ont été précisées en taille du dégradé ;
  • Position du point central : center (centré) dans l’élément par défaut ;
  • Taille du dégradé : farthest-corner par défaut, ce qui signifie que la fin du dégradé va venir toucher le coin de l’élément le plus éloigné de son centre.

Création de dégradés radiaux simples

Commençons avec quelques exemples simples de création de dégradés radiaux avec radial-gradient. Prenez le temps une nouvelle fois de faire l’effort de retenir la syntaxe qui ressemble à celle déjà utilisée avec les dégradés linéaires.

Support HTML pour création de dégradé radial en CSS avec radial-gradient

Création de dégradé radial en CSS avec radial-gradient

On créé différents dégradés radiaux avec des centres et des tailles différentes avec radial-gradient

See the Pen Cours HTML CSS 9.4.1 by Pierre (@pierregiraud) on CodePen.

Dans le premier exemple, on crée un dégradé radial d’arrière plan avec background : radial-gradient(yellow, green, purple) pour notre premier div. Comme on ne précise que les couleurs du dégradé, notre dégradé sera par défaut une ellipse dont le point central est centré dans l’élément et qui va aller toucher le coin le plus éloigné de l’élément (les quatre coins en l’occurrence vu que notre dégradé est centré).

Dans le deuxième exemple, on utilise le mot clef circle pour que notre dégradé ait une forme de cercle. Comme la taille de celui-ci est toujours réglée sur farthest-corner et comme notre élément est plus large que haut, les parties haute et basse du dégradé vont être rognées.

Dans notre troisième exemple, on utilise des color stops juste pour vous montrer que ceux-ci vont fonctionner exactement de la même façon qu’avez les dégradés linéaires à la différence qu’ici notre dégradé a une forme d’ellipse. Pour bien calculer les color stops, il va falloir visualiser le « rayon » du dégradé. Dans le cas présent vous pouvez imaginer une ligne partant du centre de l’élément (puisque notre dégradé est centré par défaut) et allant toucher un de ses coins (puisque la taille du dégradé est par défaut farthest-side et qu’il est centré).

Dans nos quatrième et cinquième exemples, on définit des points de départ ou point centraux pour nos dégradés personnalisés. Dans le quatrième exemple, on indique simplement top. Le point central du dégradé va donc se trouver contre la bordure supérieure de l’élément et être centré par défaut en largeur. Dans le cinquième exemple, on précise deux coordonnés pour définir un point d’origine totalement personnalisé avec at 20% 80%. Le point central du dégradé sera donc situé à une distance de 20% de la bordure gauche de l’élément et à 80% de la bordure haute. Les pourcentages donnés ici sont exprimés en fonction de la taille de la boite représentant l’élément.

Dans le dernier exemple, on indique la valeur closest-side en taille de notre dégradé ce qui va le contraindre dans notre boite puisque dès qu’il va toucher un bord de l’élément il va s’arrêter.

Création de dégradés radiaux complexes

Nous allons également bien évidemment pouvoir créer des dégradés radiaux plus complexes et complets en définissant à la fois leur taille totale, la position de leur point central, la forme de ceux-ci etc. Faites juste attention ici à ne pas écrire de déclarations aberrantes (par exemple tenter d’imposer une forme de cercle à un dégradé radial tout en lui passant deux valeurs de taille différentes).

Support HTML pour création de dégradé radial en CSS avec radial-gradient

On définit des tailles et formes pour nos dégradés radiaux avec radial-gradient en CSS

On crée des dégradés radiaux avec radial-gradient avec des formes différentes

See the Pen Cours HTML CSS 9.4.2 by Pierre (@pierregiraud) on CodePen.

Ici, notre premier dégradé radial a une forme de cercle et un rayon d’une taille égale à la distance entre le point central du dégradé et le bord de l’élément le plus proche de ce point central.

Notre deuxième dégradé a un rayon de 100px et on place le point central du dégradé contre le bord supérieur de l’élément. Comme on ne précise pas de position dans l’axe horizontal, le dégradé sera centré horizontalement par défaut.

On donne deux dimensions (largeur / hauteur du « rayon ») différentes à notre troisième dégradé qui va donc de fait prendre la forme d’une ellipse. On place également le point central à une distance de la bordure gauche de l’élément égale à 25% de la largeur de la boite de l’élément et à une distance de la bordure haute de l’élément égale à 50% de la hauteur de la boite de l’élément.

Dans notre dernier div, on tente de créer un dégradé avec un « rayon » de 100px de large pour 50px de haut tout en lui imposant une forme de cercle. Cela n’est évidemment pas possible et va résulter en une erreur et le dégradé ne sera pas affiché.

Dégradés radiaux multiples et semi-transparents

L la propriété background est tout à fait capable de gérer des fonds multiples. Nous allons donc pouvoir placer plusieurs dégradés en fond de nos éléments et les faire fusionner entre eux en utilisant des notations RGBa ou HSLa() qui vont nous permettre de rendre nos dégradés semi transparents.

Nous allons également de la même manière pouvoir placer un dégradé radial et une image en fond d’un élément. Je vous rappelle ici que le premier élément de fond déclaré en CSS sera au-dessus du second et etc.

Support HTML pour création de dégradé radial en CSS avec radial-gradient

On utilise radial-gradient avec background pour définir des dégradés radiaux en fond des éléments en CSS

On définit plusieurs dégradés radiaux avec radial-gradient qu'on place en fond de nos éléments

See the Pen Cours HTML CSS 9.4.3 by Pierre (@pierregiraud) on CodePen.

Notre premier dégradé est ici totalement opaque. Le dégradé de notre deuxième div utilise les mêmes paramètres que celui du premier à la différence que nous utilisons des notations RGBa() et qu’on lui attribue des couleurs semi transparentes.

Ensuite, on place deux dégradés radiaux en fond de notre troisième div. Afin qu’on puisse voir les deux, ici, j’opte pour un premier dégradé d’une taille relativement petite et utilise les notations RGBa() en déclarant une couleur d’arrivée de mon dégradé totalement transparente pour ne pas « polluer » le dégradé du dessous.

Je décale suffisamment mon deuxième dégradé dans mon élément afin qu’il ne se trouve pas au même endroit que le premier. C’est la couleur de fin du deuxième dégradé qui va remplir le div.

Finalement, on utilise un dégradé radial en semi transparence avec une image de fond pour notre quatrième div.

 

La répétition de dégradés

Nous avons vu dans la leçon précédente qu’on pouvait créer des dégradés linéaires qui vont se répéter avec la fonction repeating-linear-gradient(). Nous allons avoir accès à la même fonctionnalité avec les dégradés radiaux en utilisant cette fois-ci plutôt repeating-radial-gradient().

Cette fonction va s’utiliser de manière analogue à sa sœur servant à créer des dégradés linéaires. Nous allons une nouvelle fois pouvoir créer des transitions fluides en faisant boucler un dégradé radial sur lui-même, c’est-à-dire en lui donnant la même couleur de départ et d’arrivée.

Support HTML pour création de dégradé radial en CSS avec repeating-radial-gradient

Utilisation de la propriété repeating-radial-gradient en CSS

On utilise repeating-radial-gradient pour créer des dégradés radiaux qui se répètent

See the Pen Cours HTML CSS 9.4.4 by Pierre (@pierregiraud) on CodePen.

1 réflexion au sujet de “Création de dégradés radiaux en CSS avec radial-gradient”

Laisser un commentaire