Utilisation de dégradés CSS

  • Raccourci de la révision : CSS/Utilisation_de_dégradés_CSS
  • Titre de la révision : Utilisation de dégradés CSS
  • ID de la révision : 338579
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ gecko_minversion_header("1.9.2") }}

Gecko 1.9.2, utilisé par Firefox 3.6, intègre la gestion des dégradés dans la propriété CSS {{ cssxref("background") }}. L'utilisation de dégradés CSS dans un fond permet d'afficher des transitions douces entre deux couleurs ou plus. En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.

Gecko gère deux types de dégradés : linéaire ({{ cssxref("-moz-linear-gradient") }}) et radial ({{ cssxref("-moz-radial-gradient") }}).

Dégradés linéaires

Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué. Vous pouvez également définir des arrêts de couleurs. Ceux-ci représentent les couleurs entre lesquelles Gecko doit rendre des transitions douces, et deux au moins doivent être spécifiés, mais vous pouvez en indiquer plus pour obtenir des effets plus complexes.

Dégradés linéaires simples

Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.

Capture d'écran Démonstration en direct
 
background: -moz-linear-gradient(top, blue, white);

Voici le même dégradé, modifié pour s'effectuer de gauche à droite :

Capture d'écran Démonstration en direct
basic_linear_blueleft.png  
background: -moz-linear-gradient(left, blue, white);

Le dégradé peut se faire en diagonale en spécifiant à la fois des positions de départ horizontale et verticale. Par exemple :

Capture d'écran Démonstration en direct
basic_linear_bluetopleft.png  
background: -moz-linear-gradient(left top, blue, white);

Utilisation d'angles

Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.

Par exemple, voici deux dégradés avec le même point de départ « left center », mais où le second a également un angle de 20 degrés.

linear_gradient_angle.png

La règle CSS pour le dégradé de droite est :

background: -moz-linear-gradient(left 20deg, black, white);

L'angle est spécifié entre une ligne horizontale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg génère un dégradé horizontal vers la droite, tandis que 90deg crée un gradient vertical de bas en haut :

linear_redangles.png

background: -moz-linear-gradient(<angle>, red, white);

Arrêts de couleurs

Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré.

Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.

Exemple : trois arrêts de couleurs

Cet exemple spécifie trois arrêts de couleurs :

Capture d'écran Démonstration en direct
linear_colorstops1.png  
background: -moz-linear-gradient(top, blue, white 80%, orange);

Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.

Exemple : arrêts de couleurs disposés régulièrement

Voici un exemple utilisant une grande variété de couleurs, disposées à intervalles réguliers :

Capture d'écran Démonstration en direct
linear_rainbow.png  
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Remarquez que les arrêts de couleurs sont disposés automatiquement à intervalles réguliers lorsqu'aucun emplacement n'est spécifié.

Transparence et dégradés

Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :

linear_multibg_transparent.png

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous. En superposant les fonds de cette manière, il est possible de créer de effets très intéressants visuellement, comme celui ci-dessus.

Dégradés radiaux

Les dégradés radiaux sont spécifiés à l'aide de la propriété {{ cssxref("-moz-radial-gradient") }}. La syntaxe est semblable à celle des dégradés linéaires, avec en plus la forme du dégradé (un cercle ou une ellipse) ainsi que sa taille.

Arrêts de couleurs

Les arrêts de couleurs sont indiqués de la même façon que pour les dégradés linéaires. La ligne de dégradé s'étend de la position de départ dans toutes les directions.

Exemple : arrêts de couleurs disposés régulièrement

Par défaut, comme avec les dégradés linéaires, les arrêts de couleurs sont disposés régulièrement :

Capture d'écran Démonstration en direct
radial_gradient_even.png  
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));

Exemple :  arrêts de couleurs placés explicitement

Ici, nous spécifierons des emplacement spécifiques pour les arrêts de couleurs :

Capture d'écran Démonstration en direct
radial_gradient_varied.png  
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

Taille

C'est l'un des domaines où les dégradés radiaux diffèrent des dégradés linéaires. Vous pouvez fournir une valeur de taille qui spécifie le point définissant la taille du cercle ou de l'ellipse. Consultez cette description des constantes de taille  pour plus de détails.

Exemple : côté le plus proche pour une ellipse

Cette ellipse utiliser la valeur de taille closest-side, ce qui veut dire que la taille est définie par la distance depuis le point de départ (le centre) jusqu'au côté le plus proche de la boîte qui l'entoure.

Capture d'écran Démonstration en direct
radial_ellipse_size1.png  
background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

Exemple : côté le plus éloigné pour une ellipse

