A máscara 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 imagens.
Quando você recorta um elemento usando a propriedade clip-path, a área recortada se torna invisível.
Se, em vez disso, você quiser tornar parte da imagem opaca ou aplicar algum outro efeito, será necessário usar o mascaramento.
Esta postagem explica como usar a propriedade mask-image no CSS.
que permite especificar uma imagem para ser usada como camada de máscara.
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 só oferece suporte parcial para a propriedade de mascaramento do CSS padrão.
Você vai precisar 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 informações completas sobre o suporte ao navegador.
Embora o suporte do navegador para o uso da propriedade prefixada seja bom,
ao usar o mascaramento para tornar o texto visível em uma imagem, cuide do que acontecerá se o mascaramento não estiver disponível.
Pode valer a pena usar consultas de recursos para detectar 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. */
}
Mascaramento 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 fará com que a parte da imagem sob essa área fique invisível. Usar uma área semitransparente permite que parte da imagem original apareça. Você pode ver a diferença no Glitch abaixo. A primeira é a imagem original de balões, sem máscara. A segunda imagem tem uma máscara aplicada com uma estrela branca em um 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 um valor de cover.
Essa propriedade funciona da mesma forma que background-size.
É possível usar as palavras-chave cover e contain ou definir um tamanho para o 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 padrão de repetição.
Mascaramento com SVG
Em vez de usar um arquivo de imagem como máscara, é possível usar SVG.
Há algumas maneiras de fazer isso.
A primeira é incluir um elemento <mask> dentro do SVG e fazer referência ao 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 aceita essa abordagem.
No entanto, nem tudo está perdido. No cenário mais comum de mascaramento de imagens, podemos incluir a imagem no SVG.
Mascaramento com um gradiente
Usar um gradiente de CSS como máscara é uma forma elegante de criar uma área mascarada sem se preocupar com a criação de imagens ou SVGs.
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.
Você pode usar qualquer um dos tipos de gradiente compatíveis e deixar sua criatividade à vontade. O próximo exemplo usa um gradiente radial para criar uma máscara circular que ilumina atrás da legenda.
Uso de várias máscaras
Assim como nas imagens de plano de fundo, é possível especificar várias origens de máscara, combiná-las para chegar ao efeito desejado. Isso é útil principalmente se você deseja usar um padrão gerado com gradientes CSS como máscara. Eles normalmente usam várias imagens de plano de fundo e, por isso, podem ser facilmente traduzidos para uma máscara.
Por exemplo, encontrei um bom padrão de quadriculado neste artigo. O código, usando 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,
você vai precisar substituir as propriedades background-* pelas propriedades do mask relevantes,
incluindo os com o 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;
É possível fazer alguns efeitos muito legais com a aplicação de padrões de gradiente em imagens. Tente remixar o Glitch e testar algumas outras variações.
Além dos clipes, 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.