mask-mode - Propriété CSS
Résumé des caractéristiques de la propriété mask-mode
match-source
| alpha
| luminance
match-source
mask-mode
passe d'une valeur à l'autre sans transition.Description de la propriété mask-mode
.
mask-mode
n'est pas reconnue par tous les navigateurs. Chrome et Edge par exemple ne traitent que les maques
du type alpha
.
Le masquage consiste à cacher certaines parties d'un élément d'après un masque. Ce dernier peut être une image ou un fichier SVG.
La propriété mask-mode
définit le type de masquage. Autrement dit, quelle est l'information du masque qui sera utilisée.
Cela peut être la transparence ou la luminance.
Reportez-vous à la propriété mask
pour des explications plus complètes sur la technique de masquage.
Valeurs pour mask-mode
.
- mask-mode: alpha;
C'est le canal alpha, c'est à dire la transparence du masque qui est utilisée : l'élément masqué sera visible seulement dans les parties non transparentes du masque. Bien entendu c'est un traitement proportionnel : le masque peut comporter des parties plus ou moins transparentes ; la visibilité de l'élément sera ajustée en fonction.
Cela suppose donc un masque dans un format capable de traiter la transparence : png, gif, svg...
Le masque est un dégradé depuis la transparence vers le noir.AAAL'élément masqué est visible en fonction de la transparence du masque.
Le masque est un dégradé depuis le blanc vers le noir,
autrement dit totalement opaque.AAAL'élément auquel on applique le masque est visible en totalité puisque le masque ne comporte pas de parties transparentes.
- mask-mode: luminance;
C'est la luminance du masque qui est utilisée. Autrement dit, l'élément deviendra invisible dans les zones où le masque est noir ; l'élément sera inchangé dans les zones où le masque est blanc. Les zones de luminosité intermédiaire du masque rendront l'élément plus ou moins transparent.
Néanmoins, les parties transparentes du masque continuent de jouer leur rôle, comme c'est le cas avec la valeur
alpha
. La valeurluminance
applique donc un masque qui combine les valeurs de transparence et de luminance.
Le masque est un dégradé depuis le blanc vers le noir.AAAL'élément masqué est visible en fonction de la luminance du masque.
⚠ Remarque : cet exemple ne fonctionne pas sur Chrome, ni sur Edge. - mask-mode: match-source;
Le choix
alpha
ouluminance
est fait en fonction du type du masque. Les fichiers SVG comportant la balise mask peuvent être typés avec la propriétémask-type
. C'est cette information qui est utilisée pour déterminer le type de masquage à employer. - mask-mode: alpha, alpha, luminance...;
Plusieurs valeurs séparées par une virgule. Cette syntaxe est utilisable lorsque plusieurs masques sont appliqués sur un même élément. Chacune des valeurs correspond alors à l'un des masques.
Reportez-vous à la page sur les masques multiples pour de plus amples informations.
- mask-mode:
initial
; mask-mode:inherit
; mask-mode:revert
; mask-mode:revert-layer
; mask-mode:unset
;La valeur initiale est :
.match-source
Animation de la propriété mask-mode
.
⚠ Cette animation ne fonctionnera pas sur tous les navigateurs puisque certains d'entre eux ne traitent pas la propriété mask-mode
.
Le masque est construit avec un dégradé radial répétitif (fonction repeating-radial-gradient()
.
Simulateur.
L'élément original
Le masque
Le résultat
L'élément original
Le masque
Le résultat
Prise en charge par les navigateurs (compatibilité).
mask-mode
mask-mode
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que mask-mode
.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask-mode
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.