Posição da máscara - CSS-Tricks

Anonim

Em CSS, a mask-positionpropriedade especifica a posição inicial de uma imagem da camada de máscara em relação à área de posição da máscara. Funciona como a background-positionpropriedade.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

O mascaramento permite que você exiba partes selecionadas de um elemento enquanto oculta o resto. Na demonstração a seguir, você pode alterar a posição da imagem da camada de máscara:

Sintaxe

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Valor inicial: 0% 0%
  • Aplica-se a: todos os elementos. Em SVG, aplica-se a elementos de contêiner, excluindo o elemento, todos os elementos gráficos e o elemento.
  • Herdado: não
  • Valor calculado: consiste em: duas palavras-chave que representam a origem e dois offsets dessa origem, cada um dado como comprimento absoluto (se dado a ), caso contrário, como porcentagem.
  • Tipo de animação: lista repetível

Valores

Um pode ser especificada em termos de palavras-chave de deslocamento ( top, left, bottom, right, e center), percentagens, e os valores de comprimento em relação aos bordos do elemento, semelhante ao CSS background-positionpropriedade.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Definições de valor

  • : Qualquer comprimento CSS válido (como px, em, reme %, entre outros), que irá especificar o quanto a borda da imagem máscara é a partir da borda correspondente do elemento.
  • : Especifica a posição da imagem da camada de máscara como um valor percentual em relação à área de posicionamento da máscara menos o tamanho da imagem da máscara.
  • top: Equivalente a 0% para a posição vertical.
  • right: Equivalente a 100% para a posição horizontal.
  • bottom: Equivalente a 100% para a posição vertical.
  • left: Equivalente a 0% para a posição horizontal.
  • center: Equivalente a 50% para a posição horizontal se a posição horizontal não for especificada de outra forma, ou 50% para a posição vertical, se for.
  • initial: Aplica a configuração padrão da propriedade, que é 0% 0%.
  • inherit: Adota o mask-positionvalor do pai.
  • unset: Remove a corrente mask-positiondo elemento.

Usando vários valores

Esta propriedade pode receber uma lista de valores separados por vírgulas para posições de máscara e cada valor é aplicado a uma imagem de camada de máscara correspondente especificada na mask-imagepropriedade. No exemplo a seguir, o primeiro valor especifica a posição da primeira imagem, o segundo valor especifica a posição da segunda imagem e assim por diante.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Sintaxe diferente

mask-position pode ter um, dois, três ou quatro valores para especificar a posição da camada de máscara horizontal e verticalmente.

Valor unico

No caso de ser definido um único valor , este é considerado o valor horizontal e o valor vertical é considerado center.

mask-position: 100px; /* 100px center */
Dois valores

No caso de usar valores de pares, o primeiro é considerado o valor horizontal, e o segundo especifica a posição da camada make verticalmente.

mask-position: 10% 50%; /* x=10%, Y=50% */

Se ambos os valores forem palavras-chave, a ordem das palavras-chave é irrelevante:

mask-position: top left; /* = left top */

Mas quando temos uma combinação de palavra-chave e comprimento ou porcentagem, a ordem é importante e o primeiro valor sempre corresponde ao deslocamento horizontal. Portanto:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Três valores

Se três valores forem fornecidos, o deslocamento em falta é considerado zero:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Quatro valores

Uma sintaxe de quatro valores permite que você especifique a quais lados do elemento você está posicionando a máscara (valores 1 e 3) e, a seguir, a distância desses lados (valores 2 e 4).

Portanto, se quiser posicionar a máscara 100px da parte inferior do elemento e 200px da direita, você pode fazer o seguinte:

mask-position: bottom 100px right 200px;

Máscaras de animação

É possível animar a posição da máscara e mask-sizeusar animação de quadro-chave e transição CSS, como a seguir:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

Na próxima demonstração, estamos animando a posição da camada de máscara usando animação de quadro-chave:

Demo

Altere o valor de mask-positionna seguinte demonstração:

Suporte de navegador

IE Beira Raposa de fogo cromada Safári Ópera
Não 18+ 53+ 4+ 3,2+ 15+
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mobile
85+ 79+ 2.1+ 3,2+ 59+
Fonte: caniuse

Mais Informações

  • Módulo de Mascaramento CSS Nível 1 (Rascunho do Editor)
  • Recorte e mascaramento em CSS
  • Recorte vs. Mascaramento: quando usar cada um
  • Nº 185: Brincando com máscaras CSS (vídeo)