Dégradés

Internet Explorer 10 et les applications du Windows Store qui utilisent JavaScript prennent en charge les dégradés CSS3 dans les propriétés qui acceptent les images, telles que la propriété background-image (plus la valeur image de la propriété raccourcie background), la propriété list-style-image et le contenu généré. Les dégradés se comportent tel que le spécifie la section relative aux dégradés du module sur les valeurs d’image et le contenu remplacé CSS3, qui, à l’heure où nous écrivons, n’est qu’au stade « Candidate Recommendation ».

Les dégradés sont des images avec effet de transition adoucie d’une couleur à l’autre. Internet Explorer 10 prend en charge les dégradés linéaires, circulaires et elliptiques CSS3, chacun étant spécifié par une ligne de dégradé et au moins deux points d’arrêt. Tous les points d’arrêt ont leur propre couleur, et Windows Internet Explorer remplit la zone entre les ensembles de points avec une transition de couleur continue de l’un à l’autre.

Dégradés linaires

Dans un dégradé linéaire, la transition des couleurs s’effectue graduellement le long d’une ligne. La création de dégradés linéaires s’effectue en spécifiant d’abord une ligne de dégradé pour le dégradé à suivre, puis au moins deux points d’arrêt de couleur séparés par une virgule. La syntaxe de base d’un dégradé linéaire est la suivante :

linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FonctionDescription

linear-gradient()

Spécifie un dégradé linéaire en indiquant une ligne de dégradé et au moins deux points d’arrêt de couleur et dégradés.

Les valeurs possibles de cette propriété sont les suivantes :

<angle>

Facultatif. L’angle que la ligne de dégradé doit suivre, exprimé sous forme de nombre suivi d’un indicateur d’unité d’angle (par exemple, "deg").

"0deg" pointe vers le haut et les angles positifs augmentent dans le sens des aiguilles d’une montre. Par conséquent, "90deg" pointe vers la droite, "180deg" pointe vers le bas, etc.

Si aucun angle n’est fourni, la ligne de dégradé commence dans l’angle ou le côté opposé à l’angle ou au côté spécifié par <side-or-corner>.

<side-or-corner>

Valeur facultative qui spécifie l’angle ou le côté où se termine le dégradé. Cette valeur commence par "to", suivi d’un ou deux des mots-clés suivants. La spécification d’un seul mot-clé s’applique à un côté de fin, et la spécification de deux mots-clés s’applique à un angle de fin.

  • Les valeurs suivantes peuvent uniquement être utilisées comme première valeur :
    • left  Indique que le dégradé se termine à gauche.
    • right  Indique que le dégradé se termine à droite.
  • Les valeurs suivantes peuvent uniquement être utilisées comme seconde valeur :
    • top  Indique que le dégradé se termine en haut.
    • bottom  Indique que le dégradé se termine en bas.
  • Si vous ne spécifiez aucun mot-clé ou aucun angle, cela équivaut à spécifier "to bottom".
<color-stop>

Au moins deux arrêts de couleur sont nécessaires. Chaque arrêt de couleur comporte un ou deux composants—un composant de couleur et un composant de position facultatif.

Le premier composant définit le composant de couleur d’un point d’arrêt du dégradé. Chaque point d’arrêt a sa propre couleur et la zone située entre chaque point est remplie avec une transition de couleur continue d’un point à l’autre. Il peut s’agir de n’importe quelle valeur de couleur prise en charge.

Chaque point d’arrêt peut avoir un pourcentage facultatif ou une valeur de longueur prise en charge qui indique où placer l’arrêt de couleur le long de la ligne de dégradé. "0%" (ou "0px", "0em", etc.) indique le point (ou le côté) de début ; "100%" indique le point (ou le côté) de fin.

 

Le dégradé linéaire suivant (utilisé comme argument de la propriété background-image) comporte trois arrêts de couleur :

  • Le premier arrêt de couleur se trouve dans l’angle supérieur droit et définit une ligne de dégradé qui s’étend jusqu’à l’angle inférieur gauche. Le premier arrêt est une ombre jaune.
  • Le second arrêt de couleur se trouve à mi-chemin le long de la ligne de dégradé et correspond à une ombre verte.
  • Le dernier arrêt de couleur se trouve à 80 % de la ligne de dégradé et correspond à une ombre bleue. De cet arrêt jusqu’à la fin de la ligne de dégradé (entre 80 % et 100 %), la couleur demeure cette ombre bleue.

