diff options
Diffstat (limited to 'files/fr/web/css/mask-composite/index.html')
-rw-r--r-- | files/fr/web/css/mask-composite/index.html | 109 |
1 files changed, 0 insertions, 109 deletions
diff --git a/files/fr/web/css/mask-composite/index.html b/files/fr/web/css/mask-composite/index.html deleted file mode 100644 index 33b5bc3f26..0000000000 --- a/files/fr/web/css/mask-composite/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: mask-composite -slug: Web/CSS/mask-composite -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/mask-composite ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La propriété <strong><code>mask-composite</code></strong> permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.</p> - -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé*/ -mask-composite: add; -mask-composite: subtract; -mask-composite: intersect; -mask-composite: exclude; - -/* Valeurs globales */ -mask-composite: inherit; -mask-composite: initial; -mask-composite: unset; -</pre> - -<h2 id="Syntaxe">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> - -<p>La couche du masque de l'élément est appelée <em>source</em> et les couches inférieures sont appelées <em>destination</em>.</p> - -<dl> - <dt><code>add</code></dt> - <dd>La source est placée sur la destination.</dd> - <dt><code>subtract</code></dt> - <dd>La source est placée lorsque la destination est vide à cet endroit.</dd> - <dt><code>intersect</code></dt> - <dd>Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.</dd> - <dt><code>exclude</code></dt> - <dd>Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -{{csssyntax}} - -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg), - url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg), - url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-size: 100% 100%; - -webkit-mask-composite: add; - mask-composite: add; /* peut-être modifiée dans la démo */ -} -</pre> - -<pre class="brush: html hidden"><div id="masked"> -</div> -<select id="compositeMode"> - <option value="add">add</option> - <option value="subtract">subtract</option> - <option value="intersect">intersect</option> - <option value="exclude">exclude</option> -</select> -</pre> - -<pre class="brush: js hidden">var clipBox = document.getElementById("compositeMode"); -clipBox.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskClip = evt.target.value; -}); -</pre> - -<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</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-composite", "mask-composite")}}</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> - -<p>{{Compat("css.properties.mask-composite")}}</p> |