Cet exemple est similaire au précédent, sauf que sa taille est spécifiée comme farthest-corner, ce qui définit la taille du dégradé par la distance du point de départ au coin le plus éloigné de la boîte qui l'entoure.

Capture d'écran Démonstration en direct
radial_ellipse_size2.png  
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Exemple : côté le plus proche pour un cercle

Cet exemple utilise closest-side, qui détermine le rayon du cercle comme la distance entre le point de départ (le centre) et le côté le plus proche.

Capture d'écran Démonstration en direct
radial_circle_size1.png  
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

Ici, le rayon du cercle est la moitié de la hauteur de la boîte, puisque les bords haut et bas sont équidistants du point de départ et plus proches que les bords gauche et droit.

Répétition de dégradés

Les valeurs {{ cssxref("-moz-linear-gradient") }} et {{ cssxref("-moz-radial-gradient") }} ne permettent pas automatiquement de répéter les arrêts de couleurs. Cependant, les valeurs {{ cssxref("-moz-repeating-linear-gradient") }} et {{ cssxref("-moz-repeating-radial-gradient") }} permettent de disposer de cette fonctionnalité.

Exemple : répétition d'un dégradé linéaire

Cet exemple utilise {{ cssxref("-moz-repeating-linear-gradient") }} pour créer un dégradé :

Capture d'écran Démonstration en direct
repeating_linear_gradient.png  
background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);

Exemple : répétition d'un dégradé radial

Cet exemple utilise {{ cssxref("-moz-repeating-radial-gradient") }} pour créer un dégradé :

Capture d'écran Démonstration en direct
repeating_radial_gradient.png  
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Voir également

  • {{ cssxref("-moz-linear-gradient") }}
  • {{ cssxref("-moz-radial-gradient") }}
  • {{ cssxref("-moz-repeating-linear-gradient") }}
  • {{ cssxref("-moz-repeating-radial-gradient") }}

<-- {{ languages( { "en": "en/Using_gradients", "ja": "ja/Using_gradients", "de": "de/Farbverläufe_in_CSS", "fr": "fr/Utilisation_de_dégradés"} ) }} -->

Source de la révision