La ligne de dégradé commence dans l’angle supérieur droit du rectangle et se termine dans l’angle inférieur gauche. L’angle réel dépend des dimensions de l’élément rempli par le dégradé.

Exemple de dégradé linéaire commençant dans l’angle supérieur droit

background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);


Pour répliquer ce dégradé en utilisant un angle avec la même boîte de dimensionnement (250 px×150 px), spécifiez la déclaration suivante :


background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%);

Bien entendu, si la taille de la zone de remplissage change, l’apparence de ces deux dégradés sera différente. Tenez-en compte quand vous décidez de la façon de spécifier vos dégradés. Le premier dégradé défini (avec la valeur "to bottom left") est illustré ici dans une boîte de 450 px par 150 px.

Image d’un dégradé linéaire dans un rectangle plus large que le rectangle précédent

Le deuxième dégradé défini (avec la valeur "210deg") est illustré ici dans la même boîte de dimensionnement.

Image d’un autre dégradé dans un large rectangle affichant plus de jaune

Dégradés radiaux

Contrairement aux dégradés linéaires, qui progressent d’un bout de la ligne à l’autre, les dégradés radiaux émergent d’un seul point, et s’étendent graduellement vers l’extérieur en formant un cercle ou une ellipse. Pour spécifier un dégradé radial, définissez d’abord un point central, puis la taille et la forme (pour une ellipse) du cercle ou de l’ellipse final—ou 100 %—, et enfin les arrêts de couleur, le tout séparés par des virgules. La syntaxe de base d’un dégradé radial est la suivante :

radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FonctionDescription

radial-gradient()

Spécifie un dégradé radial en définissant d’abord un point central, puis la taille et la forme (pour une ellipse) du cercle ou de l’ellipse final—ou 100 %— et enfin les arrêts de couleur, le tout séparés par des virgules.

Les valeurs possibles de cette propriété sont les suivantes :

<shape>

Valeur facultative qui indique la forme finale du dégradé. Quand cette valeur est omise, la forme finale est un cercle si le paramètre size n’indique qu’une seule longueur, et une ellipse sinon.

  • ellipse  Indique que le dégradé a la forme d’une ellipse.
  • circle  Indique que le dégradé a la forme d’un cercle.
<size>

Valeur facultative qui spécifie la taille de la forme finale du dégradé. Si cette valeur est omise, elle prend la valeur par défaut farthest-corner.

  • <length(s)>  

    Une ou deux valeurs de longueur séparées par des espaces ou deux pourcentages.

    Si une seule valeur de longueur est spécifiée, elle indique le rayon du cercle.

    Si deux valeurs (longueur ou pourcentage) sont spécifiées, la première valeur représente le rayon horizontal et la seconde, le rayon vertical.

    Les valeurs de pourcentage sont définies en fonction de la dimension correspondante de la zone de dégradé. Les pourcentages ne peuvent être utilisés que pour spécifier la taille d’un dégradé elliptique (et non d’un dégradé circulaire).

    Les valeurs négatives ne sont pas valides.

  • closest-side  Pour les dégradés circulaires, cette valeur indique que la forme finale du dégradé est un cercle dont la taille est définie de manière à ce que le dégradé corresponde exactement au côté de la boîte le plus proche de son centre. Pour les dégradés elliptiques, la forme du dégradé est une ellipse dont la taille est définie de manière à ce que le dégradé corresponde exactement aux côtés verticaux et horizontaux de la boîte les plus proches de son centre.
  • closest-corner  Définit la taille de la forme du dégradé de façon à ce que le dégradé corresponde exactement à l’angle de la boîte le plus proche de son centre. Pour les dégradés elliptiques, la forme du dégradé a le même rapport largeur-hauteur que si le mot clé closest-side était spécifié.
  • farthest-side  Similaire à closest-side, sauf que la taille de la forme du dégradé est définie de manière à correspondre au côté de la boîte qui est le plus éloigné de son centre (pour les dégradés circulaires) ou les côtés verticaux et horizontaux les plus éloignés de son centre (pour les dégradés elliptiques).
  • farthest-corner  Définit la taille de la forme du dégradé de façon à ce que le dégradé corresponde exactement à l’angle de la boîte le plus éloigné de son centre. Pour les dégradés elliptiques, la forme du dégradé a le même rapport largeur-hauteur que si farthest-side était spécifié.
<position>

