CSS mask-image (CSS masking) 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 bem interessantes.
Quando se recorta um elemento usando clip-path, a área recortada se torna invisível (veja nosso tutorial). Se, em vez disso, for preciso tornar parte da imagem opaca ou aplicar algum outro efeito nela, isso é possível de ser feito com CSS masking (“mascaramento CSS”).
Ao saber como usar a propriedade mask-image de CSS, isso permite especificar uma imagem para usar como camada de máscara (mask layer) através de 3 opções: imagem, SVG ou gradiente.
Compatibilidade cross-browser de mask-image
No momento da publicação deste artigo, a maioria dos navegadores oferece somente suporte parcial para a propriedade de mascaramento CSS.
É preciso usar o prefixo -webkit- além da propriedade padrão para obter uma melhor compatibilidade — consulte o Can I Use para informações completas de suporte dos navegadores.
Apesar de o suporte cross-browser já ser decente, ao usar o mascaramento para tornar texto por cima de uma imagem visível, tome cuidado com o que acontecerá se o mascaramento não estiver disponível.
Pode valer a pena usar feature queries para detectar suporte para imagem com mask-image ou -webkit-mask- e fornecer um fallback antes de usar a versão mascarada.
|
1 2 3 |
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) { /* código mask-image aqui */ } |
mask-image com imagem
A propriedade mask-image funciona de maneira semelhante à propriedade background-image, usando url() para passar uma imagem — obviamente, a imagem da máscara precisa ter uma área transparente (ou semitransparente).
Uma área totalmente transparente faz com que a parte da imagem sob essa área fique invisível; uma área que é semitransparente permite que parte da imagem original apareça. Veja a diferença abaixo.
A primeira imagem é a imagem original de balões sem máscara. A segunda imagem tem uma máscara aplicada que tem uma estrela branca em um fundo totalmente transparente. A terceira imagem tem uma estrela branca em um fundo com transparência gradiente.
Neste exemplo, também se usa a propriedade mask-size com valor cover. Esta propriedade funciona da mesma maneira que background-size.
É possível usar as palavras-chave cover e contain ou atribuir ao background um tamanho usando qualquer unidade de comprimento CSS válida — também é possível repetir a máscara da mesma forma que faria com uma imagem de fundo, usando uma imagem pequena como padrão de repetição.
mask-image com SVG
Em vez de usar um arquivo de imagem como máscara, também é admitido usar SVG. Existem algumas maneiras pelas quais isso pode ser alcançado. A primeira é ter um elemento <mask> dentro do SVG e fazer referência ao ID desse elemento na propriedade mask-image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
|
1 2 3 4 5 6 7 |
.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, no momento, o Firefox é o único navegador que suporta essa abordagem.
No entanto, nem tudo está perdido, pois para o cenário mais comum de mascaramento de uma imagem, podemos incluir a imagem no próprio SVG.
mask-image com gradiente/degradê
Usar um gradiente/degradê CSS como máscara é uma maneira elegante de obter uma área mascarada sem precisar se dar ao trabalho de criar uma imagem ou 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.
Também é possível usar qualquer um dos tipos de gradiente suportados e ser tão criativo quanto possível. Este próximo exemplo usa um gradiente radial para criar uma máscara circular atrás da legenda.
Múltiplas máscaras
Tal como acontece com imagens de background, é possível especificar várias fontes de máscara, combinando-as para obter o efeito desejado. Isso é particularmente útil se é preciso usar um padrão gerado com gradientes CSS como máscara.
Como exemplo, veja o padrão xadrez a seguir. O código, usando imagens de background, é assim:
|
1 2 3 4 5 6 7 |
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 de imagens de fundo, em uma máscara, é preciso substituir as propriedades background-* pelas propriedades de máscara relevantes, incluindo as propriedades prefixadas -webkit.
|
1 2 3 4 5 6 7 |
-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; |
Existem alguns efeitos possíveis realmente interessantes aplicando padrões de gradiente às imagens. Realmente, a imaginação é o limite.
Conclusão
Como visto, mascaramento CSS com mask-image realmente é um recurso poderoso quando é preciso alcançar efeitos interessantes para apresentar imagens em projetos Web.
O suporte já é mais ou menos decente e, como sabemos, em breve será totalmente cross-browser, permitindo que mask-image seja usado livremente.
E você, já pensou em alguns casos de uso ou lembrou de algum projeto que fez que poderia ter usado? Conta pra gente nos comentários!