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/shape/index.md | 106 ++++++++++++++++------------------------ 1 file changed, 43 insertions(+), 63 deletions(-) (limited to 'files/fr/web/css/shape') diff --git a/files/fr/web/css/shape/index.md b/files/fr/web/css/shape/index.md index ced200af32..85282929be 100644 --- a/files/fr/web/css/shape/index.md +++ b/files/fr/web/css/shape/index.md @@ -8,85 +8,65 @@ tags: - Type translation_of: Web/CSS/shape --- -
{{CSSRef}}{{deprecated_header}}
+{{CSSRef}}{{deprecated_header}} -

Le type de donnée CSS <shape> permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme {{cssxref("clip")}} s'appliquent. Ce type de donnée a été déprécié pour être remplacé par {{cssxref("<basic-shape>")}}.

+Le type de donnée CSS **``** permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme {{cssxref("clip")}} s'appliquent. Ce type de donnée a été déprécié pour être remplacé par {{cssxref("<basic-shape>")}}. -
-

Note : <shape> et rect() fonctionnent avec la propriété {{cssxref("clip")}} qui a été dépréciée pour être remplacée par {{cssxref("clip-path")}}. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type {{cssxref("<basic-shape>")}} à la place.

-
+> **Note :** `` et `rect()` fonctionnent avec la propriété {{cssxref("clip")}} qui a été dépréciée pour être remplacée par {{cssxref("clip-path")}}. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type {{cssxref("<basic-shape>")}} à la place. -

Syntaxe

+## Syntaxe -

Les valeurs de type <shape> sont construites grâce à la notation fonctionnelle rect() qui permet de créer une zone en forme de rectangle.

+Les valeurs de type `` sont construites grâce à la notation fonctionnelle `rect()` qui permet de créer une zone en forme de rectangle. -
rect(haut, droite, bas, gauche)
-
+ rect(haut, droite, bas, gauche) -

Valeurs

+#### Valeurs -

rect.png

+![rect.png](rect.png) -
-
haut
-
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.
-
+- `haut` + - : Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément. -
-
droite
-
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.
-
+ -
-
bas
-
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.
-
+- `droite` + - : Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément. -
-
gauche
-
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.
-
+ -

Interpolation

+- `bas` + - : Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément. -

Les valeurs de type <shape> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs haut, droite, bas et gauche comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à la fonction de temporisation associée à l'animation.

+ -

Exemples

+- `gauche` + - : Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément. -

Exemple illustrant un usage correct de la fonction rect()

+## Interpolation -
+Les valeurs de type `` sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs `haut`, `droite`, `bas` et `gauche` comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à [la fonction de temporisation](/fr/docs/Web/CSS/easing-function) associée à l'animation.
+
+## Exemples
+
+### Exemple illustrant un usage correct de la fonction rect()
+
+```css
 img.clip04 {
   clip: rect(10px, 20px, 20px, 10px);
 }
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}Définition avec la propriété {{cssxref("clip")}}.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.shape")}}

- -

Voir aussi

- -
    -
  • {{cssxref("clip")}}
    • -
  • La fonction spécifique à Gecko {{cssxref("-moz-image-rect()")}}
    • -
+``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------ | +| {{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}} | {{Spec2('CSS2.1')}} | Définition avec la propriété {{cssxref("clip")}}. | + +## Compatibilité des navigateurs + +{{Compat("css.types.shape")}} + +## Voir aussi + +- {{cssxref("clip")}} +- La fonction spécifique à Gecko {{cssxref("-moz-image-rect()")}} -- cgit v1.2.3-54-g00ecf