Valeur facultative qui indique le centre du dégradé. Cette valeur peut prendre les mêmes valeurs que la propriété background-position. Si cette valeur est omise, elle prend la valeur par défaut center.

<color-stop>

Au moins deux arrêts de couleur sont nécessaires. Chaque arrêt de couleur comporte un ou deux composants—un composant de couleur et un composant de position facultatif.

Le premier composant définit le composant de couleur d’un point d’arrêt du dégradé. Chaque point d’arrêt a sa propre couleur et la zone entre chaque point est remplie avec une transition de couleur continue d’un point à l’autre. Cette valeur peut être n’importe quelle valeur de couleur prise en charge.

Le second composant est un pourcentage ou une valeur décimale facultative qui indique où placer l’arrêt de couleur le long du rayon de dégradé (similaire à une ligne de dégradé dans un linear-gradient, mais du centre vers l’extérieur). "0%" indique le début du rayon de dégradé et "100%" indique le point d’intersection entre le rayon de dégradé et la forme finale. Par exemple, la valeur "20%" indique que l’arrêt de couleur doit être placé à un point se trouvant à 20 % de la longueur de la ligne de dégradé, en commençant au début de la ligne. Les valeurs peuvent être négatives, ce qui indique que la couleur spécifiée pour cette valeur est une couleur intermédiaire par rapport à la couleur suivante au centre du dégradé. La couleur visible au centre se situera donc entre la couleur spécifiée et la couleur suivante. Les valeurs peuvent être supérieures à 100 %, ce qui indique une distance d’autant supérieure par rapport au centre du dégradé.

 

Différentes syntaxes de dégradé radial peuvent souvent être utilisées pour produire les mêmes résultats. Par exemple, les trois déclarations suivantes, quand elles sont appliquées à un élément de 250×150 pixels div, produisent l’image ci-après.

Dégradé elliptique simple appliqué à un rectangle de 250 par 150 pixels


background-image: radial-gradient(yellow, blue);

background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);

background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);

L’exemple suivant est similaire au précédent, mais un dégradé circulaire a été spécifié.

Dégradé circulaire simple appliqué à un rectangle de 250 par 150 pixels

background-image: radial-gradient(circle, yellow, blue);

Trois couleurs sont spécifiées dans l’exemple suivant. Les deux déclarations produisent cette image.

Dégradé elliptique avec trois arrêts de couleur spécifiés

background-image: radial-gradient(#FFF133, #16D611, #00A3EF);

background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);

Bien sûr, vous pouvez également faire commencer le dégradé radial à des endroits autres que le centre de la zone de dégradé. Utilisez les mots-clés closest-side ou farthest-side pour dimensionner le dégradé afin que la forme finale rencontre le côté le plus proche ou le plus éloigné, respectivement, de la zone de dégradé.

Dégradé radial avec trois couleurs, commençant dans l’angle inférieur gauche

background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);

Les exemples suivants définissent le centre du dégradé à 40 pixels du côté gauche de la zone de dégradé et à 50 pixels du côté supérieur de la zone de dégradé. Le premier exemple utilise closest-side, la forme finale du dégradé est donc définie par les bords les plus proches de la zone de dégradé—à savoir, le côté supérieur et le côté gauche.

Petit dégradé elliptique composé de trois couleurs contenu dans l’angle supérieur gauche d’une zone de dégradé

background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

Le deuxième exemple utilise farthest-side, la forme finale du dégradé est donc définie par les bords les plus éloignés de la zone de dégradé—à savoir, le côté droit et le côté inférieur.

Grand dégradé elliptique composé de trois couleurs et se terminant sur les bords droit et inférieur d’une zone de dégradé

background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

Si vous utilisez closest-side ou farthest-side avec des dégradés circulaires, la taille est déterminée par le côté le plus proche de la zone de dégradé. Dans l’exemple de closest-side suivant, il s’agit du côté gauche.

Petit dégradé circulaire composé de trois couleurs contenu dans l’angle supérieur gauche d’une zone de dégradé

background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Dans l’exemple de farthest-side suivant, la taille du dégradé circulaire est déterminée par le côté droit de la zone de dégradé.

Grand dégradé circulaire composé de trois couleurs et se terminant sur le côté droit de la zone de dégradé

background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Dégradés répétitifs

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent également en charge les dégradés linéaires et radiaux répétitifs : La syntaxe de chacune des propriétés du dégradé répétitif est identique à son homologue non répétitif.

La syntaxe de base d’un dégradé linéaire répétitif est la suivante :

