`Mask-border-mode` - Propriété CSS

mask-border-mode

mask-border

Résumé des caractéristiques de la propriété `mask-border-mode`

Description rapide

Définit suivant quel paramètre le masque doit agir (luminance, alpha).

Statut

Problèmes de compatibilité ⚠

S'applique à

HTML : tous les éléments.
SVG : conteneurs sauf defs, éléments graphiques, use.

Valeurs prédéfinies

alpha | luminance

Pourcentages

Ne s'appliquent pas.

Valeur initiale

alpha

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété mask-border-mode passe d'une valeur à l'autre sans transition.

Ordre canonique

Single : valeur unique (l'ordre n'intervient pas).

Module W3C

Module CSS - Masquage

Références (W3C)

CSS Masking Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de `mask-border-mode`.

Schéma syntaxique de la propriété mask-border-mode.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma.

Description de la propriété `mask-border-mode`.

⚠

Le masquage des bords est mal pris en charge par les navigateurs. Il y a parfois une équivalence aux propriété standard avec les propriété propriétaires -webkit-mask-box-image-..., mais pour mask-border-mode il n'y a même pas d'équivalence.
Cette page sera prochainement complétée.

Le masquage des bords est une opération qui consiste à maquer le pourtour d'un élément à partir d'un masque qui est le souvent une image. Celle-ci est divisée en neuf zones: quatre pour les coins, quatre pour les bords et une une pour le centre de l'élément.

Le masque peut agir via son opacité (ou sa transparence) : lorsqu'il est transparent, l'élément est masqué, lorsqu'il est visible l'élément l'est aussi. Bien entendu toutes les nuances sont possible en fonction de la transparence du masque. Il est possible également de créer des masques qui agissent par leur luminance.

La propriété mask-border-mode indique si le masque agit par son canal alpha (la transparence) ou par sa luminance.

Voici les propriétés qui interviennent dans les masques de bords :

mask-border :

Propriété résumée. Définit tous les paramètres d'un masque pour les bords d'un élément.

mask-border-source :

Désigne l'image qui sera utilisée comme masque pour les bords de l'élément.

mask-border-slice :

Définit comment l'image utilisée comme masque de bords doit être découpée.

mask-border-width :

Définit l'épaisseur sur laquelle le masque de bords agit.

mask-border-outset :

Définit le décalage éventuel du masque de bords par rapport à l'élément.

mask-border-repeat :

Définit le mode de répétition du masque pour les bords de l'élément.

mask-border-mode :

Définit suivant quel paramètre le masque doit agir (luminance, alpha).

Valeurs pour `mask-border-mode`.

mask-border-mode: alpha;

C'est le canal alpha (la transparence du masque) qui est utilisé pour maquer ou non l'élément.
mask-border-mode: luminance;

Avec la valeur luminance, c'est la luminance du masque qui est utilisée pour masquer ou non l'élément.
mask-border-mode: initial; (alpha) mask-border-mode: inherit; mask-border-mode: revert; mask-border-mode: revert-layer; mask-border-mode: revert-rule; mask-border-mode: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemple d'animation de `mask-border-mode`.

Les animations de mask-border-mode sont théoriquement possibles mais ne fonctionnent pas pour l'instant, les navigateurs ne reconnaissant pas encore la propriété.

Exemple interactif avec la propriété `mask-border-mode`.

Le masque utilisé pour masquer l'élément est le suivant. Il est découpé en neuf parties égales de 20 pixels de côté par mask-border-slice. Les parties transparentes du masque apparaissent sur fond bleu. La différence de masquage entre le blanc et le noir n'apparaît pas en mode alpha. Par contre, en mode luminance c'est ce qui fait la différence.

mask-border-mode :

alpha

luminance

-webkit-mask-box-image-mode :

alpha

luminance

Cet élément ne contient que du texte.
Le fond bleu ciel est là pour bien visualiser l'effet de la propriété mask-border-mode.

Compatibilité des navigateurs avec `mask-border-mode`.

Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage des bords (2026). Pour la propriété mask-border-mode il n'y a pas d'équivalence, même avec un préfixe propriétaire.

Histoire de la propriété `mask-border-mode`.

Module CSS - Masquage - Niveau 1

Ce module de spécification décrit deux moyens pour cacher partiellement ou totalement des portions d'éléments visuels : le masquage et le rognage.
Le masquage consiste à utiliser un autre élément graphique ou une image comme masque.
Le rognage décrit la région visible des éléments visuels. La région peut être décrite en utilisant certains éléments graphiques SVG ou des formes simples. Tout ce qui se trouve en dehors de cette région n'est pas rendu.

Concernant mask-border-mode Introduction de la propriété mask-border-mode dans cette première version de la spécification.

15 Novembre 2012
Document de travail.
26 Août 2014
Candidat à la recommandation.

Voir aussi, au sujet des techniques de masquage.

La spécification qui standardise tout ce qui concerne le masquage s'appelle Module CSS - Masquage (Module CSS - Masquage). La propriété mask-border-mode y est décrite, ainsi que celles ci-dessous :