From c98a9b1cf02d9143cc6924f1991d600c0f807411 Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 30 Jun 2021 00:38:38 +0000 Subject: [CRON] sync translated content --- files/fr/web/css/paint()/index.html | 109 --------------------- .../css/transform-function/translatex/index.html | 109 --------------------- 2 files changed, 218 deletions(-) delete mode 100644 files/fr/web/css/paint()/index.html delete mode 100644 files/fr/web/css/transform-function/translatex/index.html (limited to 'files/fr/web/css') diff --git a/files/fr/web/css/paint()/index.html b/files/fr/web/css/paint()/index.html deleted file mode 100644 index a7340876f9..0000000000 --- a/files/fr/web/css/paint()/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: paint() -slug: Web/CSS/paint() -tags: - - CSS - - Fonction - - Houdini - - Reference - - Web -translation_of: Web/CSS/paint() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La fonction CSS paint() définit une {{cssxref("<image>")}} dont la valeur est générée par un PaintWorklet.

- -

Syntaxe

- -
paint(workletName, parameters)
- -

Paramètres

- -
-
workletName
-
Le nom du worklet enregistré.
-
parameters
-
Des paramètres supplémentaires optionnels, passés aux paintWorklet.
-
- -

Exemples

- -

Il est possible de passer des arguments supplémentaires grâce à la fonction CSS paint(). Dans cet exemple, on passe deux arguments : le premier indiquant si l'arrière-plan est rempli ou si on utilise juste son contour et le second indiquant la largeur de ce contour :

- - - - - -
li {
-   --boxColor: hsla(55, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 2px);
-}
-
-li:nth-of-type(3n) {
-   --boxColor: hsla(155, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, filled,  3px);
-}
-
-li:nth-of-type(3n+1) {
-   --boxColor: hsla(255, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 1px);
-}
- -

On a ici ajouté une propriété personnalisée dans le sélecteur du bloc. Ces propriétés personnalisées peuvent être manipulées par le PaintWorklet.

- -

{{EmbedLiveSample("Examples", 300, 300)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}{{Spec2('CSS Painting API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.image.paint")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/transform-function/translatex/index.html b/files/fr/web/css/transform-function/translatex/index.html deleted file mode 100644 index 76f583c665..0000000000 --- a/files/fr/web/css/transform-function/translatex/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: translateX() -slug: Web/CSS/transform-function/translateX -tags: - - CSS - - Fonction - - Reference - - Transformations CSS -translation_of: Web/CSS/transform-function/translateX ---- -
{{CSSRef}}
- -

La fonction translateX() permet de déplacer un élément horizontalement. Cette transformation est caractérisée par une longueur (type {{cssxref("<length>")}}) qui définit l'amplitude du mouvement horizontal. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.

- -

- -

translateX(tx) est une notation raccourcie équivalente à translate(tx, 0).

- -

Syntaxe

- -
translateX(t)
-
- -

Valeurs

- -
-
t
-
Une valeur de type {{cssxref("<length>")}} qui représente l'abscisse (la coordonnée en X) du vecteur de translation.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
-

Une translation n'est pas une transformation linéaire sur ℝ2 et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.

- 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
- -

Exemples

- -

HTML

- -
<p>toto</p>
-<p class="transformation">truc</p>
-<p>toto</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformation {
-  transform: translateX(10px);
-  background-color: blue;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","100%","250")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf