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-position - Propriété CSS

mask-position

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

Description rapide
Position du masque.
Statut
Standard
Valeurs prédéfinies
left | center | right | top | bottom
Pourcentages
Calculés par rapport à la dimension de la zone de masquage moins la dimension de l'image.
Valeur initiale
0% 0%
Héritée par défaut
Non
Type d'animation
Repeatable list : liste répétable.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

Description de la propriété mask-position.

La propriété mask-position n'est pas encore reconnue par tous les navigateurs (2022), comme toutes celles qui gèrent les techniques de masquage. Doublez la syntaxe avec -webkit-mask-position pour améliorer la compatibilité avec Chrome, Edge, et d'autres navigateurs.

La technique de masquage consiste à cacher (entièrement ou partiellement) certaines parties d'un élément en fonction d'une image ou d'un fichier SVG choisi comme étant le masque.

Définit comment est positionné le masque par rapport à l'élément qu'il doit masquer. Ce positionnement se fait par rapport à une référence qui est définie par mask-origin (bordure de l'élément son contenu, etc). mask-position est en fait une propriété raccourcie qui est équivalent aux deux propriétés suivantes:

  • mask-position-x : position horizotnale du masque .
  • mask-position-y : position verticale du masque .

Pour des explications plus complètes sur la technique de masquage, reportez-vous à la propriété mask.
Voyez aussi la propriété mask-origin qui influence également le positionnement du masque.

Valeurs pour mask-position.

  • mask-position: left bottom; x y

    mask-position accepte deux valeurs, séparées par un espace. La première valeur (x) indique le positionnement horizontal du masque, et la deuxième (y) son positionnement vertical.

    Ce positionnement est dans tous les cas, calculé par rapport à l'origine définie par mask-origin.

    La valeur x peut être left, center ou right.
    La valeur y peut être top, center ou bottom.

    Si une seule valeur est indiquée, l'autre est fixée par défaut à center.

  • mask-position: 50px 25px; x y

    Le positionnement du masque peut également être indiqué par des valeurs numériques, suivies d'une unité de dimension (voir les unités CSS de dimension). Ces valeurs peuvent être positives ou négatives.

    S'il s'agit de pourcentages, il seront calculés, pour x par rapport à la largeur de l'élément, et par rapport à sa hauteur pour le pourcentage y. Le calcul prend en compte les dimensions du masque, de façon à ce que 50% corresponde à un masque centré.

    Pour le positionnement horizontal du masque, la formule est la suivante :
    x% x (L - l)
    x% est le pourcentage indiqué.
    L est la largeur de l'élément.
    l est la largeur du masque.

    Exemple pour un élément qui mesure 800 pixels de large et un masque de 50 pixels de large. Si le positionnement est demandé à 50%, le bord gauche du masque sera à 375 pixels (et non pas 400) :
    50% x (800 - 50) = 375 pixels.

    Si une seule valeur est indiquée, elle est appliquée au positionnement horizontal du masque. Son positionnement vertical est fixé à la valeur center.

  • mask-position: right 20px bottom 10px; x y

    Cette syntaxe permet de positionner le masque par rapport à un quelconque des côtés, et non pas forcément par rapport au bord gauche et au bord du haut.

    Notre exemple signifie que le masque doit être positionné à 20 pixels du bord droit et à 10 pixels du bord du bas.

  • mask-position: center bottom, left center; x1 y1 x2 y2

    Lorsque plusieurs séries de valeurs sont énumérées en les séparant par des virgules. Elles s'appliquent chacune à un masque différent. Cette syntaxe peut être employée lorsque plusieurs masques sont appliqués à un élément. Pour plus d'informations, reportez-vous à la page sur les masques multiples en CSS.

  • mask-position: initial; mask-position: inherit; mask-position: revert; mask-position: revert-layer; mask-position: unset;

    La valeur initiale est : 0% 0%.

Animation de la propriété mask-position.

La propriété mask-position peut être animée de façon très fluide. Sur cet exemple, un masque circulaire dévoile successivement toutes les parties de l'image.

Exemple d'animation de la propriété mask-position

Simulateur.


mask-origin :

mask-position-x :
mask-position-y :

Exemple - propriété CSS mask-position
L'élément original : une image avec une marge intérieure (padding) et une bordure


Masque - propriété CSS mask-position




Le masque
Résultat - propriété CSS mask-position
Le résultat

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie en français « feuilles de styles en cascade ». Le CSS correspond est un langage déclaratif (non algorithmique) permettant de mettre en forme et de mettre en page des documents HTML ou XML.

L'élément original : un texte, avec une marge intérieure (padding) et une bordure



Masque - propriété CSS mask-position



Le masque

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie en français « feuilles de styles en cascade ». Le CSS correspond est un langage déclaratif (non algorithmique) permettant de mettre en forme et de mettre en page des documents HTML ou XML.


Le résultat

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Compatibilité des navigateurs avec les 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é mask-position
1
Masking
2
mask-position
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-position.

Les spécifications CSS éditées par le W3C sont organisées en modules. mask-position 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...)
Définit la référence pour le positionnement 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.