Tuto de Kayl n°9 : les dégradés 100% CSS

Bon en gros la syntaxe est toujours la même c’est assez simple o/

background: linear-gradient(direction, color1, color2);

Direction : to right | to left | to bottom right | to top left…

Tout est possible Fin les combinaisons c’est donc le sens du dégradé, on peut le faire aller de tous les côtés et en direction d’un angle quoi (diagonale). Sachant que de base le dégradé va naturellement de haut en bas si on écrit juste

background: linear-gradient(color1, color2);

Sachez également qu’on peut mettre toutes les couleurs qu’on veut Genre on peut en foutre plein à la suite, on est pas obligé de s’arrêter à 2 quoi Exemple :

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

Ce qui donnerait dans un code :

Code:

<div style="width: 500px; height: 200px; background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);"></div>

Waah bon c’est pas très lisible d’écrire là-dessus xD Mais c’est beau °^°
Ensuiteuh awih, on a donc vu le linear-gradient. On va maintenant voir le radial-gradient qui fonctionne exactement pareil hein SAUF qu’y a plus de direction puisque euh bah c’est un cercle donc cherche un côté et rappelle-moi quand t’en auras trouvé un quoi ._. , c’est juste des cercles bref. Donc petit exemple en code directement pour visualiser :

Code:

<div style="width: 500px; height: 200px; background: radial-gradient(red,orange,yellow,green,blue,indigo,violet);"></div>

Voilà c’est fini pour les dégradés de background. Sachez qu’il est possible de le faire sur du texte également, mais euh ce serait trop simple si on mettait juste :
color: linear-gradient(color1, color2);
Donc ça marche pas hein xD On est obligés de foutre 2 propriétés avec un background pour le mettre dans un texte. Gens, je suis sur le point de révéler comment on fait du texte en dégradé là ** Prêts ? Ok go

Donc on définit un background, qui s’appliquera ensuite sur le texte, donc imaginons qu’on veuille un texte dégradé arc-en-ciel :

Code:

<div style="background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);"></div>

Ensuite on ajoute les 2 propriétés pour transposer sur du texte et remettre le background transparent :
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Code:

<div style="background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Essayons avec une assez longue phrase pour voir ce que ça donne, et si ça marche. Omg c'est un miracle en vrai ça fonctionne bien c'est cool. Par contre il manque encore le violet. Voilà !</div>