move *.html to *.md

1 files changed, 0 insertions, 175 deletions

diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html
deleted file mode 100644
index 3a3b342f15..0000000000
--- a/files/fr/web/css/offset-path/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: offset-path
-slug: Web/CSS/offset-path
-tags:
-  - CSS
-  - Propriété
-  - Reference
-translation_of: Web/CSS/offset-path
----
-<div>{{SeeCompatTable}}{{CSSRef}}</div>
-
-<p>La propriété <code><strong>offset</strong></code><strong><code>-path</code></strong> définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div>
-
-<p>Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.</p>
-
-<p>La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée <code>0</code> de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Dans des versions antérieures des spécifications, cette propriété était intitulée <code>motion-path</code>. Le nom a été modifié en <code>offset-path</code> afin de décrire un chemin statique plutôt qu'un chemin en mouvement.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css">/* Valeur par défaut */
-offset-path: none;
-
-/* Valeurs avec une notation fonctionnelle */
-offset-path: ray(45deg closest-side contain);
-
-/* URL */
-offset-path: url(#path);
-
-/* Formes */
-offset-path: circle(50% at 25% 25%);
-offset-path: inset(50% 50% 50% 50%);
-offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
-offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
-
-/* Boîtes géométriques */
-offset-path: margin-box;
-offset-path: stroke-box;
-
-/* Valeurs globales */
-offset-path: inherit;
-offset-path: initial;
-offset-path: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<div class="warning">
-  <p><strong>Attention :</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</p>
-</div>
-
-<dl>
- <dt><code>ray()</code></dt>
- <dd>Cette notation fonctionnelle prend jusqu'à trois valeurs et définit un chemin qui est un ligne commençant à la position de la boîte et qui suit la direction de l'angle indiqué (la valeur 0deg correspond à une direction verticale, vers le haut et les angles allant dans le sens horaire). La valeur de la taille est définie de façon semblable à celle utilisée pour les dégradés entre <code>closest-side</code> et <code>farthest-corner</code> avec le mot-clé <code>contain</code>.</dd>
- <dt><code>url()</code></dt>
- <dd>Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code> ou <code>rect</code> et d'utiliser la géométrie de la forme visée pour construire le chemin.</dd>
- <dt><code>&lt;basic-shape&gt;</code></dt>
- <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>.
- <dl>
-  <dt><code>path()</code></dt>
-  <dd>Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.</dd>
- </dl>
- </dd>
- <dt><code>none</code></dt>
- <dd>Aucun chemin de mouvement n'est indiqué.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
-
-{{csssyntax}}
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit est tiré de <a href="https://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code>&lt;path&gt;</code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">.scissorHalf {
-  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
-  animation: followpath 4s linear infinite;
-}
-
-@keyframes followpath {
-   to {
-     motion-offset: 100%;
-     offset-distance: 100%;
-   }
-}</pre>
-
-<h3 id="SVG">SVG</h3>
-
-<p>Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec <code>offset-path</code>.</p>
-
-<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg"
-     width="700"
-     height="450"
-     viewBox="350 0 1400 900"&gt;
-  &lt;title&gt;House and Scissors&lt;/title&gt;
-  &lt;rect x="595"
-        y="423"
-        width="610"
-        height="377"
-        fill="blue" /&gt;
-  &lt;polygon points="506,423 900,190 1294,423"
-           fill="yellow" /&gt;
-  &lt;polygon points="993,245 993,190 1086,190 1086,300"
-           fill="red" /&gt;
-  &lt;path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
-        fill="none"
-        stroke="black"
-        stroke-width="13"
-        stroke-linejoin="round"
-        stroke-linecap="round" /&gt;
-  &lt;path id="firstScissorHalf" class="scissorHalf"
-        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
-        transform="translate(0,0)"
-        fill="green"
-        stroke="black"
-        stroke-width="5"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill-rule="evenodd" /&gt;
-  &lt;path id="secondScissorHalf" class="scissorHalf"
-        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
-        transform="translate(0,0)"
-        fill="forestgreen"
-        stroke="black"
-        stroke-width="5"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill-rule="evenodd" /&gt;
-&lt;/svg&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', '450')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.offset-path")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("offset")}}</li>
- <li>{{cssxref("offset-distance")}}</li>
- <li>{{cssxref("offset-rotation")}}</li>
- <li>{{cssxref("offset-anchor")}}</li>
- <li>{{cssxref("offset-position")}}</li>
- <li>{{SVGElement("path")}}</li>
-</ul>