diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-17 20:15:31 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-17 20:15:31 +0200 |
commit | 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f (patch) | |
tree | 09fe8f8a5fae5235b62918e8b7161fd34480b8d0 /files/fr/web/css/basic-shape/index.html | |
parent | 3518481e9190f19bbf81741704f45cb3c1761758 (diff) | |
download | translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.gz translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.bz2 translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.zip |
Prepare CSS section for Markdown conversion (#2307)
* Removes summary / seoSummary classes
* Remove div class=hidden and some notranslate
* Remove hidden paragraphs for live sample
* Remove hidden paragraphs for live sample - take 2
* Remove other hidden div and p - updated w/ en-US when necessary
* Remove ids
* Remove notranslate class
* Fix typo which broke build
* remove div class='index'
* remove useless <span style=...>
* remove non typographical sups
* remove non typographical subs
* remove blockindicator and fix some div.note
* fix build :/
* remove useless classes
* fix build - again :x
* fix unhandled elements 1/N + embedlivesample build fail
* fix div.warning
* Fix fixable flaws - hoping to reduce error conversion
* Remove unecessary images (same as en-US)
* fix div notes
* fix warnings
* fix some dl handling
* fix dls
* Fix a bunch of conversion errors
* rm unhandled figures
* Fix other set of issues and revamp easing-function page
* Fix some one-offs conversion errors (incl. deki files)
* fix the rest of one-off conversion issues
* Fix last dl standing
Diffstat (limited to 'files/fr/web/css/basic-shape/index.html')
-rw-r--r-- | files/fr/web/css/basic-shape/index.html | 23 |
1 files changed, 12 insertions, 11 deletions
diff --git a/files/fr/web/css/basic-shape/index.html b/files/fr/web/css/basic-shape/index.html index 30bee0b07c..0205f6ff16 100644 --- a/files/fr/web/css/basic-shape/index.html +++ b/files/fr/web/css/basic-shape/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/basic-shape <div>{{EmbedInteractiveExample("pages/css/type-basic-shape.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> - <h2 id="Syntaxe">Syntaxe</h2> <p>Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <code><basic-shape></code>. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.</p> @@ -22,44 +20,47 @@ translation_of: Web/CSS/basic-shape <p>Les formes qui suivent sont prises en charge. Toutes les valeurs <code><basic-shape></code> sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à <a href="/fr/docs/Web/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs">cette page explicative</a>).</p> <dl> - <dt><code><a name="inset()"></a>inset()</code></dt> + <dt><code>inset()</code></dt> <dd> + <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p> <pre class="syntaxbox">inset( <shape-arg>{1,4} [round <border-radius>]? )</pre> - <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p> - <p>Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.</p> <p>L'argument facultatif <code><border-radius></code> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.</p> <p>Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.</p> </dd> - <dt><code><a name="polygon()"></a>polygon()</code></dt> + <dt><code>polygon()</code></dt> <dd> + <p>Définit un polygone.</p> <pre class="syntaxbox">polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</pre> <p><code><fill-rule></code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut pour cet argument est <code>nonzero</code>.</p> - <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>x<sub>i</sub></em> et <em>y<sub>i</sub></em> du i-ème sommet du polygone.</p> + <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>xi</em> et <em>yi</em> du i-ème sommet du polygone.</p> </dd> - <dt><code><a name="circle()"></a>circle(</code>)</dt> + <dt><code>circle(</code>)</dt> <dd> + <p>Définit un cercle.</p> <pre class="syntaxbox">circle( [<shape-radius>]? [at <position>]? )</pre> <p>L'argument <code><shape-radius></code> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence <code>sqrt(largeur^2+hauteur^2)/sqrt(2)</code>.</p> <p>L'argument {{cssxref("<position>")}} définit la position pour le centre du cercle. La valeur par défaut est <code>center</code>.</p> </dd> - <dt><code><a name="ellipse()"></a>ellipse()</code></dt> + <dt><code>ellipse()</code></dt> <dd> + <p>Définit une ellipse.</p> <pre class="syntaxbox">ellipse( [<shape-radius>{2}]? [at <position>]? )</pre> <p>Les arguments <code><shape-radius></code> représentent les demi-axes horizontaux (r<sub>x</sub>) et verticaux (r<sub>y</sub>) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.</p> <p>L'argument {{cssxref("<position>")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est <code>center</code>.</p> </dd> - <dt><code><a id="path()" name="path()"></a>path()</code></dt> + <dt><code>path()</code></dt> <dd> + <p>Définit un chemin.</p> <pre class="syntaxbox"><code>path( [<fill-rule>,]? <string>)</code></pre> <p>L'argument optionnel <code><fill-rule></code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>.</p> @@ -89,7 +90,7 @@ translation_of: Web/CSS/basic-shape <h2 id="L'interpolation_des_formes_simples">L'interpolation des formes simples</h2> -<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div> +<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc()">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div> <div> </div> |