Comment créer des couleurs dégradés en css3 ?

La nouvelle norme CSS3 a introduit deux nouvelles valeurs pour la propriété background-color qui créent une couleur dégradé.
Ces deux valeurs sont :
linear-gradient et
radial-gradient
Et oui linear-gradient et radial-gradient ne sont pas des propriétés, ce sont des valeurs de la propriété background-color.

Somaire

Comment créer des dégradés linéaires avec linear-gradient

CSS3 cours tutorial

Un dégradé linéaire est la transition peu à peu  entre ds couleurs sur une distance entre deux points en ligne droite.
 À sa plus simple expression, un dégradé linéaire change proportionnellement et progressivement entre un minimum de deux couleurs sur toute la longueur de la ligne.
 

Syntaxe des dégradés linéaires

Voici la syntaxe pour un dégradé linéaire, telle qu'elle doit être appliquée à la propriété background :
background : linear-gradient(x y, couleur1, couleur2, couleurN)
x et|ou y désignent la direction du dégradé. Exemple : "to right" ou "to left bottom", il peut être aussi un angle en degré. Par défaut to top.
couleur1, couleur2 et couleurN : Peut être  les noms de couleurs,  valeurs hexadécimal ou  valeurs RGBa.
 

Exemple un dégradé avec direction ver la droite du noir au blanc

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title> CSS3 les dégradés liniéres </title>
<style> 
div{width:400px;height:100px;
border:1px solid #000;
}
.linears{
             background:linear-gradient(to right, #000, #FFF);
            }
</style>
</head>
<body>
<div class="linears"></div>
</body>
</html>
 

Les étapes de couleur sont traitées dans l'ordre indiqué, cet exemple crée un dégradé qui va du noir au blanc. Cela distribuera uniformément les couleurs le long du gradient, sauf indication contraire.
 Dans cet exemple chaque couleur prend 50% du gradient.

Exemple un dégradé du bleu au transparent

Sélectionner le code

.linears{
              background:linear-gradient(to right, blue, transparent);
            }
 
 

 

Exemple dégradé plusieurs couleurs du rouge au violet

Sélectionner le code

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

 

Dégradé suivant un angle

On peut indiquer la direction par des angles en degré au lieu de top, left …
To top correspond à 0deg, to right à 90deg et évidement  cette manière permet plus de liberté puisque on peut avoir une direction de 0deg à 360deg

Exemple dégradé suivant un angle

Sélectionner le code

.linears{
             background: linear-gradient(10deg, red, orange, yellow, green, blue, indigo, violet);
            }

 

Cet exemple reprend l’exemple précédent mais avec une direction suivant un angle de 10deg.

Comment contrôler la distribution des couleur le long du gradient.

La meilleure façon d'illustrer ceci est une démonstration, pour lequel je vais utiliser le code suivant :

Exemple

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>CSS3 les dégradés liniéres</title>
<style> 
div{width:100px;height:100px;
border:1px solid #000;
display:inline-block;
}
.linears1 { background: linear-gradient(to left, #000, #FFF, #000);} 
.linears2 { background: linear-gradient(to left, #000, #FFF 65%, #000);} 
.linears3 { background: linear-gradient(to left, #000, #FFF 20px, #000);} 
.linears4 { background: linear-gradient(to left, #000, #FFF, #000, #FFF, #000);}
</style>
</head>
<body>
<div class="linears1"></div>
<div class="linears2"></div>
<div class="linears3"></div>
<div class="linears4"></div>
</body>
</html>
 

Voici le résultat :
dégradé lineaire
Explication :
Le premier exemple utilise les valeurs comme présentées tout au long de cette section, crée un dégradé qui va du noir au blanc et vice versa de nouveau. Cela distribuera uniformément les couleurs le long du gradient, ce qui entraine l'arrêt de couleur blanche exactement à mi-chemin entre les deux noirs.
L'exemple 2 illustre l'arrêt de couleur spécifié pour commencer à 65 pour cent du chemin le long du gradient. Pour ce faire, vous ajoutez la valeur en pourcentage après la valeur de la couleur séparées par un espace, sans virgule.
Le troisième exemple montre aussi comme pour la valeurs en pourcentage, mais avec une unités de longueur dans l'arrêt de couleur. La deuxième couleur commence à 20px après le premier.
Enfin, le quatrième exemple a cinq étapes de couleur, alternant le noir et blanc avec une distribution uniforme des couleurs comme dans le premier exemple.

Ancienne syntaxe de linear-gradient

Vous trouverez sans doute (si ce n’est déjà fait) une syntaxe comme suit :
background:linear-gradient(right, #000, #FFF); ou
background:linear-gradient(right top, #000, #FFF);
Cette syntaxe n’est plus standardisée et ne sera plus prise en charge par les navigateurs (si ce n’est déjà fait au moment où vous lisez ceci).
 

Comment créer des dégradés radiaux avec radial-gradient

Un dégradé radial est la transition progressive entre couleurs, rayonnant d'un point central dans toutes les directions.
Un dégradé radial simple est une transition diplôme entre deux couleurs dans une forme circulaire ou elliptique.

Syntaxe des dégradés radiaux

Le dégradé radial est réalisé avec la valeur radial-gradient.
La syntaxe pour un dégradé radial, telle qu'elle doit être appliquée à la propriété background se présente comme suit :
background : radial-gradient(forme at x y, couleur1, ..., couleurN)
x et|ou y indique l’origine de départ  du dégradé
couleur les couleurs utilisées pour le dégradé
forme définis la  forme du dégradé circle ou ellipse

Exemple de dégradé radial simple

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>CSS3 les dégradés liniéres</title>
<style> 
div{width:100px;height:100px;
border:1px solid #000;
display:inline-block;
}
div.cercle { background: radial-gradient(circle at center , #FFF, #000); }
div.elipce {background: radial-gradient(ellipse at center, gold, blue);}
</style>
</head>
<body>
<div class="cercle"></div>
<div class="elipce"</div>
</body>
</html>
 

 

Ancienne syntaxe de radial-gradient

background: radial-gradient(center top, couleur1, couleur2);
ou
background: radial-gradient(circle, center, couleur1, couleur2);
 

Appliquer des gradients multiple

Pour appliquer plusieurs gradient à un élément on va profiter de la nouvelle possibilité qu’offre le CSS3 qui permet plusieurs background, parce que les gradients seront appliqués aux backgrounds.

Exemple plusieurs gradients

Voici deux exemples ; le premier utilise des dégradés linéaires et le deuxième des dégradés radiaux :

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>CSS3 colonnes multiples</title>
<style> 
div{width:400px;height:100px;
border-left:0px;
display:inline-block;
}
.linears { background:
linear-gradient(to left, #000, #FFF, transparent),
linear-gradient(to right, #000, #FFF, transparent);
}
.radials { 
background:radial-gradient(circle at 130px, #FFF, #5c1175 18%, transparent 10%),
radial-gradient(circle at 45px, #FFF, #5c1175 12%, transparent 10%); 
}
</style>
</head>
<body>
<div class="linears"></div>
<div class="radials"></div>
</body>
</html>
 

Le premier exemple montre deux dégradés linéaires, l'un de la droite vers la gauche, l'autre de la gauche vers la droite.
La fin se fait sur une couleur de valeur transparent pour pouvoir voir la couche qui est en dessous.
Le deuxième exemple montre deux dégradés radiaux.
Voici le résultat
dégradé radial

Par carabde 10 mars 2014

chapitre précédent sommairechapitre suivant