initial commit

1 files changed, 152 insertions, 0 deletions

diff --git a/files/fr/web/css/offset-anchor/index.html b/files/fr/web/css/offset-anchor/index.html
new file mode 100644
index 0000000000..2d8f3f0ee5
--- /dev/null
+++ b/files/fr/web/css/offset-anchor/index.html
@@ -0,0 +1,152 @@
+---
+title: offset-anchor
+slug: Web/CSS/offset-anchor
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/offset-anchor
+---
+<div>{{cssref}}{{seecompattable}}</div>
+
+<p>La propriété CSS <strong><code>offset-anchor</code></strong> définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un movalues */
+offset-anchor: top;
+offset-anchor: bottom;
+offset-anchor: left;
+offset-anchor: right;
+offset-anchor: center;
+offset-anchor: auto;
+
+/* Valeurs de pourcentages */
+/* Type &lt;percentage&gt; */
+offset-anchor: 25% 75%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+offset-anchor: 0 0;
+offset-anchor: 1cm 2cm;
+offset-anchor: 10ch 8em;
+
+/* Valeurs de décalage relatives à un bord */
+offset-anchor: bottom 10px right 20px;
+offset-anchor: right 3em bottom 10px;
+
+/* Valeurs globales */
+offset-anchor: inherit;
+offset-anchor: initial;
+offset-anchor: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><code>offset-anchor</code> reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut <code>none</code>, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position ({{cssxref("&lt;position&gt;")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("&lt;position&gt;")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <code>&lt;position&gt;</code>, excepté pour <code>background(-position)</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <code>&lt;div&gt;</code> se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur <code>offset-anchor</code> différentes.</p>
+
+<p>Chaque élément <code>&lt;section&gt;</code> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.</p>
+
+<p>On peut voir que la première valeur, <code>auto</code>, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <code>&lt;div&gt;</code> par le coin supérieur droit et le coin inférieur gauche respectivement.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;section&gt;
+  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor1</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;
+&lt;/section&gt;
+&lt;section&gt;
+</span><span class="tag token"><span class="punctuation token">  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor2</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;
+&lt;/section&gt;
+&lt;section&gt;
+</span><span class="tag token"><span class="punctuation token">  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor3</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code>
+&lt;/section&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  offset-path: path('M 0,20 L 200,20');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+}
+
+section {
+  background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+}
+
+.offset-anchor1 {
+  offset-anchor: auto;
+  background: cyan;
+}
+
+.offset-anchor2 {
+  offset-anchor: right top;
+  background: purple;
+}
+
+.offset-anchor3 {
+  offset-anchor: left bottom;
+  background: magenta;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '300')}}</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-anchor-property', 'offset-anchor')}}</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>
+
+<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.properties.offset-anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-rotation")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">L'élément SVG <code>&lt;path&gt;</code></a></li>
+</ul>