Gradients

On avait vu dans l'exercice gridfolio qu'on pouvait utiliser des images avec background-image pour les fonds de nos éléments, mais on peut aussi y mettre des dégradés.

Linear gradient

Le plus simple, on part d'un bords/coin de notre élément et on change progressivement la couleur à mesure qu'on se rapproche du bords/coin opposé.

background-image: linear-gradient(45deg, red, blue);

linear-gradient prend au moins 3 informations, sparées par des virgules.

• L'angle, pour savoir dans quel sens faire le dégradé
• la couleur de départ
• la couleur de fin

... enfin, non l'angle n'est pas obligatoire, à défaut ça ira de haut en bas, mais bon, ça ne mange pas de pain d'être clair, mieux vaux prendre l'habitude dès le début.

Il est possible de mettre plus que deux couleurs et de les positionner où on veut sur l'axe en spécifiant une distance après chaque couleur.

background-image: linear-gradient(
  180deg,
  #062956 0%,
  #023676 55%,
  #004193 94%,
  #86afcd 100%
);

Radial gradient

Le radial gradient n'est pas beacoup plus compliqué, plutôt que d'aller d'un bord à l'autre, on part du centre vers l'extérieur. Remarquez que si l'élément est rectangulaire on a une ellipse et pas un cercle.

background-image: radial-gradient(red, blue);

background-

On avait vu avec gridfolio le background-size un peu vite parce que ça nous permetait de renseigner cover comme valeur, et c'est bien pratique pour rogner les images avec la taille de l'élément.

Ceci dit, il existe quelques autres propriétés qui sont particulièrement utiles de connaitre pour pouvoir mieux manipuler les grandients.

• background-position: permet de se repositionner en X et Y
• background-repeat: accepte les valeurs suivantes
  • repeat: la valeur par défaut, qui va répéter le fond sur l'axe horizontal et vertical
  • repeat-x: qui va répéter seulement sur l'axe horizontal
  • repeat-y: qui va répéter seulement sur l'axe vertical
  • no-repeat: on ne répètera pas. Ce qui n'est pas couvert par l'image de fond sera de la couleur spécifié dans background-color
• background-size: permet de changer la taille du fond qui, par défaut, est de 100% 100%

Par exemple, je peux retirer la répétition, puis rendre le fond énorme, et déplacer le centre hors-champ, pour n'avoir qu'un arc d'un gigantesque radial-gradient.

background-size: 400% 400%;
background-position: 50% 100%;
background-repeat: no-repeat;
background-image: radial-gradient(
  #143C98 30%,
  #D4BBDB 80%
  );

Remarquez aussi qu'on est pas obligé de démarrer de 0 et finir à 100%. Ici les 30 premiers pourcents seront d'un bleu solide, et les derniers 20 pourcents seront lavande.

Superposition

On peut cumuler plusieurs gradients dans un background-image,ce qui est pratique pour faire des motifs par exemple.

background-image: 
  linear-gradient(0deg, black 2px, transparent 1px), 
  linear-gradient(90deg, rgb(200,0,0) 2px, grey 1px);
background-size: 40px 40px;

On remarquera qu'il sont peints de bas en haut. On peint d'abord le gradient rouge et gris qui va de gauche à droite puis, par-dessus, celui qui est noir et transparent qui va de bas en haut.

En règle générale, on fait les choses dans l'autre sens, l'une après l'autre en partant du haut.

Conic gardient

Et les dégradés en cône, qui sont circulaires et qui partent du centre, comme les radial gradients, sauf qu'au lieu de placer ses couleurs clefs du centre vers l'exterieur sur une ligne, on les place sur des angles ⟳.

background-image: conic-gradient(
  red 0deg,
  green 180deg,
  blue 360deg 
)

Donc forcément, on remarque bien qu'on ne spécifie plus des longueurs, en pourcentages ou en pixels, mais des angles.