Gradients - Première partie

Tout d'abord, je tiens à faire savoir que ceci est mon premier article sur Laravel Cameroun et il se peut que certains détails ne soient pas assez claire pour certaines personnes pour la simple raison que je ne suis pas encore très doué pour donner des leçons.

En voyant écrit Gradients, vous vous demandez sûrement ce que c'est !? Alors, pour ceux qui ne le savent pas, je vais vous le dire ;)

Dans le contexte de cet article, les Gradients sont différentes valeurs que peut admettre l'attribut CSS background-image qui permettent de donner un font de couleur dégradée à partir d'une ou plusieurs couleur différentes

En CSS, nous avons trois différentes formes de Gradient notamment:

• Linear
• Radial
• Conic

#Linear Gradient

Le linear gradient a deux approches d'usage qui ont une légère différence entre elles.

#Syntax

background-image: linear-gradient(angle, couleur-1, ..., couleur-n);

Exemple 1

code html

<div class="linear"></div>

styles css

.linear{
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-image: linear-gradient(35deg, red, blue);
}

Resultat

Figurez-vous que vous pouvez aussi déterminer le pourcentage que chaque couleur devra occuper :) ! Pou faire cela, on appliquera la syntax.

background-image: linear-gradient(angle, couleur-1 pourcentages, ..., couleur-n pourcentages)

Exemple 2

html

<div class="linear"></div>

css

.linear{
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-image: linear-gradient(35deg, red 15%, blue 30%, orange 80%);
}

Resultat