CSS3 Dégradé (Gradients)

CSS3La fonction de dégradé vous permet de créer un dégradé d'une couleur à l'autre sans utiliser d'images.

En utilisant CSS3Dégradé

CSS3La fonction de dégradé fournit une solution flexible pour générer une transition en douceur entre deux ou plusieurs couleurs. Pour obtenir cet effet, nous devons utiliser des images. En utilisant CSS3Les dégradés peuvent réduire le temps de téléchargement et économiser l'utilisation de la bande passante. Les éléments de dégradé peuvent être agrandis ou réduits en proportion à tout niveau sans réduire la qualité, et le rendu est plus rapide car il est généré par le navigateur.

Il existe deux styles de dégradé :Linéaire (linear) etRadial(radial).

Créer CSS3 Dégradé linéaire (linear)

Pour créer un dégradé linéaire, vous devez au moins définir deux étiquettes de couleur. Cependant, pour créer des effets de dégradé plus complexes, vous pouvez définir plus d'étiquettes de couleur. Les étiquettes de couleur sont les couleurs que vous souhaitez présenter avec une transition en douceur. Vous pouvez également définir le point de départ et la direction (ou l'angle) de l'application du dégradé. La syntaxe de base pour créer un dégradé linéaire en utilisant un mot-clé peut être donnée ainsi :

linear-gradient(angle, couleur-stop1, color-stop2, ...)

Dégradé linéaire-De haut en bas

L'exemple suivant créera un dégradé linéaire allant de haut en bas. C'est la valeur par défaut.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(rouge, jaune);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(rouge, jaune);
　　　　
　　　　background: linear-gradient(rouge, jaune);
}

Dégradé linéaire-De gauche à droite

L'exemple suivant créera un dégradé linéaire allant de gauche à droite.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(gauche, rouge, jaune);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(gauche, rouge, jaune);
　　　　
　　　　background: linear-gradient(vers la droite, rouge, jaune);
}

Dégradé linéaire-Diagonale

Vous pouvez également créer des dégradés dans la direction diagonale. L'exemple suivant créera un dégradé linéaire allant de la bas gauche de la boîte de l'élément à son haut droit.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(bas gauche, rouge, jaune);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(bas gauche, rouge, jaune);
　　　　
　　　　background: linear-gradient(vers le haut vers la droite, rouge, jaune);
}

Définir la direction du dégradé linéaire en utilisant un angle

Si vous souhaitez spécifier davantage la direction du dégradé, vous pouvez définir un angle plutôt qu'un mot-clé prédéfini. Cet angle 0deg crée un dégradé du bas vers le haut, un angle positif signifie rotation dans le sens horaire, ce qui signifie que cet angle90deg crée un dégradé de gauche à droite. La syntaxe de base pour créer un dégradé linéaire en utilisant un angle peut être donnée ainsi :

linear-gradient(angle, couleur-stop1, color-stop2, ...)

L'exemple suivant utilisera un angle de gauche à droite pour créer un dégradé linéaire.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(0deg, rouge, jaune);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(0deg, rouge, jaune);
　　　　
　　　　background: linear-gradient(90deg, rouge, jaune);
}

Créer un dégradé linéaire en utilisant plusieurs étiquettes de couleur

Vous pouvez également créer des dégradés pour deux couleurs ou plus. L'exemple suivant vous montrera comment utiliser plusieurs étiquettes de couleur pour créer un dégradé linéaire. Toutes les couleurs sont réparties uniformément.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow, lime);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(red, yellow, lime);
　　　　
　　　　background: linear-gradient(red, yellow, lime);
}

Définir les étiquettes de position

Les étiquettes de couleur sont des points le long de la ligne de dégradé, où la couleur spécifiée est présente. La position de l'étiquette de couleur peut être spécifiée en pourcentage ou en longueur absolue. Vous pouvez spécifier un nombre quelconque d'étiquettes de couleur selon vos besoins pour obtenir l'effet désiré.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(red, yellow　30%, lime　60%);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(red, yellow　30%, lime　60%);
　　　　
　　　　background: linear-gradient(red, yellow　30%, lime　60%);
}

dégradé linéaire répété

Vous pouvez utiliser repeating-linear-La fonction gradient() répète la dégradé linéaire.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: white;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-linear-gradient(black, white　10,　lime　20%);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-repeating-linear-gradient(black, white　10,　lime　20%);
　　　　
　　　　background: repeating-linear-gradient(black, white　10,　lime　20%);
}

Créer CSS3dégradé radial(radial)

Dans la dégradé radiale, la couleur apparaît à partir d'un point unique et se répand uniformément sous forme circulaire ou elliptique, contrairement à la dégradé linéaire qui change d'une couleur à l'autre dans une seule direction. La syntaxe de base pour créer une dégradé radiale peut être donnée de la manière suivante :

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

radial-Les paramètres de la fonction gradient() ont les significations suivantes :

• position —Définir le point de départ de la dégradé, qui peut être spécifié en unité (px, em ou pourcentage) ou en mot-clé (left, bottom, etc.).

• shape —Définir la forme finale de la forme de la dégradé. Elle peut être circulaire ou elliptique.

• size —Définir la taille finale de la forme de la dégradé. La valeur par défaut est farthest-side.

Les exemples suivants afficheront la dégradé radiale créée avec des étiquettes de couleur espacées uniformément.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(red, yellow, lime);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(red, yellow, lime);
　　　　
　　　　background: radial-gradient(red, yellow, lime);
}

Définir la forme de la dégradé radiale

radial-Le paramètre shape de la fonction gradient() est utilisé pour définir la forme finale de la dégradé radiale. Il peut prendre les valeurs circle ou ellipse. Voici un exemple :

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(circle, red, yellow, lime);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(circle, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle, red, yellow, lime);
}

Définir la taille de la dégradé radiale

radial-le paramètre size de la fonction gradient() est utilisé pour définir la taille finale de la dégradé. La taille peut être définie en unité ou en mot-clé : closest-side, farthest-side, closest-corner, farthest-corner.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: red;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(left bottom, circle farthest-side, rouge, jaune, lime);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(left bottom, circle farthest-side, rouge, jaune, lime);
　　　　
　　　　background: radial-gradient(circle farthest-side à gauche en bas, rouge, jaune, lime);
}

Dégradé radiale répété

Vous pouvez également utiliser cette repeating-radial-Fonction gradient() répétant la dégradé radiale.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: white;
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-radial-gradient(black, white　10,　lime　20%);
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-repeating-radial-gradient(black, white　10,　lime　20%);
　　　　
　　　　background: repeating-radial-gradient(black, white　10,　lime　20%);
}

CSS3Transparence et dégradés

CSS3Les dégradés supportent égalementTransparenceEmpilementArrière-plans multiplesLorsque vous pouvez l'utiliser pour créer un effet d'effacement progressif de l'image de fond.

.gradient {
　　　　/*　Remplacement pour les navigateurs qui ne39;t support gradients　*/
　　　　background: url("images/sky.jpg");
　　　　/*　Pour Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(left,　rgba(255,255,255,0),　rgba(255,255,255,1))，url("images/sky.jpg");
　　　　/*　Pour Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(left,　rgba(255,255,255,0),　rgba(255,255,255,1))，url("images/sky.jpg");
　　　　
　　　　background: linear-gradient(to right,　rgba(255,255,255,0),　rgba(255,255,255,1))，url("images/sky.jpg");
}