A máscara CSS oferece a opção de usar uma imagem como camada de máscara. Isso significa que é possível usar uma imagem, um SVG ou um gradiente como máscara para criar efeitos interessantes sem um editor.
Quando você recorta um elemento usando a propriedade clip-path, a área recortada fica invisível.
Se, em vez disso, você quiser tornar parte da imagem opaca ou aplicar algum outro efeito a ela, será necessário usar a máscara.
Nesta postagem, explicamos como usar a propriedade mask-image no CSS,
que permite especificar uma imagem para usar como camada de máscara.
Assim, você terá três opções. É possível usar um arquivo de imagem como máscara, um SVG ou um gradiente.
Compatibilidade com navegadores
A maioria dos navegadores oferece suporte parcial para a propriedade de mascaramento de CSS padrão.
Será necessário usar o prefixo -webkit-, além da propriedade padrão, para ter a melhor compatibilidade com o navegador.
Consulte Posso usar máscaras CSS? para conferir informações completas sobre o suporte do navegador.
Embora o suporte do navegador com a propriedade prefixada seja bom, ao usar o mascaramento para tornar o texto sobre uma imagem visível, cuide do que acontecerá se o mascaramento não estiver disponível.
Pode ser útil usar consultas de recursos para detectar o suporte a mask-image ou -webkit-mask-image
e fornecer um substituto legível antes de adicionar a versão mascarada.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Como mascarar com uma imagem
A propriedade mask-image funciona de maneira semelhante à 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 faz com que a parte da imagem abaixo dela fique invisível. No entanto, usar uma área semitransparente permite que parte da imagem original apareça. Veja a diferença no Glitch abaixo. A primeira imagem é a 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 fundo com transparência em gradiente.
Neste exemplo, também estou usando a propriedade mask-size com o valor cover.
Essa propriedade funciona da mesma maneira que background-size.
Você pode usar as palavras-chave cover e contain ou pode dar um tamanho ao plano de fundo usando qualquer unidade de comprimento válida ou uma porcentagem.
Também é possível repetir a máscara da mesma forma que uma imagem de plano de fundo para usar uma imagem pequena como um padrão repetido.
Mascaramento com SVG
Em vez de usar um arquivo de imagem como máscara, você pode usar SVG.
Isso pode ser feito de várias maneiras.
A primeira é ter um elemento <mask> dentro do SVG e referenciar o ID desse elemento na propriedade mask-image.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-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. Infelizmente, o Firefox é o único navegador que oferece suporte a essa abordagem.
No entanto, nem tudo está perdido. No cenário mais comum de mascaramento de uma imagem, podemos incluí-la no SVG.
Mascaramento com gradiente
Usar um gradiente de CSS como máscara é uma maneira elegante de alcançar uma área mascarada sem precisar se preocupar com a criação de uma imagem ou de um SVG.
Um gradiente linear simples usado como máscara pode garantir que a parte inferior de uma imagem não fique muito escura sob uma legenda, por exemplo.
É possível usar qualquer um dos tipos de gradiente compatíveis e ser o mais criativo que você quiser. O próximo exemplo usa um gradiente radial para criar uma máscara circular que será iluminada por trás da legenda.
Como usar várias máscaras
Assim como nas imagens de plano de fundo, é possível especificar várias origens de máscara, combinando-as para ter o efeito desejado. Isso é útil principalmente quando se quer usar um padrão gerado com gradientes CSS como máscara. Eles normalmente usam várias imagens de plano de fundo e podem ser facilmente convertidos em uma máscara.
Como exemplo, encontrei um bom padrão quadriculado neste artigo. O código, que usa imagens de plano de fundo, tem esta aparência:
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 ou qualquer outro padrão projetado para imagens de plano de fundo em uma máscara,
será necessário substituir as propriedades background-* pelas propriedades mask relevantes,
incluindo as com prefixo -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;
Há alguns efeitos muito bons a serem feitos aplicando padrões de gradiente às imagens. Tente remixar o Glitch e testar algumas outras variações.
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.
Foto de Julio Rionaldo no Unsplash.