CSS mask-image: mascaramento CSS nativo

Fazer mascaramento com CSS usando a propriedade mask-image já é possível. Veja como atingir efeitos visuais incríveis com mask-image CSS.

Ir para o artigo

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.

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

Exemplo de CSS mask-image aplicado a uma imagem mostrando balões tripulados voando.

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.

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:

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.

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!

E-book que explica os 3 conceitos fundamentais de CSS para você entender de uma vez por todas e parar de brigar com CSS!

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.