initial commit

1 files changed, 130 insertions, 0 deletions

diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html
new file mode 100644
index 0000000000..33e7499059
--- /dev/null
+++ b/files/fr/web/css/mask-clip/index.html
@@ -0,0 +1,130 @@
+---
+title: mask-clip
+slug: Web/CSS/mask-clip
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-clip
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-clip</code></strong> définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;geometry-box&gt; */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* Valeurs avec un mot-clé */
+mask-clip: no-clip;
+
+/* Valeurs multiples */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* Mots-clés non-standards */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* Valeurs globales */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+</pre>
+
+<h2 id="Syntaxe_2">Syntaxe</h2>
+
+<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de contenu.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de <em>padding</em>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de bordure.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de marge.</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte contenant l'objet.</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte contenant le contour.</dd>
+ <dt><code>view-box</code></dt>
+ <dd>C'est le <em>viewport</em> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> est défini pour l'élément qui crée le <em>viewport</em>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut <code>viewBox</code>.</dd>
+ <dt><code>no-clip</code></dt>
+ <dd>La partie qui est « peinte » n'est pas rognée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[10]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-clip: border;
+  mask-clip: border-box;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "220px", "250px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-clip")}}</p>