Gradients

The CSS Podcast - 021: Gradients

Imaginez que vous devez créer un site. En haut, il y a une introduction avec un titre, un résumé et un bouton. Le concepteur a fourni une conception avec un arrière-plan violet pour cette introduction. Le seul problème est que l'arrière-plan comporte deux nuances de violet en dégradé. Comment procéder ?

Vous pourriez penser au départ que vous devrez exporter une image à partir de votre outil de conception pour ce faire, mais vous pouvez utiliser un linear-gradient à la place.

Un dégradé est une image et peut être utilisé partout où les images peuvent l'être, mais il est créé avec CSS et se compose de couleurs, de nombres et d'angles. Les dégradés CSS vous permettent de créer n'importe quoi, d'un dégradé fluide entre deux couleurs à des illustrations impressionnantes en mélangeant et en répétant plusieurs dégradés.

Dégradé linéaire

La fonction linear-gradient() génère une image de deux couleurs ou plus, de manière progressive. Il nécessite plusieurs arguments, mais dans sa configuration la plus simple, vous pouvez transmettre des couleurs comme celle-ci. Elles seront alors automatiquement réparties de manière égale, tout en étant mélangées.

.my-element {
    background: linear-gradient(black, white);
}

Vous pouvez également transmettre un angle ou des mots clés qui représentent un angle. Si vous choisissez d'utiliser des mots clés, spécifiez une direction après le mot clé to. Cela signifie que si vous souhaitez un dégradé noir et blanc, qui s'étend de gauche (noir) à droite (blanc), vous devez spécifier l'angle en tant que to right comme premier argument.

.my-element {
    background: linear-gradient(to right, black, white);
}

Valeur de couleur définie à l'endroit où une couleur s'arrête et se mélange à ses voisines. Pour un dégradé commençant par une nuance sombre de rouge à 45 degrés, passant à un rouge plus clair à 30% de la taille du dégradé :

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Vous pouvez ajouter autant de couleurs et d'arrêts de couleur que vous le souhaitez dans un linear-gradient(), et superposer des dégradés en les séparant par une virgule.

Dégradé radial

Pour créer un dégradé qui rayonne de manière circulaire, la fonction radial-gradient() intervient. Il est semblable à linear-gradient(), mais au lieu de spécifier un angle, vous pouvez spécifier une position et une forme de fin. Si vous spécifiez uniquement des couleurs, radial-gradient() sélectionne automatiquement la position en tant que center et sélectionne un cercle ou une ellipse, en fonction de la taille de la zone.

.my-element {
    background: radial-gradient(white, black);
}

La position du dégradé est semblable à celle de background-position à l'aide de mots clés et/ou de valeurs numériques. La taille du dégradé radial détermine la taille de la forme de fin du dégradé (cercle ou ellipse). Par défaut, elle est de farthest-corner, ce qui signifie qu'elle correspond exactement au coin le plus éloigné du centre de la zone. Vous pouvez également utiliser les mots clés suivants:

• closest-corner rencontre le coin le plus proche du centre du dégradé.
• closest-side rencontre le côté de la boîte le plus proche du centre du dégradé.
• farthest-side fera l'inverse de closest-side.

Vous pouvez ajouter autant d'arrêts de couleur que vous le souhaitez, comme avec linear-gradient. De même, vous pouvez ajouter autant de radial-gradients que vous le souhaitez.

Dégradé conique

Un dégradé conique comporte un point central dans votre zone, et commence en haut (par défaut), puis fait le tour en 360 degrés.

.my-element {
    background: conic-gradient(white, black);
}

La fonction conic-gradient() accepte des arguments de position et d'angle.

Par défaut, l'angle est de 0 degré, ce qui correspond au point supérieur central. Si vous définissez l'angle sur 45deg, il s'agit de l'angle supérieur droit. L'argument "angle" accepte tout type de valeur d'angle, comme les dégradés linéaires et radiaux.

La position est au centre par défaut. Comme pour les dégradés radiaux et linéaires, le positionnement peut être basé sur des mots clés ou défini avec des valeurs numériques.

Vous pouvez ajouter autant d'arrêts de couleur que vous le souhaitez, comme avec les autres types de dégradés. Un bon cas d'utilisation de cette fonctionnalité, avec des dégradés coniques, est le rendu de graphiques circulaires avec CSS.

Répéter et mélanger

Chaque type de dégradé possède également un type répétitif. Il s'agit de repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient(). Elles sont semblables aux fonctions non répétitives et acceptent les mêmes arguments. La différence est que si le dégradé défini peut être répété pour remplir la zone, en fonction de ses deux tailles, il le sera.

Si votre dégradé ne semble pas se répéter, vous n'avez probablement pas défini de longueur pour l'un des arrêts de couleur. Par exemple, vous pouvez créer un arrière-plan rayé avec un repeating-linear-gradient en définissant les longueurs des arrêts de couleur.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Vous pouvez également mélanger des fonctions de dégradé sur les propriétés background, ainsi que définir autant de dégradés que vous le souhaitez, comme vous le feriez avec une image de fond. Par exemple, vous pouvez mélanger plusieurs dégradés linéaires ou deux dégradés linéaires avec un dégradé radial.

Ressources

• Conic.css : collection utile de dégradés coniques
• Guide MDN sur les gradients
• Générateur de dégradé

Vérifier vos connaissances

Tester vos connaissances sur les dégradés