mask-size - Propriété CSS
Résumé des caractéristiques de la propriété mask-size
auto
| contain
| cover
auto
Description de la propriété mask-size
.
-webkit-
mask-size
pour améliorer la compatibilité.
Le masquage et une technique qui consiste à cacher certaines parties d'un élément d'après une image définie comme étant le masque. Ce dernier peut aussi être un fichier SVG.
La propriété mask-size
définit les dimensions du masque. Doit-il être agrandi ou rétréci pour couvrir
l'élément qu'il doit masquer ?
Pour plus d'information sur la technique de masquage, reportez-vous à la propriété raccourcie mask
.
Syntaxes pour mask-size
.
mask-size:
;
- mask-size: auto;
Le masque est utilisé avec ses dimensions originales.
Si le masque n'a pas de dimensions propres (dégradé, fichier SVG) les dimensions du masque seront ajustées sur celles de l'élément masqué. - mask-size: cover;
Le masque est agrandi ou réduit pour couvrir toute la zone à masquer. Les proportions du masque sont conservées : le masque peut déborder verticalement ou horizontalement.
La zone àç masquer peut inclure la bordure, les marges intérieures, ou seulement le contenu. Voir à ce sujet la propriété
mask-origin
.
mask-size:cover;
mask-origin:border-box;
mask-size:cover;
mask-origin:padding-box;
mask-size:cover;
mask-origin:content-box;Le masque est un cercle. Dimensionné avec
cover
, son diamètre sera égal à la plus grande des dimensions de la zone à masquer. Il débordera dans l'autre direction (le masque lui-même étant invisible, cela ne peut pas être gênant).. - mask-size: contain;
Le masque est agrandi ou réduit pour tenir entièrement dans les dimensions de la zone à masquer. Les proportions du masque sont conservées : le masque peut ne pas couvrir entièrement l'élément.
mask-size:contain;
mask-origin:border-box;
mask-size:contain;
mask-origin:padding-box;
mask-size:contain;
mask-origin:content-box;Le masque est un cercle. Dimensionné avec
contain
, son diamètre sera égal à la plus petite des dimensions de la zone à masquer. Il ne couvrira donc pas tout l'élément dans sa plus grande dimension. - mask-size: 50px 25px;
mask-size
accepte également une ou deux valeurs numériques positives, avec leur unité de dimension (voir les unités CSS de dimension) ou exprimées en pourcentages. Ces deux valeurs définissent respectivement la largeur et la hauteur du masque. Les proportions de ce dernier peuvent donc ne pas être conservées.Si une seule valeur est indiquée, elle définit la largeur du masque, la hauteur sera modifiée pour conserver les proportions initiales du masque.
Les pourcentages sont calculés par rapport aux dimensions de la zone à masquer.
mask-size:100% 100%;
mask-origin:border-box;
mask-size:100% 100%;
mask-origin:padding-box;
mask-size:100% 100%;
mask-origin:content-box;Le masque est un cercle. Si ses deux dimensions sont fixées à
100%
, il sera déformé (il devient une ellipse) pour prendre les mêmes dimensions que la zone qu'il masque. - mask-size: cover, cover, 50px 50px, ...;
Plusieurs valeurs peuvent être indiquées, séparées par une virgule. Cette syntaxe est utile lorsque plusieurs masques sont définis.
- mask-size:
initial
; mask-size:inherit
; mask-size:revert
; mask-size:revert-layer
; mask-size:unset
;La valeur initiale est :
.auto
Animation de la propriété mask-size
.
Cet effet hypnotique est obtenu en animant la propriété mask-size
. Le masque utilisé est un dégradé répétitif circulaire .
Simulateur.
L'élément original
180 x 120 pixels
Le masque
100 x 100 pixels
Le résultat
L'élément original
180 x 120 pixels
dégradé circulaire
(sans dimensions)
Le résultat
Prise en charge par les navigateurs (compatibilité).
mask-size
mask-size
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-size
.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask-size
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.