Comment créer des dégradés linéaires dans CSS3

Création de dégradés linéaires entre navigateurs avec CSS3

L'image ci-dessus montre un simple dégradé de gauche à droite de #999 (gris foncé) à #fff (blanc).

Les dégradés linéaires sont les plus faciles à définir et les plus pris en charge dans les navigateurs. Les dégradés linéaires CSS3 sont pris en charge dans Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ et Safari 4+.

Lorsque vous définissez un dégradé, identifiez son type—linéaire ou alors radial-et où le gradient doit s'arrêter et commencer. Ajoutez également les couleurs du dégradé et l'endroit où ces couleurs commencent et se terminent individuellement.

Pour définir des dégradés linéaires à l'aide de CSS3, écrivez:

gradient linéaire (angle ou côté ou coin, arrêt de couleur, arrêt de couleur) 

Vous définissez d'abord le type de dégradé avec le nom.

Ensuite, vous définissez les points de départ et d'arrêt du dégradé de l'une des deux manières suivantes: l'angle de la ligne en degrés de 0 à 359, avec 0 degré pointant vers le haut. Ou avec les fonctions « côté ou coin ». Si vous les omettez, le dégradé s'écoulera du haut vers le bas de l'élément.

Ensuite, vous définissez les arrêts de couleur. Vous définissez les arrêts de couleur avec le code couleur et un pourcentage optionnel. Le pourcentage indique au navigateur où commencer ou se terminer sur la ligne avec cette couleur. La valeur par défaut est de placer les couleurs uniformément le long de la ligne. Vous en apprendrez plus sur les paliers de couleur à la page 3.

Ainsi, pour définir le dégradé ci-dessus avec CSS3, vous écrivez:

