Gradients

Podcast CSS – 021: Gradients

Imaginez que vous avez un site à construire et, en haut, il y a une introduction avec un titre, un résumé et un bouton. Le concepteur a remis un design avec un arrière-plan violet pour cette introduction. Le seul problème est que l'arrière-plan comporte deux nuances de violet comme dégradé. Comment procéder ?

Au départ, vous pensez peut-être que vous devrez exporter une image depuis votre outil de conception pour cela, mais vous pouvez utiliser un linear-gradient à la place.

Un dégradé est une image et peut être utilisé partout où les images peuvent être utilisées, mais créé avec CSS et composé 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, pour obtenir des illustrations impressionnantes en mélangeant et en répétant plusieurs dégradés.

Dégradé linéaire

linear-gradient() génère une image de deux couleurs ou plus, progressivement. Il accepte plusieurs arguments, mais dans sa configuration la plus simple, vous pouvez appliquer des couleurs comme celle-ci. Elle les divisera automatiquement de façon uniforme, tout en les mélangeant.

.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é en noir et blanc, allant 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. Pour un dégradé commençant par une nuance de rouge foncé à un angle de 45°, à 30% de la taille du dégradé passe à un rouge plus clair: cela ressemble à ceci.

.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 une linear-gradient(). et vous pouvez superposer des dégradés les uns sur les autres en séparant chaque dégradé par une virgule.

Dégradé radial

Pour créer un dégradé qui rayonne de manière circulaire, la radial-gradient() intervient 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 ne spécifiez que les couleurs, radial-gradient() sélectionne automatiquement la position center. et sélectionnez un cercle ou une ellipse, en fonction de la taille de la zone.

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

La position du gradient est semblable à background-position avec des mots clés et/ou des valeurs numériques. La taille du dégradé radial détermine la taille de la forme de fin du dégradé. (cercle ou ellipse), et s'affichera par défaut sur farthest-corner, ce qui signifie qu’elle rejoint exactement le coin le plus éloigné de la boîte par rapport au centre. Vous pouvez également utiliser les mots clés suivants:

• closest-corner rencontrera 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 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 a un point central dans votre boîte et commence par le haut (par défaut), pour former un cercle à 360 degrés.

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

conic-gradient() accepte les arguments position et angle.

Par défaut, l'angle est de 0 degré, qui commence en haut, au centre. Si vous définissez l'angle sur 45deg, il s'agira de l'angle supérieur droit. L'argument "angle" accepte tous les types de valeurs d'angle, comme les dégradés linéaires et radiaux.

Par défaut, la position est au centre. Comme pour le dégradé radial et linéaire, peut être basé sur des mots clés, ou avec des valeurs numériques.

Vous pouvez ajouter autant d'arrêts de couleur que vous le souhaitez, comme avec d'autres types de dégradé. L'affichage de graphiques à secteurs avec CSS constitue un bon cas d'utilisation de cette fonctionnalité avec des dégradés coniques.

Répétition et mélange

Chaque type de dégradé est également associé à un type répétitif. Il s'agit repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient() Elles sont semblables aux fonctions non répétitives et utilisent 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 leur taille.

Si votre dégradé ne semble pas se répète, 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 des longueurs de stop de couleur.

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

Vous pouvez aussi 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 MMD sur les gradients
• Générateur de gradient

Testez vos connaissances

Tester vos connaissances sur les gradients