Comme sous-entendu dans un précédent gloubi tuto, il est maintenant possible avec CSS3 de créer des dégradés de couleurs.
Pour CSS, les dégradés sont considérés comme des images, et donc doivent être utilisés dans l’attribut background ou background-image d’une déclaration de style.
Il existe en CSS 3 types de dégradés :
- les dégradés linéaires : les couleurs sont étalées le long d’un axe
- les dégradés radiaux : les couleurs sont étalées depuis un point dans deux axes
- les dégradés coniques : les couleurs sont étalées autour d’un cercle
Les dégradés linéaires
Les dégradés linéaires sont définis à l’aide de la fonction CSS linear-gradient().
L’utilisation basique consiste à juste indiquer les différentes couleurs à étaler : linear-gradient(purple, blue, green, yellow, orange, red).
Appliqué sur une <div>, cela donne :
Comme vous pouvez le voir, par défaut, les couleurs sont étalées du haut vers le bas de l’élément sur lequel le dégradé est utilisé.
Il est possible d’indiquer un angle ou des mots-clés pour changer la direction du dégradé, la rotation se faisant par rapport au centre de l’élément.
linear-gradient(to left, purple, blue, green, yellow, orange, red)linear-gradient(70deg, purple, blue, green, yellow, orange, red)Les dégradés radiaux
Les dégradés radiaux sont définis à l’aide de la fonction CSS radial-gradient().
Comme pour les dégradés linéaires, l’utilisation basique consiste à simplement indiquer les différentes couleurs à utiliser : radial-gradient(purple, blue, green, yellow, orange, red).
Appliqué sur une <div>, cela donne :
Par défaut, un dégradé radial adopte la forme d’une ellipse, centrée au centre de l’élément sur lequel le dégradé est appliqué.
Tout comme les dégradés linéaires, il est possible de modifier ce comportement de base à l’aide de mots-clés. Ces mots-clés permettent de changer la forme du dégradé en cercle, ainsi que définir son centre et la manière dont il s’étale par rapport aux coins et côtés de l’élément.
radial-gradient(circle at 10% 20%, purple,blue, green, yellow, orange, red)radial-gradient(closest-side at 50% 25%, purple, blue, green, yellow, orange, red)