Fonction linear-gradient
La fonction linear-gradient définit un dégradé
linéaire. Elle est utilisée avec les propriétés qui
définissent une image d'arrière-plan : background,
background-image
ou une image de bordure : border-image,
background-image-source.
Syntaxe
sélecteur {
background: linear-gradient([angle ou direction], couleur1 taille1, couleur2 taille2...);
}
Valeurs
| Valeur | Description |
|---|---|
| direction |
Définit une direction spécifique du dégradé dans toutes les unités pour les angles
ou avec les mots-clés top, left, right, bottom
ou leur combinaison : top left, top right et ainsi de suite.
L'ordre des mots n'a pas d'importance : on peut écrire top left et left top,
il n'y a pas de différence. Le paramètre est optionnel : s'il n'est pas spécifié, le dégradé ira
de haut en bas (comme avec to top). Le mot to est placé avant la direction.
|
| angle | Angle dans toutes les unités pour les angles. Peut être positif ou négatif. Le paramètre est optionnel. Simultanément, on peut spécifier soit un angle, soit une direction (ou rien du tout). |
| couleur1 | Couleur de départ du dégradé dans toutes les unités pour la couleur. |
| couleur2 | Couleur de fin du dégradé dans toutes les unités pour la couleur. |
| taille | Définit l'étendue d'une couleur spécifique du dégradé dans toutes les unités pour la taille. |
Exemple . L'option la plus simple
Syntaxe :
sélecteur {
background: linear-gradient(couleur de départ, couleur de fin);
}
Regardons un exemple :
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Exemple . Ajout d'un angle
Syntaxe :
sélecteur {
background: linear-gradient(angle, couleur de départ, couleur de fin);
}
Regardons un exemple :
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Exemple . Ajout d'une direction
Au lieu d'un angle, on peut ajouter une direction
top, left, right, bottom
ou leur combinaison : top left, top right
Le mot to est placé avant la direction.
Syntaxe :
sélecteur {
background: linear-gradient(direction, couleur de départ, couleur de fin);
}
Regardons un exemple :
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Exemple . Ajout d'une direction
Spécifions une autre direction :
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Exemple . Ajout d'une taille
Syntaxe :
sélecteur {
background: linear-gradient(couleur1 taille1, couleur2 taille2);
}
Dans l'exemple suivant, le comportement sera le suivant :
la couleur rouge pure ira de 0px à
30px, de 30px à 50px
il y aura un dégradé du rouge au bleu, et
de 50px jusqu'à la fin - du bleu pur :
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Exemple . Ajout de plus de 2 couleurs
Syntaxe :
sélecteur {
background: linear-gradient(couleur1 taille1, couleur2 taille2, couleur3 taille3...);
}
Dans l'exemple suivant, le comportement sera le suivant :
la couleur rouge pure ira de 0px à
30px, de 30px à 50px
il y aura un dégradé du rouge au bleu, et
de 50px à 70px - un dégradé du bleu
au vert, et après 70px - du vert pur :
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Exemple . Transitions nettes
Dans l'exemple suivant, le comportement sera le suivant :
la couleur rouge pure ira de 0px à
30px, la couleur bleue pure - de 30px
à 60px, la couleur verte pure - après 60px
(red 0px peut ne pas être écrit) :
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Exemple . Les tailles peuvent également être spécifiées en pourcentages
Dans l'exemple suivant, le comportement sera le suivant :
la couleur rouge pure ira de 0% à
30%, la couleur bleue pure - de 30%
à 60%, la couleur verte pure - après 60%
(red 0% peut ne pas être écrit) :
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Exemple . Combinaison avec background-size
Dans l'exemple suivant, le comportement sera le suivant :
la couleur rouge pure ira de 0px à
30px, la couleur bleue pure - de 30px
à 60px, et tout cela se répétera en morceaux
de 60px (à cause de background-size:
60px;) :
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Voir aussi
-
la fonction
radial-gradient,
qui crée un dégradé radial -
la fonction
repeating-linear-gradient,
qui crée un dégradé linéaire répétitif -
la fonction
repeating-radial-gradient,
qui crée un dégradé radial répétitif
