gradients CSS3 vous permettent d'afficher des transitions en douceur entre deux ou plusieurs couleurs déterminées.
Plus tôt, vous avez eu à utiliser des images pour ces effets. Cependant, en utilisant des gradients de CSS3, vous pouvez réduire le temps de téléchargement et l'utilisation de la bande passante. En outre, des éléments avec des gradients regarder mieux lors d'un zoom, parce que le gradient est généré par le navigateur.
CSS3 définit deux types de dégradés:
- Dégradés linéaires (descend / haut / gauche / droite / diagonale)
- Dégradés radiaux (définis par leur centre)
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz- ou -o- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 Dégradés linéaires
Pour créer un dégradé linéaire, vous devez définir au moins deux butées de couleur. arrêts de couleurs sont les couleurs que vous souhaitez rendre des transitions en douceur entre. Vous pouvez également définir un point de départ et une direction (ou un angle) ainsi que l'effet de dégradé.
Syntaxe
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Dégradé linéaire - de haut en bas (ce qui est par défaut)
L'exemple suivant montre un gradient linéaire qui commence au sommet. Il commence rouge, la transition vers le jaune:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Essayez - le vous - même » Dégradé linéaire - De gauche à droite
L'exemple suivant illustre un gradient linéaire commençant par la gauche. Il commence rouge, la transition vers le jaune:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Essayez - le vous - même » Dégradé linéaire - Diagonal
Vous pouvez faire un dégradé en diagonale en spécifiant à la fois les positions de départ horizontales et verticales.
L'exemple suivant montre un gradient linéaire qui commence en haut à gauche (et va en bas à droite). Il commence rouge, la transition vers le jaune:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Essayez - le vous - même » Utilisation Angles
Si vous voulez plus de contrôle sur la direction du gradient, vous pouvez définir un angle, au lieu des directions prédéfinies (en bas, en haut, à droite, à gauche, en bas à droite, etc.).
Syntaxe
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
L'angle est spécifié comme un angle entre une ligne horizontale et la ligne de gradient.
L'exemple suivant montre comment utiliser les angles sur les gradients linéaires:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Essayez - le vous - même » Utilisation de plusieurs arrêts de couleurs
L'exemple suivant montre un gradient linéaire (de haut en bas) avec de multiples arrêts de couleurs:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Essayez - le vous - même » L'exemple suivant montre comment créer un gradient linéaire (de gauche à droite) avec la couleur de l'arc en ciel et du texte:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Essayez - le vous - même » Utilisation de la transparence
gradients CSS3 soutiennent également la transparence, qui peut être utilisé pour créer des effets de fondu.
Pour ajouter de la transparence, nous utilisons le rgba() fonction pour définir les étapes de couleur. Le dernier paramètre dans le rgba() fonction peut être une valeur de 0 à 1, et il définit la transparence de la couleur: 0 indique une transparence complète, 1 indique couleur (pas de transparence).
L'exemple suivant illustre un gradient linéaire commençant par la gauche. Il commence en toute transparence, la transition vers le rouge de couleur:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Essayez - le vous - même » Répétition d'un linéaire gradient
La repeating-linear-gradient() fonction est utilisée pour répéter des gradients linéaires:
Exemple
A répéter gradient linéaire:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Essayez - le vous - même » CSS3 Dégradés radial
Un gradient radial est défini par son centre.
Pour créer un dégradé radial, vous devez également définir au moins deux butées de couleur.
Syntaxe
background: radial-gradient( shape size at position, start-color, ..., last-color );Par défaut, la forme est une ellipse, la taille est la plus éloignée coin, et la position est le centre.
Dégradé radial - Couleur Arrête régulièrement espacés (ce qui est par défaut)
L'exemple suivant montre un dégradé radial avec des arrêts de couleur espacés:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Essayez - le vous - même » Radial Gradient - Différemment Spaced Couleur Stops
L'exemple suivant montre un dégradé radial avec des arrêts de couleurs différemment espacées:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Essayez - le vous - même » Set Shape
Le paramètre de forme définit la forme. Il peut prendre le cercle ou une ellipse valeur. La valeur par défaut est ellipse.
L'exemple suivant montre un dégradé radial avec la forme d'un cercle:
Exemple
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Essayez - le vous - même » Utilisation de taille différente Mots-clés
Le paramètre de taille définit la taille du gradient. Il peut prendre quatre valeurs:
- le plus proche du côté
- la plus éloignée du côté
- le plus proche coin
- le plus éloigné coin
Exemple
Un dégradé radial avec différents mots-clés de taille:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Essayez - le vous - même » Répétition d'un radial gradient
La repeating-radial-gradient() fonction est utilisée pour répéter des gradients radiaux:
Exemple
Un dégradé radial répétant:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6» Exercice 7 »