diff options
Diffstat (limited to 'files/fr/web/css/mask-position')
| -rw-r--r-- | files/fr/web/css/mask-position/index.md | 105 |
1 files changed, 47 insertions, 58 deletions
diff --git a/files/fr/web/css/mask-position/index.md b/files/fr/web/css/mask-position/index.md index 43d8db0a4a..e249dbfe7b 100644 --- a/files/fr/web/css/mask-position/index.md +++ b/files/fr/web/css/mask-position/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/mask-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>mask-position</code></strong> indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}.</p> +La propriété **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}. -<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ mask-position: top; mask-position: bottom; mask-position: left; @@ -20,11 +21,11 @@ mask-position: right; mask-position: center; /* Valeurs en pourcentage */ -/* Type <percentage> */ +/* Type <percentage> */ mask-position: 25% 75%; /* Valeurs en longueur */ -/* Type <length> */ +/* Type <length> */ mask-position: 0px 0px; mask-position: 1cm 2cm; mask-position: 10ch 8em; @@ -36,26 +37,25 @@ mask-position: 0px 0px, center; mask-position: inherit; mask-position: initial; mask-position: unset; -</pre> +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code><position></code></dt> - <dd>Une position CSS (type {{cssxref("<position>")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.</dd> -</dl> +- `<position>` + - : Une position CSS (type {{cssxref("<position>")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">#wrapper { +```css +#wrapper { border: 1px solid black; width: 250px; height: 250px; @@ -70,55 +70,44 @@ mask-position: unset; mask-position: top right; /* Can be changed in the live sample */ margin-bottom: 10px; } -</pre> - -<pre class="brush: html hidden"><div id="wrapper"> - <div id="masked"> - </div> -</div> -<select id="maskPosition"> - <option value="top">top</option> - <option value="center">center</option> - <option value="bottom">bottom</option> - <option value="top right" selected>top right</option> - <option value="center center">center center</option> - <option value="bottom left">bottom left</option> - <option value="10px 20px">10px 20px</option> - <option value="60% 20%">60% 20%</option> -</select> -</pre> - -<pre class="brush: js hidden">var maskPosition = document.getElementById("maskPosition"); +``` + +```html hidden +<div id="wrapper"> + <div id="masked"> + </div> +</div> +<select id="maskPosition"> + <option value="top">top</option> + <option value="center">center</option> + <option value="bottom">bottom</option> + <option value="top right" selected>top right</option> + <option value="center center">center center</option> + <option value="bottom left">bottom left</option> + <option value="10px 20px">10px 20px</option> + <option value="60% 20%">60% 20%</option> +</select> +``` + +```js hidden +var maskPosition = document.getElementById("maskPosition"); maskPosition.addEventListener("change", function (evt) { document.getElementById("masked").style.maskPosition = evt.target.value; }); -</pre> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples",200,200)}}</p> +{{EmbedLiveSample("Exemples",200,200)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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-position", "mask-position")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName("CSS Masks", "#the-mask-position", "mask-position")}} | {{Spec2("CSS Masks")}} | Définition initiale. | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.mask-position")}}</p> +{{Compat("css.properties.mask-position")}} |