<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>Gecko 1.9.2, utilisé par Firefox 3.6, intègre la gestion des dégradés dans la propriété CSS {{ cssxref("background") }}. L'utilisation de dégradés CSS dans un fond permet d'afficher des transitions douces entre deux couleurs ou plus.&nbsp;En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.</p>
<p>Gecko gère deux types de dégradés :&nbsp;linéaire ({{ cssxref("-moz-linear-gradient") }}) et radial ({{ cssxref("-moz-radial-gradient") }}).</p>
<h2 id="D.C3.A9grad.C3.A9s_lin.C3.A9aires">Dégradés linéaires</h2>
<p>Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.&nbsp;Vous pouvez également définir des <strong>arrêts de couleurs</strong>. Ceux-ci représentent les couleurs entre lesquelles Gecko doit rendre des transitions douces, et deux au moins doivent être spécifiés, mais vous pouvez en indiquer plus pour obtenir des effets plus complexes.</p>
<h3 id="D.C3.A9grad.C3.A9s_lin.C3.A9aires_simples">Dégradés linéaires simples</h3>
<p>Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="" border="0" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-linear-gradient(top, blue, white);
</pre>
<p>Voici le même dégradé, modifié pour s'effectuer de gauche à droite :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="basic_linear_blueleft.png" class="internal default" src="/@api/deki/files/3951/=basic_linear_blueleft.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-linear-gradient(left, blue, white);
</pre>
<p>Le dégradé peut se faire en diagonale en spécifiant à la fois des positions de départ horizontale et verticale. Par exemple :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="basic_linear_bluetopleft.png" class="internal default" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-linear-gradient(left top, blue, white);
</pre>
<h3 id="Utilisation_d'angles">Utilisation d'angles</h3>
<p>Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ.&nbsp;Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.</p>
<p>Par exemple, voici deux dégradés avec le même point de départ « left center », mais où le second a également un angle de 20 degrés.</p>
<p><img alt="linear_gradient_angle.png" class="internal default" src="/@api/deki/files/3953/=linear_gradient_angle.png" /></p>
<p>La règle CSS pour le dégradé de droite est :</p>
<pre class="brush: css">
background: -moz-linear-gradient(left 20deg, black, white);
</pre>
<p>L'angle est spécifié entre une ligne horizontale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre.&nbsp;Autrement dit, 0deg génère un dégradé horizontal vers la droite, tandis que 90deg crée un gradient vertical de bas en haut :</p>
<p><img alt="linear_redangles.png" class="internal default" src="/@api/deki/files/3954/=linear_redangles.png" /></p>
<pre class="brush: css">
background:&nbsp;-moz-linear-gradient(&lt;angle&gt;, red, white);
</pre>
<h3 id="Arr.C3.AAts_de_couleurs">Arrêts de couleurs</h3>
<p>Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise.&nbsp;Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue.&nbsp;Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré.</p>
<p>Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.</p>
<h4 id="Exemple_.3A_trois_arr.C3.AAts_de_couleurs">Exemple : trois arrêts de couleurs</h4>
<p>Cet exemple spécifie trois arrêts de couleurs :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="linear_colorstops1.png" class="internal default" src="/@api/deki/files/3955/=linear_colorstops1.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background:&nbsp;-moz-linear-gradient(top, blue, white 80%, orange);
</pre>
<p>Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement.&nbsp;La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.</p>
<h4 id="Exemple_.3A_arr.C3.AAts_de_couleurs_dispos.C3.A9s_r.C3.A9guli.C3.A8rement">Exemple : arrêts de couleurs disposés régulièrement</h4>
<p>Voici un exemple utilisant une grande variété de couleurs, disposées à intervalles réguliers :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="linear_rainbow.png" class="internal default" src="/@api/deki/files/3956/=linear_rainbow.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
</pre>
<p>Remarquez que les arrêts de couleurs sont disposés automatiquement à intervalles réguliers lorsqu'aucun emplacement n'est spécifié.</p>
<h3 id="Transparence_et_d.C3.A9grad.C3.A9s">Transparence et dégradés</h3>
<p>Les gradients gèrent la transparence.&nbsp;Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :</p>
<p><img alt="linear_multibg_transparent.png" class="internal default" src="/@api/deki/files/3957/=linear_multibg_transparent.png" /></p>
<pre class="brush: css">
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
</pre>
<p>Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.&nbsp;En superposant les fonds de cette manière, il est possible de créer de effets très intéressants visuellement, comme celui ci-dessus.</p>
<h2 id="D.C3.A9grad.C3.A9s_radiaux">Dégradés radiaux</h2>
<p>Les dégradés radiaux sont spécifiés à l'aide de la propriété {{ cssxref("-moz-radial-gradient") }}. La syntaxe est semblable à celle des dégradés linéaires, avec en plus la forme du dégradé (un cercle ou une ellipse) ainsi que sa taille.</p>
<h3 id="Arr.C3.AAts_de_couleurs">Arrêts de couleurs</h3>
<p>Les arrêts de couleurs sont indiqués de la même façon que pour les dégradés linéaires.&nbsp;La ligne de dégradé s'étend de la position de départ dans toutes les directions.</p>
<h4 id="Exemple_.3A_arr.C3.AAts_de_couleurs_dispos.C3.A9s_r.C3.A9guli.C3.A8rement">Exemple : arrêts de couleurs disposés régulièrement</h4>
<p>Par défaut, comme avec les dégradés linéaires, les arrêts de couleurs sont disposés régulièrement :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="radial_gradient_even.png" class="internal default" src="/@api/deki/files/3958/=radial_gradient_even.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));
</pre>
<h4 id="Exemple_.3A.C2.A0_arr.C3.AAts_de_couleurs_plac.C3.A9s_explicitement">Exemple :&nbsp; arrêts de couleurs placés explicitement</h4>
<p>Ici, nous spécifierons des emplacement spécifiques pour les arrêts de couleurs :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="radial_gradient_varied.png" class="internal default" src="/@api/deki/files/3959/=radial_gradient_varied.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
<span style="color: rgb(0, 0, 0); font-weight: bold;">background</span><span style="color: rgb(0, 170, 0);">:</span> -moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span><span style="color: rgb(153, 51, 51);">red</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">5</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">25</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h3 id="Taille">Taille</h3>
<p>C'est l'un des domaines où les dégradés radiaux diffèrent des dégradés linéaires.&nbsp;Vous pouvez fournir une valeur de taille qui spécifie le point définissant la taille du cercle ou de l'ellipse. Consultez <a href="/en/CSS/radial-gradient#Size_constants" title="en/CSS/-moz-radial-gradient#Size constants">cette description des constantes de taille</a>&nbsp; pour plus de détails.</p>
<h4 id="Exemple_.3A.C2.A0c.C3.B4t.C3.A9_le_plus_proche_pour_une_ellipse">Exemple :&nbsp;côté le plus proche pour une ellipse</h4>
<p>Cette ellipse utiliser la valeur de taille <code>closest-side</code>, ce qui veut dire que la taille est définie par la distance depuis le point de départ (le centre) jusqu'au côté le plus proche de la boîte qui l'entoure.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="radial_ellipse_size1.png" class="internal default" src="/@api/deki/files/3960/=radial_ellipse_size1.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background:&nbsp;-moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span>ellipse closest-side<span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">red</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">10</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">white</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h4 id="Exemple_.3A_c.C3.B4t.C3.A9_le_plus_.C3.A9loign.C3.A9_pour_une_ellipse">Exemple : côté le plus éloigné pour une ellipse</h4>
<p>Cet exemple est similaire au précédent, sauf que sa taille est spécifiée comme <code>farthest-corner</code>, ce qui définit la taille du dégradé par la distance du point de départ au coin le plus éloigné de la boîte qui l'entoure.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="radial_ellipse_size2.png" class="internal default" src="/@api/deki/files/3961/=radial_ellipse_size2.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background:&nbsp;-moz-radial-gradient<span style="color: rgb(0, 170, 0);">(</span>ellipse farthest-corner<span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">red</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">yellow</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">10</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(204, 0, 204);">#1E90FF</span> <span style="color: rgb(153, 51, 51);"><span style="color: rgb(204, 102, 204);">50</span>%</span><span style="color: rgb(0, 170, 0);">,</span> <span style="color: rgb(153, 51, 51);">white</span><span style="color: rgb(0, 170, 0);">);</span>
</pre>
<h4 id="Exemple_.3A.C2.A0c.C3.B4t.C3.A9_le_plus_proche_pour_un_cercle">Exemple :&nbsp;côté le plus proche pour un cercle</h4>
<p>Cet exemple utilise <code>closest-side</code>, qui détermine le rayon du cercle comme la distance entre le point de départ (le centre) et le côté le plus proche.</p>
<table class="standard-table" style="table-layout: fixed; width: 520px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="radial_circle_size1.png" class="internal default" src="/@api/deki/files/3962/=radial_circle_size1.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
</pre>
<p>Ici, le rayon du cercle est la moitié de la hauteur de la boîte, puisque les bords haut et bas sont équidistants du point de départ et plus proches que les bords gauche et droit.</p>
<h2 id="R.C3.A9p.C3.A9tition_de_d.C3.A9grad.C3.A9s">Répétition de dégradés</h2>
<p>Les valeurs {{ cssxref("-moz-linear-gradient") }} et {{ cssxref("-moz-radial-gradient") }} ne permettent pas automatiquement de répéter les arrêts de couleurs. Cependant, les valeurs {{ cssxref("-moz-repeating-linear-gradient") }} et {{ cssxref("-moz-repeating-radial-gradient") }} permettent de disposer de cette fonctionnalité.</p>
<h3 id="Exemple_.3A_r.C3.A9p.C3.A9tition_d'un_d.C3.A9grad.C3.A9_lin.C3.A9aire">Exemple : répétition d'un dégradé linéaire</h3>
<p>Cet exemple utilise {{ cssxref("-moz-repeating-linear-gradient") }} pour créer un dégradé :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="repeating_linear_gradient.png" class="internal default" src="/@api/deki/files/3964/=repeating_linear_gradient.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
</pre>
<h3 id="Exemple_.3A_r.C3.A9p.C3.A9tition_d'un_d.C3.A9grad.C3.A9_radial">Exemple : répétition d'un dégradé radial</h3>
<p>Cet exemple utilise {{ cssxref("-moz-repeating-radial-gradient") }} pour créer un dégradé :</p>
<table class="standard-table" style="table-layout: fixed; width: 400px;">
  <tbody>
    <tr>
      <td class="header">Capture d'écran</td>
      <td class="header">Démonstration en direct</td>
    </tr>
    <tr>
      <td><img alt="repeating_radial_gradient.png" class="internal default" src="/@api/deki/files/3965/=repeating_radial_gradient.png" /></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<pre class="brush: css">
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
</pre>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>{{ cssxref("-moz-linear-gradient") }}</li>
  <li>{{ cssxref("-moz-radial-gradient") }}</li>
  <li>{{ cssxref("-moz-repeating-linear-gradient") }}</li>
  <li>{{ cssxref("-moz-repeating-radial-gradient") }}</li>
</ul>
<p>&lt;-- {{ languages( { "en": "en/Using_gradients", "ja": "ja/Using_gradients", "de": "de/Farbverläufe_in_CSS", "fr": "fr/Utilisation_de_dégradés"} ) }} --&gt;</p>
Revenir à cette révision