Créer un séparateur vraiment plus colorée avec du CSS ? 🌈
Aujourd’hui on va jouer avec la propriété background et linear-gradient afin de créer un séparateur arc-en-ciel.
La propriété linear-gradient permet de créer un gradient de couleur selon plusieurs paramètres.
Un axe, qui représente la ligne du dégradé. 📏
Des points d’arrêt de couleurs qui vont définir le rendu final du dégradé. 🎨
On peut donc par exemple écrire :
linear-gradient(to left, red, blue) Qui va donner un gradient de rouge vers du bleu en partant de la gauche de l’écran.
« Et sinon mon arc-en-ciel ? »
Oui, alors en jouant sur les points d’arrêt il est possible de couper le gradient d’une façon nette est précise.
Tu peux donc créer des bandes de couleurs et par la même occasion un arc-en-ciel.
Je te laisse regarder l’exemple que j’ai mis dans l’image pour mieux comprendre.
Si ça t’intéresse, j’ai développé encore plus plus d’exemples ici : https://codepen.io/Craaftx/pen/RwbMMxN
Commentaires