diff options
Diffstat (limited to 'files/fr/web/css/offset/index.md')
-rw-r--r-- | files/fr/web/css/offset/index.md | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/files/fr/web/css/offset/index.md b/files/fr/web/css/offset/index.md new file mode 100644 index 0000000000..07d09681ff --- /dev/null +++ b/files/fr/web/css/offset/index.md @@ -0,0 +1,102 @@ +--- +title: offset +slug: Web/CSS/offset +tags: + - CSS + - Draft + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/offset +--- +<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>offset</code></strong> est une propriété raccourcie pour les propriétés {{cssxref("offset-path")}}, {{cssxref("offset-position")}}, {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}} et {{cssxref("offset-anchor")}}. Elle permet d'animer un élément sur un tracé défini.</p> + +<div class="note"> +<p><strong>Note :</strong> Dans les premières versions de la spécification, cette propriété était intitulée <code>motion</code>.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Position de décalage */ +offset: auto +offset: 10px 30px; +offset: none; + +/* Chemin de décalage */ +offset: ray(45deg closest-side); +offset: path(M 100 100 L 300 100 L 200 300 z); +offset: url(arc.svg); + +/* Chemin de décalage avec une distance et/ou */ +/* une rotation */ +offset: url(circle.svg) 100px; +offset: url(circle.svg) 40%; +offset: url(circle.svg) 30deg; +offset: url(circle.svg) 50px 20deg; + +/* Gestion d'une ancre de décalage */ +offset: ray(45deg closest-side) / 40px 20px; +offset: url(arc.svg) 2cm / 0.5cm 3cm; +offset: url(arc.svg) 30deg / 50px 100px; +</pre> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="offsetElement"></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@keyframes move { + from { + offset-distance: 0%; + } + + to { + offset-distance: 100%; + } +} + +#offsetElement { + width: 50px; + height: 50px; + background-color: blue; + offset: path("M 100 100 L 300 100 L 200 300 z") auto; + animation: move 3s linear infinite; +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 350, 350)}}</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-shorthand', 'offset')}}</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")}}</p> |