From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/offset-anchor/index.md | 110 +++++++++++++++----------------- 1 file changed, 50 insertions(+), 60 deletions(-) (limited to 'files/fr/web/css/offset-anchor') diff --git a/files/fr/web/css/offset-anchor/index.md b/files/fr/web/css/offset-anchor/index.md index 8d0243dfcc..80bbff84c8 100644 --- a/files/fr/web/css/offset-anchor/index.md +++ b/files/fr/web/css/offset-anchor/index.md @@ -7,13 +7,14 @@ tags: - Reference translation_of: Web/CSS/offset-anchor --- -
{{cssref}}{{seecompattable}}
+{{cssref}}{{seecompattable}} -

La propriété CSS offset-anchor 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")}}.

+La propriété CSS **`offset-anchor`** 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")}}. -

Syntaxe

+## Syntaxe -
/* Valeurs avec un movalues */
+```css
+/* Valeurs avec un movalues */
 offset-anchor: top;
 offset-anchor: bottom;
 offset-anchor: left;
@@ -22,11 +23,11 @@ offset-anchor: center;
 offset-anchor: auto;
 
 /* Valeurs de pourcentages */
-/* Type <percentage> */
+/* Type  */
 offset-anchor: 25% 75%;
 
 /* Valeurs de longueur */
-/* Type <length> */
+/* Type  */
 offset-anchor: 0 0;
 offset-anchor: 1cm 2cm;
 offset-anchor: 10ch 8em;
@@ -38,45 +39,46 @@ offset-anchor: right 3em bottom 10px;
 /* Valeurs globales */
 offset-anchor: inherit;
 offset-anchor: initial;
-offset-anchor: unset;
+offset-anchor: unset; +``` -

Valeurs

+### Valeurs -
-
auto
-
offset-anchor reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut none, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.
-
<position>
-
Une position ({{cssxref("<position>")}}) 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("<position>")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <position>, excepté pour background(-position).
-
+- `auto` + - : `offset-anchor` reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut `none`, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}. +- `` + - : Une position ({{cssxref("<position>")}}) 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("<position>")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour ``, excepté pour `background(-position)`. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <div> 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 offset-anchor différentes.

+Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque `
` 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 `offset-anchor` différentes. -

Chaque élément <section> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.

+Chaque élément `
` a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin. -

On peut voir que la première valeur, auto, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <div> par le coin supérieur droit et le coin inférieur gauche respectivement.

+On peut voir que la première valeur, `auto`, déplace l'élément sur son centre. La deuxième et la troisième déplacent le `
` par le coin supérieur droit et le coin inférieur gauche respectivement. -

HTML

+### HTML -
<section>
-  <div class="offset-anchor1"></div>
-</section>
-<section>
-  <div class="offset-anchor2"></div>
-</section>
-<section>
-  <div class="offset-anchor3"></div>
-</section>
-
+```html +
+
+
+
+
+
+
+
+
+``` -

CSS

+### CSS -
div {
+```css
+div {
   offset-path: path('M 0,20 L 200,20');
   animation: move 3000ms infinite alternate ease-in-out;
   width: 40px;
@@ -111,40 +113,28 @@ section {
   100% {
     offset-distance: 100%;
   }
-}
+} +``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples', '100%', '300')}}

+{{EmbedLiveSample('Exemples', '100%', '300')}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.offset-anchor")}}

+{{Compat("css.properties.offset-anchor")}} -

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("offset")}}
    • -
  • {{cssxref("offset-distance")}}
    • -
  • {{cssxref("offset-rotation")}}
    • -
  • L'élément SVG <path>
    • -
+- {{cssxref("offset")}} +- {{cssxref("offset-distance")}} +- {{cssxref("offset-rotation")}} +- [L'élément SVG ``](/fr/docs/Web/SVG/Tutorial/Paths) -- cgit v1.2.3-54-g00ecf