mask-origin - Propriété CSS
Résumé des caractéristiques de la propriété mask-origin
border-box
| content-box
| padding-box
| fill-box
| stroke-box
| view-box
border-box
mask-origin
passe d'une valeur à l'autre sans transition.Description de la propriété mask-origin
.
mask-origin
est une propriété récente encore en cours de définition par le W3C.
Avant de l'utiliser, vérifier sa compatibilité avec les navigateurs actuels, et doublez les syntaxes avec le préfixe -webkit-
.
Le masquage est une technique relativement récente, définie dans le module "CSS Masking" du W3C. Elle consiste à cacher certaines parties d'un élément en fonction d'une image désignée comme le masque. Le masquage peut être total ou partiel (semi-transparence).
La propriété mask-origin
définit la référence utilisée pour positionner le masque.
En gros, le positionnement se fait-il par rapport au contenu de l'élément, sa bordure ou ses marges ?
La propriété mask-position
définit la position du masque par rapport à cette référence.
Pour des explications plus complète sur le masquage, reportez-vous à la propriété raccourcie mask
.
Valeurs pour mask-origin
.
- mask-origin: content-box;
La position du masque est déterminée par rapport au contenu de l'élément.
- mask-origin: padding-box;
Le masque est positionné par rapport à la marge intérieure (
padding
) de l'élément. - mask-origin: border-box;
Le masque est positionné par rapport à la bordure de l'élément.
- mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;
Ces trois valeurs sont applicables aux éléments du type SVG.
- mask-origin:
initial
; mask-origin:inherit
; mask-origin:revert
; mask-origin:revert-layer
; mask-origin:unset
;La valeur initiale est :
.border-box
Animation de la propriété mask-origin
.
L'exemple ci-dessous est une animation de mask-origin
. Le résultat peut surprendre.
Il s'explique par le fait que le masque utilisé est un fichier SVG non dimensionné, donc qui s'adapte à la taille de l'élément.
Le masque est une ellipse et se répète : on voit apparaître des portions d'ellipse sur le contour.
mask-origin
Simulateur.
Le cadre ci-dessous comporte une bordure de 20 pixels et des marges intérieures de 20 pixels également.
Le masque est un fichier png
représentant une série de petits points. Il est appliqué une seule fois
( mask-repeat:no-repeat
).
Prise en charge par les navigateurs (compatibilité).
Les techniques de masquage et les propriétés en rapport sont maintenant bien prises en charge par les navigateurs actuels.
mask-origin
mask-origin
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-origin
.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask-origin
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.