repeating-linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FonctionDescription

repeating-linear-gradient()

Spécifie un dégradé linéaire répétitif en indiquant une ligne de dégradé et au moins deux points d’arrêt de couleur et dégradés

Les valeurs possibles de cette propriété sont les suivantes 

<angle>

Facultatif. L’angle que la ligne de dégradé doit suivre, exprimé sous forme de nombre suivi d’un indicateur d’unité d’angle (par exemple, "deg").

"0deg" pointe vers le haut et les angles positifs augmentent dans le sens des aiguilles d’une montre. Par conséquent, "90deg" pointe vers la droite, "180deg" pointe vers le bas, etc.

Si aucun angle n’est fourni, la ligne de dégradé commence dans l’angle ou le côté opposé à l’angle ou au côté spécifié par <side-or-corner>.

<side-or-corner>

Valeur facultative qui spécifie l’angle ou le côté où se termine le dégradé. Cette valeur commence par "to", suivi d’un ou deux des mots-clés suivants. La spécification d’un seul mot-clé s’applique à un côté de fin, et la spécification de deux mots-clés s’applique à un angle de fin.

  • Les valeurs suivantes peuvent uniquement être utilisées comme première valeur :
    • left  Indique que le dégradé se termine à gauche.
    • right  Indique que le dégradé se termine à droite.
  • Les valeurs suivantes peuvent uniquement être utilisées comme seconde valeur :
    • top  Indique que le dégradé se termine en haut.
    • bottom  Indique que le dégradé se termine en bas.
  • Si vous ne spécifiez aucun mot-clé ou aucun angle, cela équivaut à spécifier "to bottom".
<color-stop>

Au moins deux arrêts de couleur sont nécessaires. Chaque arrêt de couleur comporte un ou deux composants—un composant de couleur et un composant de position facultatif.

Le premier composant définit le composant de couleur d’un point d’arrêt du dégradé. Chaque point d’arrêt a sa propre couleur, et la zone entre chaque point est remplie avec une transition de couleur continue d’un point à l’autre. Cette valeur peut être n’importe quelle valeur prise en charge.

Chaque point d’arrêt peut avoir un pourcentage facultatif ou une valeur de longueur prise en charge qui indique où placer le point d’arrêt de couleur le long du dégradé. "0%" (ou "0px", "0em", etc.) indique le point (ou le côté) de début ; "100%" indique le point (ou le côté) de fin.

 

La syntaxe de la fonction repeating-linear-gradient est identique à celle de la fonction linear-gradient.

Une fois le dernier arrêt de couleur atteint, le dégradé recommence au premier arrêt de couleur et se répète. Nous vous conseillons de spécifier des couleurs identiques pour le premier et le dernier arrêt afin d’éviter les changements de couleurs brutaux entre chaque groupe répétitif.

L’exemple suivant illustre un dégradé linéaire répétitif. Il crée une transition entre deux couleurs—le bleu et le jaune.

Image d’un dégradé linéaire répétitif composé de deux couleurs

background-image: repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px);

La syntaxe de base d’un dégradé radial répétitif est la suivante :

repeating-radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FonctionDescription

repeating-radial-gradient()

Spécifie un dégradé radial répétitif en définissant d’abord un point central, puis la taille et la forme (pour une ellipse) du cercle ou de l’ellipse final—ou 100 %— et enfin les arrêts de couleur, le tout séparés par des virgules.

Les valeurs possibles de cette propriété sont les suivantes :

<shape>

Valeur facultative qui indique la forme finale du dégradé. Quand cette valeur est omise, la forme finale est un cercle si le paramètre size n’indique qu’une seule longueur, et une ellipse sinon.

  • ellipse  Indique que le dégradé a la forme d’une ellipse.
  • circle  Indique que le dégradé a la forme d’un cercle.
<size>

