Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

mask-origin - Propriété CSS

mask-origin

Résumé des caractéristiques de la propriété mask-origin

Description rapide
Définit la référence pour le positionnement du masque.
Statut
Standard
Valeurs prédéfinies
border-box | content-box | padding-box | fill-box | stroke-box | view-box
Pourcentages
Ne s'appliquent pas.
Valeur initiale
border-box
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété mask-origin passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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.

Animation de la propriété mask-origin
/section>

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 ).

mask-origin :
Le cadre ci-dessous comporte une bordure et des marges intérieures de 20 pixels. Le masque est une image représentant une série de petits points. Il n'est pas répété

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.

Colonne 1
Support par les navigateurs des techniques de masquage, consistant à découper un élément d'après une image ou une forme géométrique.
Colonne 2
Support de la propriété CSS mask-origin
1
Masking
2
mask-origin
Estimation de la prise en charge en pourcentage du parc actuel.
73%
95%

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.

Propriétés.

Définit la partie visible de l'élément (découpage).
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Définit comment gérer les formes creuses.
Résumé des paramètres de masquage.
Définit tous les paramètres d'un masque pour la bordure d'un élément.
Définit comment le masque doit agir (luminance, alpha).
Définit le décalage éventuel du masque de bordure éventuel par rapport à l'élément.
Définit le mode de répétition du masque.
Définit comment l'image utilisée comme masque doit être découpée.
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
Définit l'épaisseur de la bordure pour l'application d'un masque.
Définit la zone concernée par le masquage.
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Définit le mode de masquage (couche alpha, luminance...)
Position du masque.
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
Fixe les dimensions du masque.