From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- files/pt-br/web/css/mask/index.html | 150 ++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/pt-br/web/css/mask/index.html (limited to 'files/pt-br/web/css/mask/index.html') diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html new file mode 100644 index 0000000000..4b7f7f52d5 --- /dev/null +++ b/files/pt-br/web/css/mask/index.html @@ -0,0 +1,150 @@ +--- +title: mask +slug: mask +tags: + - CSS + - Compatibilidade Mobile + - Internet + - Layout + - Referencia + - SVG + - Web + - máscaras +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

Resumo

+ +

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
/* Palavra-Chave */
+mask: none;
+
+/* Valor das Imagens */
+mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
+mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
+
+/* Valores Combinados */
+mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
+mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
+mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
+mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
+
+/* Valores Globais */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +

Valores

+ +

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.

+ +
{{csssyntax}}
+ +

Exemplos

+ +
.target { mask: url(#c1); }
+
+.anothertarget { mask: url(resources.svg#c1); }
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Estende-se a sua utilização para elementos HTML.
+ Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da mask-* definidos nessa especificação.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Definição inicial.
+ +

Compatibilidade dos Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte Básico (para o SVG){{CompatVersionUnknown}}{{CompatVersionUnknown}} [*]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Aplica-se a elementos HTML{{CompatNo}}{{CompatGeckoDesktop("1.9.1")}} [*]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, o espaço de cor padrão ao manusear máscaras é sRGB; anteriormente, o padrão (suportado apenas espaço de cor) era linearRGB. Isso muda a aparência de efeitos de máscara, mas traz o Gecko em conformidade com a segunda edição da especificação SVG 1.1.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf