diff options
| author | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
| commit | ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b (patch) | |
| tree | 03e6f19fc527ab750be01344add09afba6bcb6dd /files/fr/web/css | |
| parent | 3e028982e4bc6762a47268f86fe395670a11c160 (diff) | |
| download | translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.gz translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.bz2 translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/fr/web/css')
| -rw-r--r-- | files/fr/web/css/conic-gradient()/index.html | 264 | ||||
| -rw-r--r-- | files/fr/web/css/image()/index.html | 175 | ||||
| -rw-r--r-- | files/fr/web/css/image-set()/index.html | 84 | ||||
| -rw-r--r-- | files/fr/web/css/linear-gradient()/index.html | 296 | ||||
| -rw-r--r-- | files/fr/web/css/radial-gradient()/index.html | 225 | ||||
| -rw-r--r-- | files/fr/web/css/repeating-conic-gradient()/index.html | 207 | ||||
| -rw-r--r-- | files/fr/web/css/repeating-linear-gradient()/index.html | 174 | ||||
| -rw-r--r-- | files/fr/web/css/repeating-radial-gradient()/index.html | 165 |
8 files changed, 0 insertions, 1590 deletions
diff --git a/files/fr/web/css/conic-gradient()/index.html b/files/fr/web/css/conic-gradient()/index.html deleted file mode 100644 index a403061a07..0000000000 --- a/files/fr/web/css/conic-gradient()/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: conic-gradient() -slug: Web/CSS/conic-gradient() -tags: - - CSS - - Fonction - - Guide - - Reference -translation_of: Web/CSS/conic-gradient() ---- -<div>{{CSSRef}}</div> - -<p>La fonction CSS <strong><code>conic-gradient()</code></strong> permet de créer une image consistuée d'un dégradé radial pour lequel les transitions entre les couleurs ont lieu autour d'un centre plutôt que depuis le centre. Un dégradé conique pourra par exemple être un graphique en camembert. Le résultat de la fonction <code>conic-gradient()</code> est un objet du type de données {{CSSxRef("<gradient>")}} qui est un type particulier d'{{CSSxRef("<image>")}}.</p> - -<p>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</p> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>À l'instar des autres dégradés, les dégradés coniques ne possèdent pas <a href="/en-US/docs/CSS/image#no_intrinsic">de dimension intrinsèque</a> (ils n'ont pas de taille préférentielle ou de ratio) : la taille réelle correspondra à la taille de l'élément auquel le dégradé s'applique ou à la taille de l'image.</p> - -<p>Pour créer un dégradé conique qui se répète afin de couvrir 360° (un tour complet), on utilisera plutôt la notation fonctionnelle {{CSSxRef("repeating-conic-gradient")}}.</p> - -<p>Les dégradés (<code><gradient></code>) sont un type d'image (<code><image></code>) et ne peuvent être utilisés qu'aux endroits où les images peuvent être utilisées. Aussi, <code>conic-gradient()</code> ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("<color>")}}.</p> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.</p> -</div> - -<h2 id="Quest-ce_quun_dégradé_conique">Qu'est-ce qu'un dégradé conique ?</h2> - -<p>Un dégradé conique est semblable à un dégradé radial mais les transitions de couleurs sont placées sur différents angles plutôt que sur différents rayons. Avec les dégradés coniques, les transition entre les couleurs commencent depuis la direction pointant vers le haut puis dans le sens des aiguilles d'une montre. Avec un dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.</p> - -<p><img alt="color stops along the circumference of a conic gradient and the axis of a radial gradient." src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p> - -<p>Un dégradé conique est défini en indiquant un angle de rotation, le centre du dégradé puis en indiquant une liste de points d'arrêt de couleur. À la différence des dégradés linéaires et des dégradés radiaux pour lesquels les points d'arrêt de couleur sont placés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à l'aide d'un angle. Les unités utilisables pour les angles sont <code>deg</code> (pour les degrés), <code>rad</code> (pour les radians), <code>grad</code> (pour les grades) et <code>turn</code> (pour les tours). Un cercle se divise en 360 degrés, 400 grades, 2 radians et un tour. Les navigateurs qui prennent en charge les dégradés coniques acceptent également les valeurs exprimées en pourcentage (100% correspondant à 360 degrés) mais cela ne fait pas partie de la spécification.</p> - -<p>Comme pour les dégradés radiaux, la syntaxe pour les dégradés coniques permet de situer le centre du dégradé à n'importe quel endroit de l'image ou de l'élément, même en dehors. La position s'exprime avec deux valeurs, de façon semblable à la syntaxe de {{cssxref("background-position")}}.</p> - -<p>L'arc du dégradé représente le périmètre du dégradé. Le point de départ du dégradé est situé en haut de l'axe vertical. Ensuite le dégradé évolue à partir de cet angle. Les couleurs du dégradé sont déterminées grâce aux points d'arrêt de couleur angulaires, aux points de départ et aux points d'arrivée et éventuellement aux points d'arrêt intermédiaires. Les transitions entre les couleurs peuvent être modifiées grâce à des indications entre les différents points d'arrêt.</p> - -<h3 id="Adapter_les_dégradés">Adapter les dégradés</h3> - -<p>En ajoutant plusieurs points d'arrêt de couleur sur l'arc du dégradé, il est possible de créer une transition personnalisée entre de nombreuses couleurs. La position d'un point d'arrêt de couleur peut être définie de façon explicite grâce à une valeur de type {{CSSxRef("<angle>")}}. Si on ne définit pas l'emplacement d'un point d'arrêt, ce dernier sera placé à mi-chemin entre le point d'arrêt précédent et le suivant. Si on ne définit pas d'angle pour le premier ou le dernier point d'arrêt de couleur, ils seront respectivement situés à <code>0deg</code> et <code>360deg</code>. Autrement dit, les deux dégradés suivants sont équivalents :</p> - -<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue); -conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre> - -<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fera progressivement avec la moitié de la transition à la moitié de l'angle. Ce milieu de transition peut être déplacé en ajoutant une indication de couleur qui définit l'emplacement voulu. L'exemple suivant commence avec du rouge jusqu'à 10%, fait une transition du rouge au bleu sur 80% du tour, les 10% restants sont en bleu. Cependant, le point de changement entre le bleu et le rouge se situe à 20% plutôt qu'à 50% (ce qui se serait produit sans l'indication <code>80grad</code>).</p> - -<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre> - -<p>Si deux ou plusieurs points d'arrêt de couleur partagent le même emplacement, la transition sera franche entre la première et la dernière couleur déclarées pour cet emplacement. Si on emploie les dégradés coniques pour faire des camemberts (une mauvaise pratique car les dégradés ne sont pas accessibles), on peut utiliser des points d'arrêt avec plusieurs couleurs au même endroit pour créer une transition nette. Les deux déclarations suivantes sont synonymes :</p> - -<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); -conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre> - -<p>Les points d'arrêt de couleur devraient être listés dans l'ordre croissant. Les points d'arrêt situés après mais dont la valeur d'angle est inférieure surchargeront les valeurs des points d'arrêt précédents et créeraient une rupture tranchée. Le dégradé qui suit passe de rouge à jaune à 30% puis de jaune à bleu après 35% :</p> - -<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); -</pre> - -<p>Il est possible d'obtenir d'autres effets avec les dégradés coniques. On peut même créer un damier en créant des quadrants supérieurs gauches et inférieurs droits en blanc et supérieurs droits et inférieurs gauches en noir puis en répétant le dégradé 16 fois (quatre fois en horizontal et quatre fois en vertical) :</p> - -<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); -background-size: 25% 25%; -</pre> - -<p>On voit avec l'exemple précédent qu'il est aussi possible de mélanger différentes unités d'angle mais attention, cela diminue fortement la lisibilité.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="language-css notranslate" id="css">/* Un dégradé conique tourné de 45 degrés, - qui commence en bleu et finit en rouge */ -conic-gradient(from 45deg, blue, red); - -/* Une boîte bleu violette : le dégradé commence du bleu - vers le rouge mais seule la partie inférieure droite du - quadrant est visible car le centre du dégradé conique est - dans le coin supérieur gauche */ -conic-gradient(from 90deg at 0 0, blue, red); - -/* Une roue des couleurs */ -background: conic-gradient( - hsl(360, 100%, 50%), - hsl(315, 100%, 50%), - hsl(270, 100%, 50%), - hsl(225, 100%, 50%), - hsl(180, 100%, 50%), - hsl(135, 100%, 50%), - hsl(90, 100%, 50%), - hsl(45, 100%, 50%), - hsl(0, 100%, 50%) -);</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt>{{CSSxRef("<angle>")}}</dt> - <dd>Une valeur précédée du mot-clé <code>from</code> qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.</dd> - <dt><code><position></code></dt> - <dd>La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété {{cssxref("background-position")}}. Si cette valeur est absente, ce sera la valeur <code>center</code> qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.</dd> - <dt><code><angular-color-stop></code></dt> - <dd>Un point d'arrêt de couleur utilisant une valeur de type {{CSSxRef("<color>")}} suivie par une ou deux positions d'arrêt (une valeur de type {{CSSxRef("<angle>")}} située le long de l'arc du dégradé).</dd> - <dt><code><color-hint></code></dt> - <dd>Une indication de couleur pour l'interpolation entre deux points d'arrêt. La longueur définit l'emplacement où les deux couleurs des points d'arrêts alentour doivent se joindre. Autrement dit, la longueur à laquelle la transition est effectuée à moitié. Si cette valeur est absente, la moitié de la transition est atteinte à la moitié de l'angle entre les deux points d'arrêt.</dd> - <dd> - <div class="note"> - <p><strong>Note :</strong> Le rendu des points d'arrêt de couleur pour les dégradés CSS respecte les mêmes règles que les points d'arrêt de couleur des <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</p> - </div> - </dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox notranslate">conic-gradient( - [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> ) - \---------------------------------/ \----------------------------/ - Gradient definition List of color stops - -where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop> - and <angular-color-stop> = <color> && <color-stop-angle>? - and <angular-color-hint> = <angle-percentage> - and <color-stop-angle> = <angle-percentage>{1,2}</pre> - -<h2 id="Exemples">Exemples</h2> - -<div> -<h3 id="Un_dégradé_à_40°">Un dégradé à 40°</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background-image: - conic-gradient(from 40deg, #fff, #000); -} -</pre> - -<p>{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}</p> -</div> - -<div> -<h3 id="Un_dégradé_décentré">Un dégradé décentré</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); -}</pre> - -<p>{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}</p> -</div> - -<div> -<h3 id="Un_camembert_sous_forme_de_dégradé">Un camembert sous forme de dégradé</h3> - -<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: conic-gradient( - red 36deg, orange 36deg 170deg, yellow 170deg); - border-radius: 50% -}</pre> - -<p>{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}</p> -</div> - -<div> -<h3 id="Un_damier">Un damier</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: - conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) - top left / 25% 25% repeat; - border: 1px solid; -}</pre> - -<p>{{EmbedLiveSample("Un_damier", 120, 120)}}</p> -</div> - -<div class="note"> -<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p> -</div> - -<h2 id="Acessibilité">Acessibilité</h2> - -<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Aussi, bien qu'il soit possible de créer des camemberts graphiques, des damiers ou d'autres effets grâce aux dégradés coniques, les images construites en CSS ne sont pas accessibles. Les images créées avec des dégradés coniques ne sont donc pas accessibles non plus. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1.</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 pour WCAG 2.0</a></li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.types.image.gradient.conic-gradient")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Utiliser les dégradés CSS</a></li> - <li>Les autres fonctions associées aux dégradés : {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> - <li>{{CSSxRef("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/image()/index.html b/files/fr/web/css/image()/index.html deleted file mode 100644 index 5e9e07d389..0000000000 --- a/files/fr/web/css/image()/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: image() -slug: Web/CSS/image() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/image() ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La fonction CSS <code><strong>image</strong></code><strong><code>()</code></strong> définit une image (type {{cssxref("<image>")}}) à la façon du type {{cssxref("<url>")}} mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.</p> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur {{DOMxRef("HTMLImageElement/Image", "<code>Image()</code> pour <code>HTMLImageElement</code>","",1)}}.</p> -</div> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> - -{{CSSSyntax("image()")}} - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>image-tags</code>{{optional_inline}}</dt> - <dd>La directionnalité de l'image, la valeur <code>ltr</code> pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur <code>rtl</code> indiquera de droite à gauche.</dd> - <dt><code>image-src</code>{{optional_inline}}</dt> - <dd>Zéro, une ou plusieurs URL ({{CSSxRef("<url>")}}) ou chaînes de caractères ({{CSSxRef("<string>")}}) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.</dd> - <dt><code>color</code>{{optional_inline}}</dt> - <dd>Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via <code>image-src</code>.</dd> -</dl> - -<h3 id="Gestion_de_la_directionnalité">Gestion de la directionnalité</h3> - -<p>Le premier paramètre de la fonction <code>image()</code> est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.</p> - -<h3 id="Fragments_dimage">Fragments d'image</h3> - -<p>Une différence fondamentale entre <code>url()</code> et <code>image()</code> est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.</p> - -<pre class="brush:css notranslate">background-image: image('monimage.webp#xywh=0,20,40,60');</pre> - -<p>Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image <em>myImage.webp</em> commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.</p> - -<p>La syntaxe pour l'identifiant de fragment <code>#xywh=#,#,#,#</code> prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La <a href="https://www.w3.org/TR/media-frags/#naming-space">définition de la dimension spatiale de la spécification des média</a> indique que les pourcentages peuvent également être pris en charge.</p> - -<pre class="brush: css notranslate">xywh=160,120,320,240 /* créera une image sur 320x240 à x=160 et y=120 */ -xywh=pixel:160,120,320,240 /* créera une image sur 320x240 à x=160 et y=120 */ -xywh=percent:25,25,50,50 /* créera une image sur 50%x50% à x=25% et y=25% */</pre> - -<p>Les fragments d'image peuvent également être utilisés avec la notation <code>url()</code>. La syntaxe <em>#xywh</em>=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation <code>url()</code>. Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.</p> - -<p>Les navigateurs qui prennent en charge <code>image()</code> prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour <code>image()</code>, l'image résultante sera considérée invalide.</p> - -<h3 id="Couleur_par_défaut">Couleur par défaut</h3> - -<p>Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction <code>image()</code> génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.</p> - -<p>Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.</p> - -<p>À la différence de {{cssxref("background-color")}} dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser <code>image()</code> afin de placer des couleurs sur d'autres images.</p> - -<p>La taille du rectangle de couleur appliqué peut être défini grâce à la propriété {{cssxref("background-size")}}. Ce comportement diffère de <code>background-color</code> qui définit une couleur pour couvrir l'ensemble de l'élément. <code>image(color)</code> et <code>background-color</code> pourront être déplacés grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p> - -<h2 id="Examples" name="Examples">Exemples</h2> - -<h3 id="Utiliser_des_images_prenant_en_compte_la_directionnalité">Utiliser des images prenant en compte la directionnalité</h3> - -<pre class="brush: html notranslate"><ul> - <li dir="ltr">La puce est une flèche pointant à droite et située à gauche.</li> - <li dir="rtl">La puce est la même flèche mais renversée pour pointer à gauche.</li> -</ul></pre> - -<pre class="brush: css notranslate">ul { - list-style-image: image(ltr 'rightarrow.jpg'); -}</pre> - -<p>Pour les éléments de la liste allant de gauche à droite (ceux avec <code>dir="ltr"</code> ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec <code>dir="rtl"</code> (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec <code>transform: scalex(-1)</code>). Le texte sera également affiché de gauche à droite.</p> - -<p>{{EmbedLiveSample("Utiliser_des_images_prenant_en_compte_la_directionnalité","100%","200")}}</p> - -<div> -<h3 id="Afficher_une_partie_sprite" name="Afficher_une_partie_sprite">Afficher une partie (<em>sprite</em>)</h3> - -<pre class="brush: html notranslate"><div class="box">Vous pouvez survoler cet élément pour voir un autre curseur.</div> -</pre> - -<pre class="brush:css notranslate">.box:hover { - cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16"); -}</pre> - -<p>Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un <em>sprite</em> mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.</p> - -<div>{{EmbedLiveSample("Afficher_une_partie_sprite","100%","100")}}</div> -</div> - -<div> -<h3 id="Fournir_des_images_alternatives">Fournir des images alternatives</h3> - -<pre class="brush:css notranslate">.help::before { - content: image("try.webp", "try.svg", "try.gif"); -}</pre> - -<p>Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe <code>help</code>. Si le navigateur prend en charge le format WebP, ce sera <code>try.webp</code> qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera <code>try.svg</code> qui sera affichée et sinon, ce sera <code>try.gif</code> qui sera utilisée.</p> -</div> - -<div> -<h3 id="Placer_une_couleur_sur_une_image_en_arrière-plan">Placer une couleur sur une image en arrière-plan</h3> - -<pre class="brush:css notranslate">.quarterlogo {height: 200px; width: 200px; border: 1px solid;}</pre> - -<pre class="brush:css notranslate">.quarterlogo { - background-image: - image(rgba(0, 0, 0, 0.25)), - url("https://mdn.mozillademos.org/files/12053/firefox.png"); - background-size: 25%; - background-repeat: no-repeat; -}</pre> - -<pre class="brush: html notranslate"><div class="quarterlogo">If supported, a quarter of this div has a darkened logo</div> -</pre> - -<p>Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété <code>background-color</code> à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec <code>image()</code> et {{cssxref("background-size")}} (tout en empêchant l'aimge de se répéter grâce à {{cssxref("background-repeat")}}), le voile noir ne couvrira qu'un quart du conteneur.</p> - -<div>{{EmbedLiveSample("Placer_une_couleur_sur_une_image_en_arrière-plan","100%","220")}}</div> -</div> - -<h2 id="Accessibilité">Accessibilité</h2> - -<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan acr les navigateurs n'extraient pas d'informations du contenu visuel des images. Si l'image contient des informations essentielles à la compréhension du document, il faudra décrire ces informations de façon sémantique dans le document afin, entre autres, que les outils d'assistance puissent transmettre les informations aux utilisateurs.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendres les règles WCAG 1.1</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 - WCAG 2.0</a></li> -</ul> - -<p>Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan ({{cssxref("background-color")}}) pour chaque image d'arrière-plan ({{cssxref("background-image")}}), <code>image()</code> pourra être utile afin de définir une couleur uniquement utilisée lorsqu'une image ne charge pas.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Images", "#image-notation", "image()")}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.types.image.image")}}</p> - -<h2 id="See_also" name="See_also">Voir aussi</h2> - -<ul> - <li>{{CSSxRef("<image>")}}</li> - <li>{{CSSxRef("element")}}</li> - <li>{{CSSxRef("<url>")}}</li> - <li>{{CSSxRef("clip-path")}}</li> - <li>{{CSSxRef("-moz-image-rect")}}</li> - <li>{{CSSxRef("<gradient>")}}</li> - <li>{{CSSxRef("image-set")}}</li> - <li>{{CSSxRef("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/image-set()/index.html b/files/fr/web/css/image-set()/index.html deleted file mode 100644 index b54ea600c9..0000000000 --- a/files/fr/web/css/image-set()/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image-set() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/image-set() ---- -<p>{{CSSRef}}</p> - -<p class="summary">La fonction <code>image-set()</code> est une méthode permettant au navigateur de sélectionner l'image la plus appropriée parmi un ensemble d'images. Elle s'avère notamment utile pour les écrans à haute densité de pixels.</p> - -<p>La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction <code>image-set()</code> permet au navigateur de sélectionner l'image avec la résolution la mieux adaptée aux conditions de l'utilisateur. Cette fonction reçoit différentes options d'images qui sont chacune une image avec une déclaration de résolution. La résolution sera généralement couplée avec la taille du fichier associé. Ainsi, un agent utilisateur conscient que la bande passante est faible pourra privilégier une image à faible résolution plutôt que d'attendre longtemps le chargement d'une image à plus haute résolution.</p> - -<p>Cette fonction permet ainsi à l'auteur du document de fournir différentes options plutôt que de laisser l'utilisateur payer les conséquences.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate">image-set() = image-set( <image-set-option># ) -où <image-set-option> = [ <image> | <string> ] <resolution> et où - <string> est une valeur <url> -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<p>La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction {{cssxref("url")}}.</p> - -<p>On notera qu'on ne peut pas imbriquer un appel à une fonction <code>image-set()</code> au sein d'un autre appel à <code>image-set()</code>.</p> - -<p>La valeur <code><a href="/fr/docs/Web/CSS/resolution"><resolution></a></code> peut utiliser une unité <code>x</code> ou <code>dppx</code> (points par unité de pixel), <code>dpi</code> (points par pouce) ou <code>dpcm</code> (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à <code>image-set()</code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: css notranslate">background-image: image-set( "chat.png" 1x, - "chat-2x.png" 2x, - "chat-print.png" 600dpi);</pre> - -<p>Dans cet exemple, on utilise <code>image-set()</code> afin de fournir deux versions pour une image en arrière-plan. Le navigateur pourra choisir l'image avec la meilleure résolution si l'utilisateur dispose d'un appareil permettant de l'afficher correctement et si sa connexion est suffisamment rapide.</p> - -<h2 id="Accessibilité">Accessibilité</h2> - -<p>Les navigateurs ne fournissent pas d'informations particulières aux outils d'assistance quant aux outils d'assistance. Ainsi, les lecteurs d'écran ne pourront pas annoncer d'informations utiles si l'image contient des informations essentielles à la compréhension de la page. Il faudra inclure une description sémantique sur l'image pour que tous les utilisateurs puissent en bénéficier.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 WCAG 2.0</a></li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Spécification</th> - <th>État</th> - <th>Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.types.image.image-set")}}</p> - -<h2 id="See_also" name="See_also">Voir aussi</h2> - -<ul> - <li>{{cssxref("image")}}</li> - <li>{{cssxref("_image", "image()")}}</li> - <li>{{cssxref("element")}}</li> - <li>{{cssxref("url")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/linear-gradient()/index.html b/files/fr/web/css/linear-gradient()/index.html deleted file mode 100644 index 155ead9fe4..0000000000 --- a/files/fr/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: linear-gradient -slug: Web/CSS/linear-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p>La fonction <strong><code>linear-gradient()</code></strong> permet de créer une image (type {{cssxref("<image>")}}) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS {{cssxref("<gradient>")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type {{cssxref("<color>")}} mais une image <a href="fr/docs/Web/CSS/image">sans dimension intrinsèque</a>. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.</p> - -<p>Les dégradés linéaires sont définis par un axe : la <em>ligne du dégradé</em>. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p>La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.</p> - -<p>Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.</p> - -<p>De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.</p> - -<p>Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.</p> - -<p>Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. </p> - -<p>Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.</p> - -<p>La fonction <code>linear-gradient</code> ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété {{cssxref("repeating-linear-gradient")}}.</p> - -<div class="note"><strong>Note : </strong>Les dégradés sont des valeurs de type <code><image></code> et non des couleurs (type {{cssxref("<color>")}}. Aussi, <code>linear-gradient</code> ne pourra pas être utilisée sur {{cssxref("background-color")}} et sur les autres propriétés qui n'acceptent que des valeurs de type <code><color></code>.</div> - -<h2 id="Paramétrer_des_dégradés">Paramétrer des dégradés</h2> - -<p>En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type {{cssxref("<length>")}}) ou un pourcentage (valeur de type {{cssxref("<percentage>")}}). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :</p> - -<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); -</pre> - -<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.</p> - -<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p>Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.</p> - -<p>L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.</p> - -<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p>Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :</p> - -<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); -</pre> - -<p>Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css notranslate">/* Un dégradé suivant une ligne à 45° - qui démarre en bleu et finit en rouge */ -linear-gradient(45deg, blue, red); - -/* Un dégradé qui démarre en bas à droite, - qui démarre en bleu et finit en rouge */ -linear-gradient(to left top, blue, red); - -/* Un dégradé qui démarre du bas et va vers le haut - qui commence en bleu, passe en vert à 40% et termine - en rouge */ -linear-gradient(0deg, blue, green 40%, red); - -/* Indication de couleur : un dégradé de gauche à droite - qui commmence en rouge et dont la couleur intermédiaire - est située à 10% et laisse les 90% pour la seconde - moitié de la transition vers le bleu */ -linear-gradient(.25turn, red, 10%, blue); - -/* Plusieurs points d'arrêt par couleur : un dégradé - orienté de 45° avec une moitié inférieure gauche - rouge et une moitié supérieure droite bleue avec - une ligne franche au milieu */ -linear-gradient(45deg, red 0 50%, blue 50% 100%); -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : <code>left</code> ou <code>right</code> ; le second indique le côté vertical : <code>top</code> ou <code>bottom</code>. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra <code>to bottom</code> par défaut. Les valeurs <code>to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> correspondent respectivement aux angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>. Les autres valeurs sont traduites en angles à partir de <code>to top</code> et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.</dd> - <dt><code><angle></code></dt> - <dd>L'angle de la direction du dégradé. L'angle démarre à partir de <code>to top</code> et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir {{cssxref("<angle>")}}.</dd> - <dt><code><linear-color-stop></code></dt> - <dd>Un valeur composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position (un pourcentage ou une longueur {{cssxref("<length>")}}) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</dd> - <dt><code><color-hint></code></dt> - <dd>Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les <a href="/fr/docs/Web/SVG/Tutoriel/Gradients">dégradés SVG</a>.</p> -</div> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox notranslate">linear-gradient( - [ <a href="/fr/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \----------------------------/ - Définition de la ligne du dégradé Liste des arrêts de couleur - -où <side-or-corner> = [ left | right ] || [ top | bottom ] - et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> - et <linear-color-stop> = <color> [ <color-stop-length> ]? - et <color-stop-length> = [ <percentage> | <length> ]{1,2} - et <color-hint> = [ <percentage> | <length> ]</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Dégradé_à_45_degrés">Dégradé à 45 degrés</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(135deg, red, blue); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div style="width: 200px; height: 200px;"></div></pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Dégradé_à_45_degrés")}}</p> - -<h3 id="Décalage_du_début">Décalage du début</h3> - -<p>Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.</p> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(135deg, red, red 60%, blue); -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><div style="width: 200px; height: 200px;"></div></pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Décalage_du_début")}}</p> - -<h3 id="Un_dégradé_avec_plusieurs_couleurs">Un dégradé avec plusieurs couleurs</h3> - -<p>Si la position du premier point d'arrêt n'est pas définie par une valeur <code><length></code> ou <code><percentage></code>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <code><length></code> ou <code><percentage></code>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.</p> - -<p>Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.</p> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -} -</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html notranslate"><div>Un arc-en-ciel dégradé</div></pre> - -<h4 id="Résultat_3">Résultat</h4> - -<p>{{EmbedLiveSample("Un_dégradé_avec_plusieurs_couleurs")}}</p> - -<h3 id="Répéter_un_dégradé_linéaire">Répéter un dégradé linéaire</h3> - -<p>La fonction <code>linear-gradient</code> ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction {{cssxref("repeating-linear-gradient")}}.</p> - -<h3 id="Utiliser_la_transparence">Utiliser la transparence</h3> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(to bottom right, red, rgba(0,0,0,0)); -}</pre> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html notranslate"><div>Un dégradé linéaire avec de la transparence</div></pre> - -<h4 id="Résultat_4">Résultat</h4> - -<p>{{EmbedLiveSample("Utiliser_la_transparence")}}</p> - -<h3 id="Des_dégradés_pour_les_différents_navigateurs">Des dégradés pour les différents navigateurs</h3> - -<p>Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :</p> - -<pre class="brush: css notranslate">.grad { - background-color: #F07575; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ - background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */ - background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ -} -</pre> - -<p>Le préfixe <code>-moz-</code> est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe <code>-webkit-</code> est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser <code>to</code>.</p> - -<h3 id="Un_dégradé_avec_des_points_d’arrêt_à_plusieurs_couleurs">Un dégradé avec des points d’arrêt à plusieurs couleurs</h3> - -<p>Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.</p> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("Un_dégradé_avec_des_points_d’arrêts_à_plusieurs_couleurs", 120, 120)}}</p> - -<div class="note"> -<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Ajout des indices d'interpolation.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p>{{Compat("css.types.image.gradient.linear-gradient")}}</p> - -<ul> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a> - - <ul> - <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li> - <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li> - <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> - <li>{{cssxref("conic-gradient")}}</li> - <li>{{cssxref("repeating-conic-gradient")}}</li> - </ul> - </li> - <li>Des propriétés sur lesquelles cette fonction peut être utilisée : - <ul> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background")}}</li> - </ul> - </li> - <li><a class="external" href="https://lea.verou.me/css3patterns/">Une collection de motifs construits avec des dégradés CSS, par Léa Verou</a></li> - <li><a href="https://cssgenerator.org/gradient-css-generator.html">Générateur de dégradés CSS</a></li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/radial-gradient()/index.html b/files/fr/web/css/radial-gradient()/index.html deleted file mode 100644 index bb6cb5951d..0000000000 --- a/files/fr/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: radial-gradient -slug: Web/CSS/radial-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/radial-gradient() ---- -<div>{{CSSRef}}</div> - -<p>La fonction <strong><code>radial-gradient()</code></strong> permet de créer une {{cssxref("<image>")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le <em>centre</em> du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("<gradient>")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("<color>")}}) CSS mais une image <a href="/fr/docs/CSS/image#no_intrinsic">sans dimension intrinsèque</a> (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.</p> - -<div class="note"> -<p><strong>Note :</strong> La fonction <code>radial-gradient</code> ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS {{cssxref("repeating-radial-gradient")}}.</p> -</div> - -<div class="note"> -<p><strong>Note :</strong> Une valeur de type <code><gradient></code> est également une valeur de type <code><image></code>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type {{cssxref("<color>")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).</p> -</div> - -<h2 id="Composition_dun_dégradé_radial">Composition d'un dégradé radial</h2> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="height: 176px; width: 396px;"></p> - -<p>Les dégradés radiaux sont définis par trois notions :</p> - -<ul> - <li>Le centre,</li> - <li>La forme de terminaison : le contour et sa position,</li> - <li>Les points de couleur (<em>color stops</em>).</li> -</ul> - -<p>Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un <em>rayon virtuel</em> qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.</p> - -<p>Les formes de terminaisons peuvent prendre deux formes <code>:</code></p> - -<ul> - <li>circulaire (avec le mot-clé <code>circle)</code></li> - <li>elliptique (avec le mot-clé <code>ellipse</code>).</li> -</ul> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css no-line-numbers notranslate">/* Un dégradé qui part du centre du conteneur, - qui commence en rouge, passe par du bleu - et finit en vert. */ -radial-gradient(circle at center, red 0, blue, green 100%)</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><position></code></dt> - <dd>Une {{cssxref("<position>")}} CSS qui est interprétée de la même façon que pour les propriétés {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est <code>center</code>.</dd> - <dt><code><shape></code></dt> - <dd>La forme du gradient. Elle vaut soit <code>circle</code> (la forme du dégradé sera un cercle de rayon constant) ou <code>ellipse</code> (la forme est une ellipse alignée sur les axes). La valeur par défaut est <code>ellipse</code>.</dd> - <dt><code><linear-color-stop></code></dt> - <dd>Ces valeurs indiquent qu'une couleur donnée doit être utilisée à un endroit spécifique du dégradé. Cette valeur se compose d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position définie par une pourcentage ({{cssxref("<percentage>")}}) ou une longueur ({{cssxref("<length>")}}) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (<code>0%</code> ou <code>0</code>) indiquera le centre du dégradé. La valeur <code>100%</code> correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.</dd> - <dt><code><color-hint></code></dt> - <dd>Une indication pour définir la progression de l'interpolation entre les deux points d'arrêt de couleur adjacents. La longueur définit l'emplacement auquel la transition aurait été effectuée à moitié entre les deux couleurs.</dd> - <dt><code><extent-keyword></code></dt> - <dd>Des mots-clés qui permettent de décrire la taille de la forme de terminaison. Les valeurs possibles sont :</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>Constante</th> - <th>Description</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>La forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses).</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>La forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre.</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>Cette valeur fonctionne de façon semblable à <code>closest-side</code>, sauf que ce seront les côtés les plus éloignés qui seront utilisés.</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>La valeur par défaut. Cette valeur fonctionne de façon semblable à <code>closest-corner</code>, sauf que ce sera le coin le plus éloigné qui sera utilisé.</td> - </tr> - </tbody> - </table> - D'anciens brouillons de la spécification indiquaient d'autres mots-clés, <code>cover</code> et <code>contain</code>, respectivement synonymes des valeurs standards <code>farthest-corner</code> et <code>closest-side</code>. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox notranslate">radial-gradient( [ circle || {{cssxref("<length>")}} ] [ at {{cssxref("<position>")}} ]? , - | [ ellipse || [ {{cssxref("<length>")}} | {{cssxref("<percentage>")}} ]{2}] [ at {{cssxref("<position>")}} ]? , - | [ [ circle | ellipse ] || <extent-keyword> ] [ at {{cssxref("<position>")}} ]? , - | at {{cssxref("<position>")}} , - <color-stop-list> [ , <color-stop-list> ]+ ) -avec <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side -<code> et<code> <color-stop-list> </code>= [ <</code><dfn>linear-</dfn><code>color-stop> [, <color-hint>? ]? ]#, <</code><dfn>linear-</dfn><code>color-stop> - et <</code><dfn>linear-</dfn><code>color-stop> = <color> [ <color-stop-length> ]? - et <color-stop-length> = [ <percentage> | <length> ]{1,2} - et <color-hint> = [ <percentage> | <length> ]</code></pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Une_ellipse_avec_farthest-corner">Une ellipse avec <code>farthest-corner</code></h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.exemple { - height: 100vh; - width: 200vh; - background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p class="exemple"> - Yop -</p></pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}</p> - -<h3 id="Un_cercle_de_16_pixels">Un cercle de 16 pixels</h3> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css notranslate">.exemple { - height: 100vh; - width: 100vh; - background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px); -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><p class="exemple"> - Yop -</p></pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}</p> - -<h3 id="Un_dégradé_simple">Un dégradé simple</h3> - -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; - background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); -} </pre> - -<p>{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}</p> - -<h3 id="Un_dégradé_non-centré">Un dégradé non-centré</h3> - -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); -}</pre> - -<p>{{EmbedLiveSample('Un_dégradé_non-centré', 240, 120)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.types.image.gradient.radial-gradient")}}</p> - -<h3 id="Notes_relatives_à_Quantum_Firefox">Notes relatives à Quantum (Firefox)</h3> - -<ul> - <li>Gecko possède un bug qui fait que <code>radial-gradient(circle gold, red)</code> fonctionne bien que la virgule entre <code>circle</code> et <code>gold</code> soit absente (cf. {{bug("1383323")}}). Le nouveau moteur de rendu CSS, <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57, corrige ce bug.</li> - <li>De plus, les expressions utilisant {{cssxref("calc")}} sont rejetées lorsqu'elles sont utilisées pour définit le rayon dans <code>radial-gradient()</code>, la valeur obtenue étant alors considérée comme invalide (cf. {{bug(1376019)}}). Ce point a également été corrigé avec Stylo.</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a>,</li> - <li>{{cssxref("repeating-radial-gradient")}},</li> - <li>{{cssxref("linear-gradient")}}</li> - <li>{{cssxref("repeating-linear-gradient")}}</li> - <li>{{cssxref("conic-gradient")}}</li> - <li>{{cssxref("repeating-conic-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/repeating-conic-gradient()/index.html b/files/fr/web/css/repeating-conic-gradient()/index.html deleted file mode 100644 index 8e08d42e5a..0000000000 --- a/files/fr/web/css/repeating-conic-gradient()/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: repeating-conic-gradient() -slug: Web/CSS/repeating-conic-gradient() -tags: - - CSS - - Dégradé - - Fonction - - Reference -translation_of: Web/CSS/repeating-conic-gradient() ---- -<div>{{draft}} {{CSSRef}}</div> - -<p><span class="seoSummary">La fonction CSS <strong><code>repeating-conic-gradient()</code></strong> crée une image composée d'un dégradé conique répété. Elle permet d'avoir un motif répété qu'on pourrait décrire avec une seule itération grâce à {{cssxref('conic-gradient')}}. Le résultat fourni par la fonction <code>repeating-conic-gradient()</code> est une valeur de type {{CSSxRef("<gradient>")}} qui est un sous-type du type{{CSSxRef("<image>")}}.</span></p> - -<p>Si le premier ou le dernier arrêt de couleur inclut un angle supérieur à <code>0deg</code> ou inférieur à <code>360deg</code>, le dégradé conique ne sera pas répété.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-repeating-conic-gradient.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>À l'instar des autres dégradés, les dégradés coniques répétés n'ont pas <a href="/fr/docs/Web/CSS/image#Les_types_d'images">de dimensions intrinsèques</a> (c'est-à-dire pas de taille naturelle ou préférée et pas de proportion préférée). La taille finale du dégradé sera la taille de l'élément sur lequel il est appliqué ou la taille indiquée par d'autres propriétés.</p> - -<p>Le type de donnée <code><gradient></code>s étant un sous-type d'<code><image></code>, on pourra utiliser les dégradés coniques répétés là où des valeurs de type <code><image></code> sont attendues. Ainsi, <code>repeating-conic-gradient()</code> ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} car celle-ci attend une valeur de type {{CSSxRef("<color>")}}.</p> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> Afin de créer un dégradé conique qui ne se répète pas, on pourra utiliser la notation fonctionnelle {{CSSxRef("conic-gradient")}}.</p> -</div> - -<h2 id="Comprendre_les_dégradés_coniques_répétés">Comprendre les dégradés coniques répétés</h2> - -<p>La syntaxe pour <code>repeating-conic-gradient</code> est semblable à celle de {{CSSxRef("conic-gradient")}} et à celle de {{CSSxRef("repeating-radial-gradient")}}. À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.</p> - -<p><img alt="Comparison of the color stops for repeating and non-repeating conic and radial gradients" src="https://mdn.mozillademos.org/files/16798/repeatingconicgradient.png" style="height: 376px; width: 1403px;"></p> - -<p>Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.</p> - -<pre class="notranslate">repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); - -repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); - -conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); - -radial-gradient(red 33%, yellow 33% 66%, blue 66%); -</pre> - -<p>Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles <code>0</code> et <code>360deg</code>. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.</p> - -<p>Les arrêts de couleur sont placés autour d'un arc (et non sur une ligne qui s'écarte du centre). L'arc progresse dans le sens horaire.</p> - -<p>Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS {{cssxref('angle')}}). Les unités qui permettent de déclarer un angle sont <code>deg</code> (pour les degrés), <code>grad</code> (pour les grades), <code>rad</code> (pour les radians) et <code>turn</code> (pour les tours). Un cercle se compose de 360 degrés, 400 grade, 2π radians et d'un tour.</p> - -<p>Les navigateurs qui prennent en charge ces dégradés permettent également d'utiliser des valeurs en pourcentages (où 100% correspond à 360 degrés). Toutefois, ce comportement n'est pas décrit dans la spécification.</p> - -<p>La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de {{cssxref('background-position')}}.</p> - -<h3 id="Personnaliser_des_dégradés">Personnaliser des dégradés</h3> - -<p>En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesures. La position d'un arrêt de couleur se définit via un {{CSSxRef("<angle>")}}. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à <code>0deg</code> et à <code>360deg</code> respectivement.</p> - -<p>Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété.</p> - -<p>Les deux formulations suivantes sont équivalentes :</p> - -<pre class="brush: css notranslate">repeating-conic-gradient(red, orange, yellow, green, blue 50%); -repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)</pre> - -<p>Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieur de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.</p> - -<p>Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.</p> - -<p>Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité / maintenabilité.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="language-css notranslate" id="css">background: repeating-conic-gradient( - from 3deg at 25% 25%, - hsl(200, 100%, 50%) 0deg 15deg, - hsl(200, 100%, 60%) 10deg 30deg); -);</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt>{{CSSxRef("<angle>")}}</dt> - <dd>Lorsque cet angle est précédé du mot-clé <code>from</code>, cela définit la rotation du dégradé dans le sens horaire.</dd> - <dt><code><position></code></dt> - <dd>Une position définie avec la même syntaxe que la propriété {{cssxref("background-position")}}. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est <code>center</code>, ce qui indique que le dégradé est centré.</dd> - <dt><code><angular-color-stop></code></dt> - <dd>Une valeur {{CSSxRef("<color>")}} pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un {{CSSxRef("<angle>")}} le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.</dd> - <dt><code><color-hint></code></dt> - <dd>Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.</dd> - <dd> - <div class="note"> - <p><strong>Note :</strong> Le rendu des arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui des arrêts de couleur pour <a href="/fr/docs/Web/SVG/Tutoriel/Gradients">les dégradés SVG</a>.</p> - </div> - </dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox notranslate">repeating-conic-gradient( - [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> ) - \---------------------------------/ \----------------------------/ - Définition du dégradé Liste d'arrêts de couleur - -where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop> - and <angular-color-stop> = <color> && <color-stop-angle>? - and <angular-color-hint> = <angle-percentage> - and <color-stop-angle> = <angle-percentage>{1,2}</pre> - -<h2 id="Exemples">Exemples</h2> - -<div> -<h3 id="Noir_et_blanc">Noir et blanc</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 200px; - height: 200px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background-image: - repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); -} -</pre> - -<p>{{EmbedLiveSample("Noir_et_blanc", 220, 220)}}</p> -</div> - -<div> -<h3 id="Dégradé_désaxé">Dégradé désaxé</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 200px; - height: 200px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: repeating-conic-gradient( - from 3deg at 25% 25%, - green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); -}</pre> - -<p>{{EmbedLiveSample("Dégradé_désaxé", 220, 220)}}</p> - -<p>Le degradé est répété 18 fois mais on en voit que la moitié droite et on voit donc 9 répétitions.</p> -</div> - -<div class="note"> -<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés en CSS</a> pour plus d'exemples.</p> -</div> - -<h2 id="Accessibilité">Accessibilité</h2> - -<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles du WCAG 1.1</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)</a></li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#repeating-gradients', 'repeating-conic-gradient()')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<div>{{Compat("css.types.image.gradient.conic-gradient")}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés en CSS</a></li> - <li>Les autres fonctions relatives aux dégradés : {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/repeating-linear-gradient()/index.html b/files/fr/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 0e6c63df58..0000000000 --- a/files/fr/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: repeating-linear-gradient -slug: Web/CSS/repeating-linear-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/repeating-linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p>La fonction CSS <strong><code>repeating-linear-gradient</code></strong> créé une {{cssxref("<image>")}} composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec {{cssxref("linear-gradient")}} mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).</p> - -<div>{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.</p> - -<p>Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type {{cssxref("<color>")}}) CSS mais une image (type {{cssxref("<image>")}}) <a href="/fr/docs/Web/CSS/image" title="en/CSS/image#no_intrinsic">sans dimension intrinsèque</a> ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.</p> - -<div class="note"> -<p><strong>Note :</strong> Le type <code><gradient></code> est un sous-type du type <code><image></code>. À ce titre, <code>repeating-linear-gradient()</code> ne fonctionnera pas pour {{cssxref("background-color")}} et les autres propriétés qui utilisent le type de données {{cssxref("<color>")}}.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css no-line-numbers notranslate">/* Un dégradé répétitif sur un axe à 45 degrés */ -/* débutant bleu et finissant rouge, répété 3 fois */ -repeating-linear-gradient( 45deg, blue, red 33.3% ); - -/* Un dégradé répétitif allant du coin inférieur droit */ -/* à coin supérieur gauche débutant bleu et finissant rouge */ -/* et répété tous les 20 pixels */ -repeating-linear-gradient( to left top, blue, red 20px); - -/* Un dégradé répétitif allant du bas vers le haut, */ -/* débutant bleu, étant vert après 40% et finissant rouge */ -repeating-linear-gradient( 0deg, blue, green 40%, red ); - -/* Un dégradé répété cinq fois, progressant de gauche à - droite, commençant en rouge, passant en vert puis à - nouveau en rouge */ -repeating-linear-gradient(to right, red 0%, green 10%, red 20%);</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, <code>left</code> ou <code>right</code>, le second indique le côté sur une ligne verticale, <code>top</code> ou <code>bottom</code>. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.<br> - Les valeurs<code> to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> sont respectivement traduites vers les angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.</dd> - <dt><code><angle></code></dt> - <dd>Un angle pour la direction du dégradé. L'angle démarre à <code>0deg</code> (ce qui est équivalent à <code>to top</code>) et progresse dans le sens des aiguilles d'une montre. Voir {{cssxref("<angle>")}}.</dd> - <dt><code><linear-color-stop></code></dt> - <dd>Cette valeur est composée d'une valeur de couleur (type {{cssxref("<color>")}}), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type {{cssxref("<length>")}}) mesurée le long de l'axe du dégradé).</dd> - <dt><code><color-hint></code></dt> - <dd>L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.</dd> - <dd>Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox notranslate">repeating-linear-gradient( [ <a href="/fr/docs/Web/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \---------------/ - Définition de la ligne du dégradé Liste des points d'arrêt - -où <code><side-or-corner> = [left | right] || [top | bottom]</code> - et <code><</code><code>color-stop-list> = [ <</code><dfn>linear-</dfn><code>color-stop> [, <color-hint>? ]? ]#, <</code><dfn>linear-</dfn><code>color-stop> - et <</code><dfn>linear-</dfn><code>color-stop> = <color> [ <color-stop-length> ]? - et <color-stop-length> = [ <percentage> | <length> ]{1,2} - et <color-hint> = [ <percentage> | <length> ]</code> -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Bandes_zébrées">Bandes zébrées</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background-image: repeating-linear-gradient(-45deg, - transparent, - transparent 20px, - black 20px, - black 40px); - /* avec plusieurs longueurs pour les points d'arrêt */ - background-image: repeating-linear-gradient(-45deg, - transparent 0 20px, - black 20px 40px); -} -</pre> - -<p>{{EmbedLiveSample('Bandes_zébrées', 120, 120)}}</p> - -<h3 id="Dix_barres_horizontales_répétées">Dix barres horizontales répétées</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background-image: repeating-linear-gradient(to bottom, - rgb(26,198,204), - rgb(26,198,204) 7%, - rgb(100,100,100) 10%); -} -</pre> - -<p>{{EmbedLiveSample('Dix_barres_horizontales_répétées', 120, 120)}}</p> - -<p>Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.</p> - -<div class="note"> -<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a> pour plus d'exemples.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a></li> - <li>Les propriétés liées aux dégradés : - <ul> - <li>{{cssxref("radial-gradient", "radial-gradient()")}},</li> - <li>{{cssxref("linear-gradient", "linear-gradient()")}},</li> - <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> - <li>{{cssxref("conic-gradient")}}</li> - <li>{{cssxref("repeating-conic-gradient")}}</li> - </ul> - </li> - <li>Les propriétés où ces fonctions peuvent être utilisées : - <ul> - <li>{{cssxref("background-image")}},{{cssxref("background")}}.</li> - </ul> - </li> - <li><a href="https://codepen.io/adobe/full/fhnBJ">Un dégradé CSS interactif</a></li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/fr/web/css/repeating-radial-gradient()/index.html b/files/fr/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index ef48bef118..0000000000 --- a/files/fr/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/repeating-radial-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/repeating-radial-gradient() ---- -<div>{{CSSRef}}</div> - -<p>La fonction <code><strong>repeating-radial-gradient()</strong></code> fonctionne de façon similaire à {{cssxref("radial-gradient")}} mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient (de façon analogue à {{cssxref("repeating-linear-gradient")}} qui permet de répéter un dégradé linéaire ({{cssxref("linear-gradient")}}).</p> - -<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type {{cssxref("<color>")}} mais une image (type {{cssxref("<image>")}}) <a href="/fr/docs/Web/CSS/image">sans dimension intrinsèque</a> : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.</p> - -<div class="note"> -<p><strong>Note :</strong> En CSS, un dégradé est une image (type de données {{cssxref("<image>")}} et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, <code>repeating-radial-gradient()</code> ne fonctionnera pas avec {{cssxref("background-color")}} ou avec les autres propriétés qui acceptent des couleurs (type de données {{cssxref("<color>")}}).</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css no-line-numbers notranslate">/* Un dégradé répété qui part du centre de son conteneur, - en commençant par du rouge, passant par du bleu puis, - finissant par du vert */ -repeating-radial-gradient(circle at center, red 0, blue, green 30px); - -/* Un dégradé elliptique qui commence dans le coin supérieur gauche - en commençant rouge puis en passant au vert, cinq fois entre le - centre et le coin inférieur droit et une seule fois entre le - centre et le coin supérieur gauche */ -repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><position></code></dt> - <dd>Une position CSS ({{cssxref("<position>")}}) qui sera interprétée de la même façon que {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est <code>center</code>.</dd> - <dt><code><shape></code></dt> - <dd>La forme du gradient employé. C'est un mot-clé parmi <code>circle</code> (le dégradé est circulaire avec un rayon constant) ou <code>ellipse</code> (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est <code>ellipse</code>.</dd> - <dt><code><size></code></dt> - <dd>La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).</dd> - <dt><code><color-stop></code></dt> - <dd>Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position d'arrêt (une valeur {{cssxref("<percentage>")}} ou {{cssxref("<length>")}} représentant l'emplacement sur la ligne du gradient). Une valeur de <code>0%</code> ou <code>0</code> représentera le centre du gradient et la valeur de <code>100%</code> représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon.</dd> - <dt><code><extent-keyword></code></dt> - <dd>Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>Constante</th> - <th>Description</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>La forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte.</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>La forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>Fonctionne de façon similaire à <code>closest-side</code> mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>Fonctionne de façon similaire à <code>closest-corner</code> mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.</td> - </tr> - </tbody> - </table> - Les premières versions du brouillon utilisaient d'autres termes comme <code>cover</code> et <code>contain</code>, respectivement synonymes de <code>farthest-corner</code> et <code>closest-side</code>. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -{{csssyntax}} - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Dégradé_noir_et_blanc">Dégradé noir et blanc</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.radial-gradient { - width: 120px; - height: 120px; - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); -} -</pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample('Dégradé_noir_et_blanc', 120, 120)}}</p> - -<h3 id="Utilisation_de_farthest-corner">Utilisation de <code>farthest-corner</code></h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css notranslate">.radial-gradient { - width: 120px; - height: 120px; - background: repeating-radial-gradient(ellipse farthest-corner, - red, black 5%, blue 5%, green 10%); -} -</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample('Utilisation_de_farthest-corner', 120, 120)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les gradients CSS</a></li> - <li>{{cssxref("repeating-linear-gradient")}}</li> - <li>{{cssxref("radial-gradient")}}</li> - <li>{{cssxref("repeating-linear-gradient")}}</li> - <li>{{cssxref("conic-gradient")}}</li> - <li>{{cssxref("repeating-conic-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> |