initial commit

5 files changed, 493 insertions, 0 deletions

diff --git a/files/fr/web/css/css_shapes/aperçu_formes_css/index.html b/files/fr/web/css/css_shapes/aperçu_formes_css/index.html
new file mode 100644
index 0000000000..bf8d674cf3
--- /dev/null
+++ b/files/fr/web/css/css_shapes/aperçu_formes_css/index.html
@@ -0,0 +1,125 @@
+---
+title: Aperçu des formes CSS
+slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Shapes
+  - Formes CSS
+translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p>
+
+<p>Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.</p>
+
+<p>Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.</p>
+
+<h2 id="Que_définit_la_spécification">Que définit la spécification ?</h2>
+
+<p>La spécification définit trois nouvelles propriétés :</p>
+
+<ul>
+ <li>{{cssxref("shape-outside")}} qui permet de définir des formes simples</li>
+ <li>{{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.</li>
+ <li>{{cssxref("shape-margin")}} définit une marge autour d'une forme</li>
+</ul>
+
+<h2 id="Définir_des_formes_simples">Définir des formes simples</h2>
+
+<p>La propriété <code>shape-outside</code> permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("&lt;basic-shape&gt;")}}. Prenons un exemple simple pour commencer.</p>
+
+<p>Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique <code>shape-outside</code> avec la valeur <code>circle(50%)</code>. Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<p>À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <code>&lt;basic-shape&gt;</code>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.</p>
+
+<h3 id="Formes_simples_(Basic_Shapes)">Formes simples (<em>Basic Shapes</em>)</h3>
+
+<p>La valeur <code>circle(50%)</code> est une exemple de forme simple. La spécification fournit quatre valeur de types <code>&lt;basic-shape&gt;</code> :</p>
+
+<ul>
+ <li><code>inset()</code></li>
+ <li><code>circle()</code></li>
+ <li><code>ellipse()</code></li>
+ <li><code>polygon()</code></li>
+</ul>
+
+<p>Avec la valeur <code>inset()</code>, le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.</p>
+
+<p>Nous avons vu le fonctionnement de <code>circle()</code> dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. <code>ellipse()</code> est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser <code>polygon()</code> afin de créer un polygone correspondant à une forme complexe.</p>
+
+<p>Dans <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">le guide sur les formes simples</a>, nous verrons comment créer et exploiter ces formes.</p>
+
+<h3 id="Boîtes_de_référence">Boîtes de référence</h3>
+
+<p>Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">modèle de boîte</a> et utiliser les valeurs :</p>
+
+<ul>
+ <li><code>border-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>content-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, vous pouvez modifier la valeur <code>border-box</code> afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}</p>
+
+<p>Pour en savoir plus, voir <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">le guide sur les formes et les boîtes</a>.</p>
+
+<h3 id="Générer_une_forme_à_partir_d'une_image">Générer une forme à partir d'une image</h3>
+
+<p>Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).</p>
+
+<p>Attention, les images utilisées ainsi doivent être <a href="/en-US/docs/Web/HTTP/CORS">compatibles avec les règles CORS</a>. Se n'est pass le cas, <code>shape-outside</code> se comportera comme si elle avait reçu la valeur <code>none</code> et il n'y aura alors aucune forme.</p>
+
+<p>Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour <code>shape-outside</code>. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}</p>
+
+<h4 id="shape-image-threshold"><code>shape-image-threshold</code></h4>
+
+<p>La propriété <code>shape-image-threshold</code> permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de <code>shape-image-threshold</code> est <code>0.0</code> (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur <code>1.0</code>, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.</p>
+
+<p>Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}</p>
+
+<p>Dans l'article <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Créer des formes à partir d'images</a>, nous verrons plus en détails le fonctionnement de ces propriétés.</p>
+
+<h2 id="La_propriété_shape-margin">La propriété <code>shape-margin</code></h2>
+
+<p>La propriété {{cssxref("shape-margin")}} ajoute une marge à <code>shape-outside</code>. Cela permet d'écarter le contenu de la forme.</p>
+
+<p>Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute <code>shape-margin</code>. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}</p>
+
+<h2 id="Utiliser_du_contenu_généré_comme_objet_flottant">Utiliser du contenu généré comme objet flottant</h2>
+
+<p>Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.</p>
+
+<p>Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}</p>
+
+<h2 id="Relations_avec_clip-path">Relations avec <code>clip-path</code></h2>
+
+<p>Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.</p>
+
+<p>Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  <code>shape-outside: ellipse(40% 50%);</code> puis utilisé <code>clip-path: ellipse(40% 50%);</code> afin de rogner l'image pour suivre la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}</p>
+
+<h2 id="Outils_de_développement_pour_les_formes_CSS">Outils de développement pour les formes CSS</h2>
+
+<p>Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : <a href="/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes">l'éditeur de chemin pour les formes (<em>Shape Path Editor</em>)</a>. Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.</p>
+
+<p>L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à <code>clip-path</code>. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à <code>shape-outside</code> à condition d'avoir activé la préférence <code>layout.css.shape-outside.enabled</code>.</p>
+
+<h2 id="Les_futures_fonctionnalités">Les futures fonctionnalités</h2>
+
+<p>Dans sa version initiale, le module de spécification pour les formes contenait une propriété <code>shape-inside</code> afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de <a href="https://drafts.csswg.org/css-shapes-2/">niveau 2</a>. La propriété <code>shape-inside</code> était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.</p>
diff --git a/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html b/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html
new file mode 100644
index 0000000000..5ed5b06bfa
--- /dev/null
+++ b/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html
@@ -0,0 +1,75 @@
+---
+title: Créer des formes à partir des boîtes
+slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
+tags:
+  - Boîtes
+  - CSS
+  - CSS Shapes
+  - Formes CSS
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/From_box_values
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p>
+
+<p>Les <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">valeurs de boîte</a> qui sont autorisées pour les formes sont :</p>
+
+<ul>
+ <li><code>content-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>border-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>Les valeurs <code>border-radius</code> sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.</p>
+
+<h2 id="Le_modèle_de_boîte_CSS">Le modèle de boîte CSS</h2>
+
+<p>Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (<em>content</em>), du remplissage (<em>padding</em>), une bordure (<em>border</em>) ainsi qu'une marge (<em>margin</em>).</p>
+
+<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p>
+
+<p>En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.</p>
+
+<h3 id="margin-box"><code>margin-box</code></h3>
+
+<p>La valeur <code>margin-box</code> correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.</p>
+
+<p>Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété <code>border-radius</code> a été utilisée afin de créer le cercle avec <code>border-radius: 50%</code>. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}</p>
+
+<h3 id="border-box"><code>border-box</code></h3>
+
+<p>La valeur <code>border-box</code> correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, <code>border-box</code> sera équivalent à <code>padding-box</code> et la forme suivra le bord extérieur de la boîte de remplissage.</p>
+
+<p>Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}</p>
+
+<h3 id="padding-box"><code>padding-box</code></h3>
+
+<p>La valeur <code>padding-box</code> correspond à la forme définie par le bord extérieur de la boîte de remplissage (<em>padding</em>). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, <code>padding-box</code> sera équivalent à <code>content-box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}</p>
+
+<h3 id="content-box"><code>content-box</code></h3>
+
+<p>La valeur <code>content-box</code> correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre <code>0</code> et <code>border-radius − border-width − padding</code>. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">cet article</a>.</p>
+</div>
+
+<h2 id="Quand_utiliser_les_valeurs_de_boîte">Quand utiliser les valeurs de boîte</h2>
+
+<p>Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété <code>border-radius</code>. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).</p>
+
+<p>Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur <code>border-radius</code> de 100% dans la direction la plus proche du texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
+
+<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">type <code>&lt;basic-shape&gt;</code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p>
diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/formes_simples/index.html
new file mode 100644
index 0000000000..e1c594bce0
--- /dev/null
+++ b/files/fr/web/css/css_shapes/formes_simples/index.html
@@ -0,0 +1,149 @@
+---
+title: Formes simples
+slug: Web/CSS/CSS_Shapes/Formes_simples
+tags:
+  - CSS
+  - CSS Shapes
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/Basic_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les formes CSS peuvent être définies grâce au type {{cssxref("&lt;basic-shape&gt;")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p>
+
+<p>Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :</p>
+
+<ul>
+ <li>Le type de donnée <code>&lt;basic-shape&gt;</code></li>
+ <li>La boîte de référence</li>
+</ul>
+
+<h2 id="Le_type_&lt;basic-shape>">Le type <code>&lt;basic-shape&gt;</code></h2>
+
+<p>Le type de donnée <code>&lt;basic-shape&gt;</code> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.</p>
+
+<p>Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.</p>
+
+<h2 id="La_boîte_de_référence">La boîte de référence</h2>
+
+<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p>
+
+<p>L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec <code>shape-outside: circle(50%)</code>, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du <a href="/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS">modèle de boîtes</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p>
+
+<p>La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) margin-box;
+}
+</pre>
+
+<p>On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) border-box;
+}
+</pre>
+
+<p>On notera que la boîte <code>margin-box</code> pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.</p>
+
+<p>Pour une description des boîtes et de leurs relations avec les formes CSS, voir <a href="http://razvancaliman.com/writing/css-shapes-reference-boxes/">Comprendre les liens entre les boîtes de référence et les formes CSS</a>.</p>
+
+<h2 id="inset()"><code>inset()</code></h2>
+
+<p>Le type <code>inset()</code> définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec <code>inset()</code>, on peut inclure des décalages et déplacer la forme autour de la boîte de référence.</p>
+
+<p><code>inset()</code> prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour <code>border-radius</code>. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle <code>border-radius</code> vaut 10 pixels.</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+</pre>
+
+<p>Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.</li>
+ <li>Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit</li>
+ <li>Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.</li>
+ <li>Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.</li>
+</ul>
+
+<p>Ainsi, la règle écrite ci-avant peut-être formulée :</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}</pre>
+
+<p>Dans l'exemple qui suit, on a une forme <code>inset()</code> qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}</p>
+
+<p>Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier <code>margin-box</code> afin d'utiliser <code>border-box</code>, <code>padding-box</code> ou <code>content-box</code> pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}</p>
+
+<h2 id="circle()"><code>circle()</code></h2>
+
+<p>La valeur <code>circle()</code> peut être utilisée pour <code>shape-outside</code> et prend jusqu'à deux argument. Le premier de ces arguments correspond à <code>shape-radius</code>.</p>
+
+<p>La fonction <code>circle()</code> et la fonction <code>ellipse()</code>, pour <code>shape-outside</code>, peuvent utiliser cet argument <code>&lt;shape-radius&gt;</code>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés <code>closest-side</code> ou <code>farthest-side</code>.</p>
+
+<p>Le mot-clé <code><strong>closest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.</p>
+
+<p>Le mot-clé <code><strong>farthest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.</p>
+
+<p>Le deuxième argument est une <code>position</code> dont la valeur par défaut est <code>center</code>. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.</p>
+
+<p>Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé <code>closest-side</code> ou <code>farthest-side</code>, optionnellement suivi par le mot-clé <code>at</code> suivi par une position.</p>
+
+<p>Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour <code>shape-radius</code>, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}</p>
+
+<p>Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.</p>
+
+<p>Ajoutons un autre exemple, en utilisant les mots-clés <code>top left</code> pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}</p>
+
+<h3 id="Limitation_à_la_boîte_de_marge">Limitation à la boîte de marge</h3>
+
+<p>Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.</p>
+
+<pre class="brush: css"><code>img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+</code></pre>
+
+<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p>
+
+<h2 id="ellipse()"><code>ellipse()</code></h2>
+
+<p>Une ellipse peut être vue comme un cercle aplati. De ce point de vu <code>ellipse()</code> fonctionne de façon analogue à <code>circle()</code> mais il est nécessaire d'indiquer deux rayons : un rayon horizontal <code>x</code> et un rayon vertical <code>y</code> (dans cet ordre).</p>
+
+<p>Ces rayons peuvent être suivis par une position qui permet, comme avec <code>circle()</code>, de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}</p>
+
+<p>Les mots-clés <code>closest-side</code> et <code>farthest-side</code> permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}</p>
+
+<h2 id="polygon()"><code>polygon()</code></h2>
+
+<p>La forme simple qui permet de créer une grande variété de formes est <code>polygon()</code>. Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.</p>
+
+<p>Dans l'exemple qui suit, on crée une forme avec <code>polygon()</code> pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}</p>
+
+<p>L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.</p>
+
+<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p>
+
+<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="http://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p>
diff --git a/files/fr/web/css/css_shapes/générer_formes_images/index.html b/files/fr/web/css/css_shapes/générer_formes_images/index.html
new file mode 100644
index 0000000000..e85db873c1
--- /dev/null
+++ b/files/fr/web/css/css_shapes/générer_formes_images/index.html
@@ -0,0 +1,64 @@
+---
+title: Générer des formes avec des images
+slug: Web/CSS/CSS_Shapes/Générer_formes_images
+tags:
+  - CSS
+  - Formes CSS
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p>
+
+<h2 id="Générer_une_forme_simple_avec_une_image">Générer une forme simple avec une image</h2>
+
+<p>Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.</p>
+
+<p>Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}</p>
+
+<p>On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}</p>
+
+<h2 id="Origines_et_compatibilité_CORS">Origines et compatibilité CORS</h2>
+
+<p>Attention, les images utilisées pour créer les formes doivent <a href="/fr/docs/Web/HTTP/CORS">être compatibles pour le CORS</a>. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.</p>
+
+<h3 id="Ai-je_à_faire_à_un_problème_de_CORS">Ai-je à faire à un problème de CORS ?</h3>
+
+<p>Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.</p>
+
+<h2 id="Utiliser_un_seuil">Utiliser un seuil</h2>
+
+<p>La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si <code>shape-image-threshold</code> vaut <code>0.0</code> (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur <code>1.0</code> est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.</p>
+
+<p>Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise <code>shape-image-threshold</code> avec la valeur <code>0.3</code>, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à <code>0.2</code>, on aura une forme rectangulaire.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}</p>
+
+<h2 id="Utiliser_des_images_avec_du_contenu_généré">Utiliser des images avec du contenu généré</h2>
+
+<p>Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété <code>shape-outside</code> ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.</p>
+
+<p>Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}</p>
+
+<h2 id="Créer_des_formes_avec_un_dégradé">Créer des formes avec un dégradé</h2>
+
+<p>En CSS, <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">un dégradé</a> est une image. On peut donc utiliser un dégradé afin de générer une forme.</p>
+
+<p>Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.</p>
+
+<p>Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}</p>
+
+<p>Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}</p>
+
+<p>Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.</p>
diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..485385aa10
--- /dev/null
+++ b/files/fr/web/css/css_shapes/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - Aperçu
+  - CSS
+  - CSS Shapes
+  - Reference
+translation_of: Web/CSS/CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Shapes</strong></em> est un module de spécification CSS qui décrit les formes géométriques. <a href="https://drafts.csswg.org/css-shapes/">Selon le niveau 1 de cette spécification</a>, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété <code>shape-outside</code> qui lui est appliquée vaut <code>circle(50%)</code>. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS (<em>CSS Shapes</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Les formes appliquées aux différentes boîtes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Des formes simples</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Des formes à partir d'images</a></li>
+ <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les contours d'une forme en CSS dans Firefox </a></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">Une liste de ressources sur les formes CSS (en anglais)</a></li>
+ <li><a href="https://alistapart.com/article/css-shapes-101"><em>CSS Shapes 101</em> (en anglais)</a></li>
+ <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes (en anglais)</a></li>
+ <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498"><em>How To Use CSS Shapes In Your Web Design</em> (en anglais)</a></li>
+ <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/"><em>How To Get Started With CSS Shapes</em> (en anglais)</a></li>
+ <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5"><em>What I Learned In One Weekend With CSS Shapes</em> (en anglais)</a></li>
+ <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/"><em>CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</em> (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("CSS Shapes")}}</td>
+   <td>{{Spec2("CSS Shapes")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>