gradient linéaire (gauche, #999999 0%, #ffffff 100%); 

Et pour le définir comme arrière-plan d'un DIV, écrivez:

div {
image d'arrière-plan: dégradé linéaire (gauche, #999999 0%, #ffffff 100% ;
} 

Extensions de navigateur pour les dégradés linéaires CSS3

Pour que votre dégradé fonctionne sur plusieurs navigateurs, vous devez utiliser des extensions de navigateur pour la plupart des navigateurs et un filtre pour Internet Explorer 9 et inférieur (en fait 2 filtres). Tous ces éléments prennent les mêmes éléments pour définir votre dégradé (sauf que vous ne pouvez définir que des dégradés de 2 couleurs dans IE).

Filtres et extension Microsoft—Internet Explorer est le plus difficile à prendre en charge, car vous avez besoin de trois lignes différentes pour prendre en charge les différentes versions de navigateur. Pour obtenir le dégradé de gris à blanc ci-dessus, vous écririez:

/* IE 5.5–7 */
filtre: progid: DXImageTransform. Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid: DXImageTransform. Microsoft.gradient (startColorstr='#999999', endColorstr='#ffffff', GradientType=1)" ;
/* IE 10 */
-ms-linear-gradient (gauche, #999999 0%, #ffffff 100%); 

Extension Mozilla-Le -moz- L'extension fonctionne comme la propriété CSS3, juste avec l'extension. Pour obtenir le dégradé ci-dessus pour Firefox, écrivez:

-moz-linear-gradient (gauche, #999999 0%, #ffffff 100%); 

Extension d'opéra-Le -o- L'extension ajoute des dégradés à Opera 11.1+. Pour obtenir le dégradé ci-dessus, écrivez:

-o-linear-gradient (gauche, #999999 0%, #ffffff 100%); 

Extension Webkit-Le -webkit- l'extension fonctionne beaucoup comme la propriété CSS3. Pour définir le dégradé ci-dessus pour Safari 5.1+ ou Chrome 10+, écrivez:

-webkit-linear-gradient (gauche, #999999 0%, #ffffff 100%); 

Il existe également une ancienne version de l'extension Webkit qui fonctionne avec Chrome 2+ et Safari 4+. Vous y définissez le type de dégradé en tant que valeur, plutôt que dans le nom de la propriété. Pour obtenir le dégradé du gris au blanc avec cette extension, écrivez:

-webkit-gradient (linéaire, en haut à gauche, en haut à droite, arrêt de couleur (0%,#999999), arrêt de couleur (100%,#ffffff)); 

Code CSS complet à gradient linéaire CSS3

Pour une prise en charge complète entre navigateurs afin d'obtenir le dégradé de gris à blanc ci-dessus, vous devez d'abord inclure une couleur unie de secours pour les navigateurs qui ne prennent pas en charge les dégradés, et le dernier élément doit être le style CSS3 pour les navigateurs entièrement conforme. Alors, tu écris:

arrière-plan: #999999 ;
arrière-plan: -moz-linear-gradient (gauche, #999999 0%, #ffffff 100%);
arrière-plan: -webkit-gradient (linéaire, en haut à gauche, en haut à droite, arrêt de couleur (0%,#999999), arrêt de couleur (100%,#ffffff));
arrière-plan: -webkit-linear-gradient (gauche, #999999 0%, #ffffff 100%);
arrière-plan: -o-linear-gradient (gauche, #999999 0%, #ffffff 100%);
arrière-plan: -ms-linear-gradient (gauche, #999999 0%, #ffffff 100%);
filtre: progid: DXImageTransform. Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
-ms-filter: progid: DXImageTransform. Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
arrière-plan: dégradé linéaire (gauche, #999999 0%, #ffffff 100%); 

Création de dégradés en diagonale: l'angle du dégradé

Les points de départ et d'arrêt déterminent l'angle du dégradé. La plupart des dégradés linéaires sont de haut en bas ou de gauche à droite. Mais il est possible de construire un dégradé qui se déplace sur une ligne diagonale. L'image sur cette page montre un simple dégradé qui se déplace dans un angle de 45 degrés à travers l'image de droite à gauche.

Angles pour définir la ligne de dégradé

L'angle est une ligne sur un cercle imaginaire au centre de l'élément. Une mesure de 0deg pointe vers le haut, 90 degrés pointe à droite, 180deg pointe vers le bas, et 270 degrés points laissés. Utilisez n'importe quelle mesure d'angle.

Dans un carré, un angle de 45 degrés se déplace du coin supérieur gauche au coin inférieur droit, mais dans un rectangle, les points de départ et de fin sont légèrement en dehors de la forme.

La façon la plus courante de définir un dégradé en diagonale consiste à définir un coin, tel que en haut à droite et le dégradé se déplace de ce coin au coin opposé. Définissez la position de départ avec les mots-clés suivants:

• Haut
• droite
• bas
• la gauche
• centre

Et ils peuvent être combinés pour être plus spécifiques, tels que:

• en haut à droite
• en haut à gauche
• centre supérieur
• en bas à droite
• en bas à gauche
• en bas au centre
• centre droit
• centre gauche

Voici le CSS pour un dégradé similaire à celui illustré, du rouge au blanc se déplaçant du coin supérieur droit vers le coin inférieur gauche:

arrière-plan: ## 901A1C ;
image d'arrière-plan: -moz-linear-gradient (en haut à droite, #901A1C 0%, #FFFFFF 100%);
image d'arrière-plan: -webkit-gradient (linéaire, en haut à droite, en bas à gauche, arrêt de couleur (0, #901A1C), arrêt de couleur (1, #FFFFFF) );
arrière-plan: -webkit-linear-gradient (en haut à droite, #901A1C 0%, #ffffff 100%);
arrière-plan: -o-linear-gradient (en haut à droite, #901A1C 0%, #ffffff 100%);
arrière-plan: -ms-linear-gradient (en haut à droite, #901A1C 0%, #ffffff 100%);
arrière-plan: dégradé linéaire (en haut à droite, #901A1C 0%, #ffffff 100%); 

Vous avez peut-être remarqué qu'il n'y a pas de filtres IE dans cet exemple. En effet, IE n'autorise que deux types de filtres: de haut en bas (par défaut) et de gauche à droite (avec le Type de Dégradé=1 changer).

Arrêts de couleur

Avec les dégradés linéaires CSS3, ajoutez plusieurs couleurs à votre dégradé pour créer des effets encore plus sophistiqués. Pour ajouter ces couleurs, insérez des couleurs supplémentaires à la fin de votre propriété, séparées par des virgules. Vous devez également indiquer où sur la ligne les couleurs doivent commencer ou se terminer.

Les filtres Internet Explorer ne prennent en charge que deux arrêts de couleur. Par conséquent, lorsque vous créez ce dégradé, vous ne devez inclure que les première et deuxième couleurs que vous souhaitez afficher.

Voici le CSS pour le dégradé à trois couleurs ci-dessus:

arrière-plan: #ffffff ;
arrière-plan: -moz-linear-gradient (gauche, #ffffff 0%, #901A1C 51%, #ffffff 100%);
arrière-plan: -webkit-gradient (linéaire, en haut à gauche, en haut à droite, arrêt de couleur (0%,#ffffff), arrêt de couleur (51%,#901A1C), arrêt de couleur (100%,#ffffff));
arrière-plan: -webkit-linear-gradient (gauche, #ffffff 0%, #901A1C 51%, #ffffff 100%);
arrière-plan: -o-linear-gradient (gauche, #ffffff 0%, #901A1C 51%, #ffffff 100%);
arrière-plan: -ms-linear-gradient (gauche, #ffffff 0%, #901A1C 51%, #ffffff 100%);
filtre: progid: DXImageTransform. Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
arrière-plan: dégradé linéaire (gauche, #ffffff 0%, #901A1C 51%, #ffffff 100%); 

Voyez ce dégradé linéaire avec trois arrêts de couleur en action en utilisant uniquement CSS.