O mascaramento CSS oferece a opção de usar uma imagem como uma camada de máscara. Isso significa que você pode usar uma imagem, um SVG ou um gradiente como máscara para criar efeitos interessantes sem um editor de imagem.
Quando você recorta um elemento usando a propriedade clip-path, a área cortada fica invisível.
Se você quiser tornar parte da imagem opaca ou aplicar outro efeito a ela, use a máscara.
Esta postagem explica como usar a propriedade mask-image no CSS,
que permite especificar uma imagem para usar como uma camada de máscara.
Isso oferece três opções. É possível usar um arquivo de imagem como máscara, um SVG ou um gradiente.
Compatibilidade com navegadores
Embora a máscara CSS esteja disponível na versão básica, a maioria dos recursos de mask-image
estão disponíveis em versões anteriores do navegador usando o prefixo -webkit-mask-image.
Os exemplos a seguir mostram como usar as duas propriedades juntas para ter o melhor
suporte do navegador.
Máscara com uma imagem
A propriedade mask-image funciona de maneira semelhante à propriedade background-image.
Use um valor url() para transmitir uma imagem.
A imagem da máscara precisa ter uma área transparente ou semitransparente.
Uma área totalmente transparente vai fazer com que a parte da imagem abaixo dela fique invisível. No entanto, o uso de uma área semitransparente permite que parte da imagem original apareça. Confira a diferença no CodePen a seguir.
- A primeira imagem é a imagem original de balões sem máscara.
- A segunda imagem tem uma máscara aplicada com uma estrela branca em um plano de fundo totalmente transparente.
- A terceira imagem tem uma estrela branca em um plano de fundo com um degradê transparente.
Este exemplo também usa a propriedade mask-size com um valor de cover.
Essa propriedade funciona da mesma forma que background-size.
Use as palavras-chave cover e contain ou defina um tamanho para o plano de fundo usando qualquer unidade de comprimento válida ou uma porcentagem.
Você também pode repetir a máscara da mesma forma que repetiria uma imagem de plano de fundo, para usar uma imagem pequena como um padrão repetitivo.
Máscara com SVG
Em vez de usar um arquivo de imagem como máscara, você pode usar SVG.
Há algumas maneiras de fazer isso.
A primeira é ter um elemento <mask> dentro do SVG e referenciar o ID dele na propriedade mask-image.
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
A vantagem dessa abordagem é que a máscara pode ser aplicada a qualquer elemento HTML, não apenas a uma imagem.
Para o cenário mais comum de mascarar uma imagem,
é possível incluir a imagem no SVG.
A primeira abordagem é a referência recém-disponível, incluindo a imagem no SVG
é compatível com os navegadores mais antigos que oferecem suporte à versão com prefixo -webkit.
Máscara com um gradiente
Usar um gradiente CSS como máscara é uma maneira elegante de criar uma área mascarada sem precisar se preocupar em criar uma imagem ou um SVG.
Um gradiente linear usado como máscara pode garantir que a parte de baixo de uma imagem não fique muito escura abaixo de uma legenda, por exemplo.
Você pode usar qualquer um dos tipos de gradiente com suporte e ser criativo como quiser. O próximo exemplo usa um gradiente radial para criar uma máscara circular que ilumina a legenda.
Várias máscaras
Assim como nas imagens de plano de fundo, é possível especificar várias origens de máscara, combinando-as para conseguir o efeito desejado. Isso é útil principalmente se você quiser usar um padrão gerado com gradientes CSS como máscara. Elas geralmente usam várias imagens de plano de fundo e podem ser facilmente convertidas em uma máscara.
Como exemplo, há um padrão de tabuleiro de damas neste padrões com gradientes CSS. O código, usando imagens de plano de fundo, fica assim:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Para transformar esse padrão ou qualquer outro projetado para imagens de plano de fundo em uma máscara,
substitua as propriedades background-* pelas propriedades mask relevantes,
incluindo as prefixadas com -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
É possível criar alguns efeitos muito legais aplicando padrões de gradiente às imagens. Teste algumas outras variações bifurcando o CodePen a seguir.
Além do recorte, as máscaras CSS são uma maneira de adicionar interesse a imagens e outros elementos HTML sem precisar usar um aplicativo gráfico.