Valeur facultative qui spécifie la taille de la forme finale du dégradé. Il peut s’agir de valeurs (ou pourcentages) de longueur délimités par des espaces ou l’un des mots-clés suivants. Si cette valeur est omise, elle prend la valeur par défaut farthest-corner.

  • <length(s)>  

    Une ou deux valeurs de longueur séparées par des espaces ou deux pourcentages.

    Si une seule valeur de longueur est spécifiée, elle indique le rayon du cercle.

    Si deux valeurs (longueur ou pourcentage) sont spécifiées, la première valeur représente le rayon horizontal et la seconde, le rayon vertical.

    Les valeurs de pourcentage sont définies en fonction de la dimension correspondante de la zone de dégradé. Les pourcentages ne peuvent être utilisés que pour spécifier la taille d’un dégradé elliptique (et non d’un dégradé circulaire).

    Les valeurs négatives ne sont pas valides.

  • closest-side  Pour les dégradés circulaires, cette valeur indique que la forme finale est un cercle dont la taille est définie de manière à ce que le dégradé corresponde exactement au côté de la boîte le plus proche de son centre. Pour les dégradés elliptiques, la forme du dégradé est une ellipse dont la taille est définie de manière à ce que le dégradé corresponde exactement aux côtés verticaux et horizontaux de la boîte les plus proches de son centre.
  • closest-corner  Définit la taille de la forme du dégradé de façon à ce que le dégradé corresponde exactement à l’angle de la boîte le plus proche de son centre. Pour les dégradés elliptiques, la forme du dégradé a le même rapport largeur-hauteur que si le mot clé closest-side était spécifié.
  • farthest-side  Similaire à closest-side, sauf que la taille de la forme du dégradé est définie de manière à correspondre au côté de la boîte qui est le plus éloigné de son centre (pour les dégradés circulaires) ou les côtés verticaux et horizontaux les plus éloignés de son centre (pour les dégradés elliptiques).
  • farthest-corner  Définit la taille de la forme du dégradé de façon à ce que le dégradé corresponde exactement à l’angle de la boîte le plus éloigné de son centre. Pour les dégradés elliptiques, la forme du dégradé a le même rapport largeur-hauteur que si farthest-side était spécifié.
<position>

Valeur facultative qui indique le centre du dégradé. Cette valeur peut prendre les mêmes valeurs que la propriété background-position. Si cette valeur est omise, elle prend la valeur par défaut center.

<color-stop>

Au moins deux arrêts de couleur sont nécessaires. Chaque arrêt de couleur comporte un ou deux composants—un composant de couleur et un composant de position facultatif.

Le premier composant définit le composant de couleur d’un point d’arrêt du dégradé. Chaque point d’arrêt a sa propre couleur et la zone entre chaque point est remplie avec une transition de couleur continue d’un point à l’autre. Cette valeur peut être n’importe quelle valeur de couleur prise en charge.

Le second composant est un pourcentage ou une valeur décimale facultative qui indique où placer l’arrêt de couleur le long du rayon de dégradé (similaire à une ligne de dégradé dans un linear-gradient, mais du centre vers l’extérieur). "0%" indique le début du rayon de dégradé et "100%" indique le point d’intersection entre le rayon de dégradé et la forme finale. Par exemple, la valeur "20%" indique que l’arrêt de couleur doit être placé à un point se trouvant à 20 % de la longueur de la ligne de dégradé, en commençant au début de la ligne. Les valeurs peuvent être négatives, ce qui indique que la couleur spécifiée pour cette valeur est une couleur intermédiaire par rapport à la couleur suivante au centre du dégradé. La couleur visible au centre se situera donc entre la couleur spécifiée et la couleur suivante. Les valeurs peuvent être supérieures à 100 %, ce qui indique une distance d’autant supérieure par rapport au centre du dégradé.

 

La syntaxe de la fonction repeating-radial-gradient est identique à celle de la fonction radial-gradient.

Une fois le dernier arrêt de couleur atteint, le dégradé recommence au premier arrêt de couleur et se répète. Nous vous conseillons de spécifier des couleurs identiques pour le premier et le dernier arrêt afin d’éviter les changements de couleurs brutaux entre chaque groupe répétitif.

La déclaration suivante crée un dégradé circulaire répétitif.


background-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Image d’un dégradé circulaire répétitif composé de trois couleurs

La déclaration suivante crée un dégradé elliptique répétitif.


background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);


Image d’un dégradé elliptique répétitif composé de trois couleurs

Informations de référence sur les API

Gradients

Exemples et didacticiels

Exemple de dégradés CSS

Démonstrations du site Internet Explorer Test Drive

CSS Gradient Background Maker
Irish Spring

Billets IEBlog

Dégradés CSS3 non préfixés dans IE10
Un Web plus stable dans IE10 Release Preview
Dégradés CSS3 dans l’aperçu 1 de la plateforme IE10

Spécification

CSS Image Values and Replaced Content Module Level 3: Section 4

 

 

Afficher:
© 2014 Microsoft