Gradients

Podcast The CSS – 021: Gradients

Imaginez que vous avez un site à créer et qu'en haut il y a une introduction avec un titre, un résumé et un bouton. Le concepteur a fourni un design qui a un fond violet pour cette introduction. Le seul problème est que l'arrière-plan présente deux nuances de violet en dégradé. Comment procédez-vous ?

Vous pensez peut-être au départ que vous allez devoir exporter une image depuis votre outil de conception, mais vous pouvez utiliser un linear-gradient à la place.

Un dégradé est une image qui peut être utilisée partout où des images peuvent être utilisées. Toutefois, il est créé en CSS et composé de couleurs, de chiffres et d'angles. Les dégradés CSS vous permettent de créer n'importe quoi, d'un dégradé lisse entre deux couleurs, à une illustration impressionnante en mélangeant et en répétant plusieurs dégradés.

Dégradé linéaire

La fonction linear-gradient() génère progressivement une image de deux couleurs ou plus. Il accepte plusieurs arguments, mais dans sa configuration la plus simple, vous pouvez transmettre des couleurs comme celle-ci. Elle les répartira automatiquement de manière uniforme lors de leur fusion.

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

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

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

Valeur d'arrêt de couleur définie où une couleur s'arrête et se mélange avec ses voisines. Voici ce à quoi ressemble un dégradé commençant par une nuance de rouge foncé, selon un angle de 45 degrés, à 30% de la taille du dégradé passant à un rouge plus clair.

.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é rayonnant de manière circulaire, la fonction radial-gradient() interviendra pour vous aider. Il est semblable à linear-gradient(), mais au lieu de spécifier un angle, vous pouvez éventuellement spécifier une position et une forme de fin. Si vous spécifiez simplement des couleurs, radial-gradient() sélectionne automatiquement la position 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 avec les mots clés et/ou les valeurs numériques. La taille du dégradé radial détermine la taille de la forme finale du dégradé (cercle ou ellipse). Par défaut, elle sera farthest-corner, ce qui signifie qu'elle correspond exactement à l'angle le plus éloigné du centre. Vous pouvez également utiliser les mots clés suivants:

• closest-corner atteint l'angle le plus proche du centre du dégradé.
• closest-side rejoint le côté de la boîte le plus proche du centre du dégradé.
• farthest-side fera le contraire de closest-side.

Vous pouvez ajouter autant de points 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 cadre et commence par le haut (par défaut) et s'articule autour d'un cercle de 360 degrés.

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

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

Par défaut, l'angle est de 0 degré et commence en haut, au centre. Si vous définissez l'angle sur 45deg, il s'agirait de l'angle supérieur droit. L'argument angle accepte n'importe quel type de valeur d'angle, comme les dégradés linéaires et radiaux.

Par défaut, la position est centrée. 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 de repères de couleur que vous le souhaitez, comme pour les autres types de dégradés. Un bon cas d'utilisation de cette fonctionnalité avec les dégradés coniques consiste à afficher des graphiques à secteurs en CSS.

Répéter et mélanger

Chaque type de dégradé a également un type qui se répète. Il s'agit de repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient(). Elles sont similaires aux fonctions non répétitives et prennent 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 leurs deux tailles, il le sera.

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

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

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

Ressources

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

Testez vos connaissances

Tester vos connaissances sur les dégradés