diff options
Diffstat (limited to 'files/fr/web/css/mask-mode/index.md')
| -rw-r--r-- | files/fr/web/css/mask-mode/index.md | 91 |
1 files changed, 20 insertions, 71 deletions
diff --git a/files/fr/web/css/mask-mode/index.md b/files/fr/web/css/mask-mode/index.md index a6d59e866f..6e1515cfc9 100644 --- a/files/fr/web/css/mask-mode/index.md +++ b/files/fr/web/css/mask-mode/index.md @@ -1,16 +1,12 @@ --- title: mask-mode slug: Web/CSS/mask-mode -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-mode +browser-compat: css.properties.mask-mode --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété **`mask-mode`** détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence). +La propriété [CSS](/fr/docs/Web/CSS) **`mask-mode`** détermine si le masque défini par [`mask-image`](/fr/docs/Web/CSS/mask-image) est considéré comme un masque de luminance ou un masque alpha (transparence). ```css /* Valeurs avec un mot-clé */ @@ -24,6 +20,7 @@ mask-mode: alpha, match-source; /* Valeurs globales */ mask-mode: inherit; mask-mode: initial; +mask-mode: revert; mask-mode: unset; ``` @@ -34,85 +31,37 @@ La propriété `mask-mode` est définie avec un ou plusieurs mots-clés parmi ce ### Valeurs - `alpha` - - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque. + - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal d'opacité) qui sont utilisées comme valeurs de masque. - `luminance` - : Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque. - `match-source` - - : Si la propriété {{cssxref("mask-image")}} est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque. + - : Si la propriété [`mask-image`](/fr/docs/Web/CSS/mask-image) est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisées comme valeurs pour le masque. - Si elle est de type {{cssxref("<image>")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées. + Si elle est de type [`<image>`](/fr/docs/Web/CSS/image), ce seront les valeurs de transparence (canal alpha) qui seront utilisées. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples - -### Alpha - -#### CSS - -```css -#masked { - width: 100px; - height: 100px; - background: blue linear-gradient(red, blue); - -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-mode: alpha; - mask-mode: alpha; -} -``` - -#### HTML - -```html -<div id="masked"></div> -``` - -#### Résultat - -{{EmbedLiveSample("Alpha", "110px", "130px")}} - -### Luminance - -#### CSS +{{cssinfo}} -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -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-mode: luminance; - mask-mode: luminance; -} -``` +## Syntaxe formelle -#### HTML +{{csssyntax}} -```html -<div id="masked"></div> -``` +## Exemples -#### Résultat +### Utiliser le mode de masque alpha -{{EmbedLiveSample("Luminance", "110px", "130px")}} +{{EmbedGHLiveSample("css-examples/masking/mask-mode.html", '100%', 760)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-mode")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) |