CSS3 Gradient
gradients CSS3 (gradients) vous permet d'afficher une transition en douceur entre deux ou plusieurs couleurs déterminées.
Auparavant, vous devez utiliser une image pour obtenir ces effets. Cependant, en utilisant des gradients de CSS3 (gradients), vous pouvez réduire les événements de téléchargement et l'utilisation de la large bande. En outre, des éléments d'effets de transition semblent mieux quand vous zoomez, parce que le gradient (gradient) est généré par le navigateur.
CSS3 définit deux types de gradients (gradients):
- gradient linéaire (Dégradés linéaires) - Haut / Bas / Gauche / Droite / direction diagonale
- gradient radial (Radial Dégradés) - définie par leur centre
support du navigateur
Numéros dans l'attribut table spécifie le plein appui de la première version du navigateur.
Derrière avec -webkit -, - moz- ou -o- spécifie le nombre requis avec l'attribut de préfixe pour soutenir la première version.
| 属性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
gradient linéaire CSS3
Pour créer un dégradé linéaire, vous devez définir au moins deux noeuds de couleurs. noeud Color qui est la couleur que vous voulez montrer une transition en douceur. Dans le même temps, vous pouvez également définir un point de départ et une direction (ou un angle).
Exemples de gradient linéaire:
grammaire
gradient linéaire - de haut en bas (par défaut)
L'exemple suivant illustre un gradient linéaire à partir du haut. Le point de départ est rouge, et la transition lentement vers le bleu:
Exemples
gradient linéaire de haut en bas:
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
Essayez »
gradient linéaire - de gauche à droite
L'exemple suivant illustre un gradient linéaire à partir de la gauche. Le point de départ est rouge, et la transition lentement vers le bleu:
Exemples
gradient linéaire de gauche à droite:
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
Essayez »
gradient linéaire - diagonal
Vous pouvez faire un dégradé en diagonale en spécifiant la position de départ horizontale et verticale.
L'exemple suivant montre à partir du coin supérieur gauche (en bas à droite) de gradient linéaire. Le point de départ est rouge, et la transition lentement vers le bleu:
Exemples
De haut à gauche vers le coin inférieur droit d'un gradient linéaire:
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
Essayez »
Utiliser angle
Si vous ne voulez plus de contrôle sur la direction du gradient, vous pouvez définir un point de vue, plutôt que d'une direction prédéfinie (en bas, en haut, à droite, à gauche, en bas à droite, et ainsi de suite).
grammaire
Angle se réfère à l'angle entre l'horizontale et la ligne de gradient calculé dans le sens antihoraire. En d'autres termes, 0deg va créer un gradient de bas en haut, 90deg crée un gradient de gauche à droite.
Toutefois, notez que de nombreux navigateurs (Chrome, Safari, fiefox, etc.) en utilisant l'ancienne norme, à savoir 0deg va créer un gradient de gauche à droite, 90deg va créer un gradient de bas en haut. Formule de conversion 90 - x = y où x est l'angle standard, y est un angle non-standard.
L'exemple suivant montre comment utiliser l'angle de gradient linéaire:
Exemples
gradient linéaire avec un angle spécifique:
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}
Essayez »
Utilisation de plusieurs nœuds de couleur
L'exemple suivant montre comment définir une pluralité de noeuds de couleur:
Exemples
gradient linéaire de haut en bas avec une pluralité de noeuds de couleur:
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */
}
Essayez »
L'exemple suivant montre comment créer un arc en ciel de couleurs et de texte avec un dégradé linéaire:
Exemples
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Essayez »
Transparence (Transparency)
gradients CSS3 soutient également la transparence (transparence), il peut être utilisé pour créer l'effet de fondus d'affaiblissement.
Pour ajouter de la transparence, nous utilisons la fonction rgba () pour définir la couleur du nœud. rgba () fonctionner le dernier paramètre est une valeur de 0 à 1, qui définit la transparence de la couleur: 0 est totalement transparent, 1 est complètement opaque.
L'exemple suivant illustre un gradient linéaire à partir de la gauche. Le point de départ est complètement transparent, et la transition lentement au rouge complètement opaque:
Exemples
gradient linéaire de gauche à droite, avec la transparence:
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)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
Essayez »
gradient linéaire Duplicate
fonction répétition linéaire à gradient () est utilisé pour répéter un gradient linéaire:
Exemples
Un gradient linéaire double:
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Essayez »
CSS3 dégradé radial
gradient radial est défini par son centre.
Pour créer un dégradé radial, vous devez également définir au moins deux noeuds de couleurs. noeud Color qui est la couleur que vous voulez montrer une transition en douceur. Dans le même temps, vous pouvez également spécifier le centre de la gradation, la forme (prototype ou ovale), la taille. Par défaut, celles du centre est Center (montré dans le centre), la forme de la gradation est Ellipse (ellipse représentée), la taille du gradient est le plus éloigné coin (représenté au coin le plus éloigné).
Exemples de dégradé radial:
grammaire
Dégradé radial - Couleur nœuds uniformément répartie (par défaut)
Exemples
noeud de couleur de dégradé radial uniformément réparti:
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
Essayez »
gradient Radial - la couleur inégale noeuds distribués
Exemples
noeud de couleur de dégradé radial inégalement répartie:
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
Essayez »
Réglage forme
paramètre de forme définit la forme. Il peut être un cercle ou une ellipse valeur. En quoi, cercle représentant le cercle, ellipse indique ovale. La valeur par défaut est ellipse.
Exemples
La forme d'un dégradé circulaire radial:
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
Essayez »
Utilisez des mots-clés dans différentes tailles
paramètre de taille définit la taille du gradient. Il peut être les quatre valeurs suivantes:
- le plus proche du côté
- la plus éloignée du côté
- le plus proche coin
- le plus éloigné coin
Exemples
gradient radial avec différentes tailles des mots-clés:
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
Essayez »
gradient radial Repeat
fonction répétition-radial gradient () est utilisé pour répéter un dégradé radial:
Exemples
Répéter un dégradé radial:
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Essayez »