Différences entre les versions de « Tutoriel dégradé de couleurs CSS »

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 1 : Ligne 1 :
À la place de donner juste une couleur aux textes et aux fonds, avec CSS il est aussi possible de créer des dégradé de couleurs avec la proprieté <code>background-image</code>
+
À la place de donner juste une couleur aux textes et aux fonds, avec [[CSS]] il est aussi possible de créer des dégradé de couleurs avec la proprieté <code>background-image</code>
  
 
==Types de dégradé==
 
==Types de dégradé==
Ligne 92 : Ligne 92 :
 
*[https://www.w3schools.com/css/css3_gradients.asp W3Schools - CSS Gradients]
 
*[https://www.w3schools.com/css/css3_gradients.asp W3Schools - CSS Gradients]
 
*[https://bootcamp.uxdesign.cc/gradient-text-in-css-609068d3f953 Bootcamp - Gradient text in CSS]
 
*[https://bootcamp.uxdesign.cc/gradient-text-in-css-609068d3f953 Bootcamp - Gradient text in CSS]
 +
 +
==Plus d'informations==
 +
 +
*[https://www.w3schools.com/cssref/pr_background-image.asp W3Schools - CSS background-image Property]

Version du 17 octobre 2021 à 14:04

À la place de donner juste une couleur aux textes et aux fonds, avec CSS il est aussi possible de créer des dégradé de couleurs avec la proprieté background-image

1 Types de dégradé

En CSS il est possible de créer deux types de dégradé de couleurs:

Le premier type se fait avec la fonction linear-gradient(color1, color2, ...)

Voici une exemple du code et son résultat:

.gradient {
  background-image: linear-gradient(blue, yellow);
}

En revanche, dans l'exemple qui suive on peut voir le deuxième type de dégradé avec la fonctin radial-gradient(color1, color2, ...):

.gradient {
  background-image: radial-gradient(blue, yellow);
}

2 Les dégradés lineaires - Direction

Il y a plusieures choses qu'on peut faire avec les dégradés, par default les dégradés sont visualisés de haut en bas, mais il est possible aussi changer la direction. Par exemple si on veut créer une dégradé qui vait de droite à gauche on peut peut écrire comme l'exemple qui suive:

.gradient {
  background-image: linear-gradient(to left, blue, yellow);
}

il est même possible de faire cela en diagonal:

.gradient {
  background-image: linear-gradient(to bottom right, blue, yellow);
}

ou utiliser un angle précis:

.gradient {
  background-image: linear-gradient(60deg, blue, yellow);
}

3 Couleurs Multiples

Avec les dégradés on n'est pas obligé à se limiter que à deux couleurs, en réalité on peut en insérer un nombre indéfini, comme dans les exemples qui suivent:

.gradient {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
}
.gradient {
  background-image: radial-gradient(to right, red, orange, yellow, green, blue, purple);
}

4 Créer un texte avec les gradients

Jusqu'à maintenant on s'est juste limités à créer des fonds avec les gradients, mais il est possible aussi faire cela avec le texte. Le code qui suit montre comment cela est possible:

.grad_text{
  background-color: red;
  background-image: linear-gradient(to right, red, green, blue, yellow) ;
  background-clip: text;
  color: transparent;
}
L'utilisation de background-color n'est pas obligatoire, mais fortement conseillée parce que certaines vieilles vérsions des browsers ne supportent pas les dégradés et il faut utiliser une couleur pour remplacer cela.

SAMPLE TEXT

5 Sources

6 Plus d'informations