Máscaras CSS

Optional Advanced acabou de verter colunas de jornal. Esta sessão é outra ferramenta opcional: máscara. Pões um estêncil numa caixa. Onde o estêncil é sólido vês a foto ou a cor. Onde está vazio, essa caixa desaparece. Não partes um artigo em fluxos nem deslizas mosaicos de ícones numa folha sprite.

Resposta direta

A máscara CSS esconde partes de um elemento com mask-image — PNG, SVG ou gradiente. Pensa em tinta spray através de um recorte. mask-size, mask-repeat e mask-position comportam-se como a camada de fundo: cover, no-repeat, center. mask-mode escolhe alfa (transparência do ficheiro) ou luminância (claro contra escuro). Usa máscara quando o bordo deve desvanecer. Usa clip-path para um corte duro (círculo ou polígono). Rótulos e botões ficam totalmente visíveis.

Porque uma máscara não é coluna nem sprite

Várias colunas fragmentam um fluxo de texto. Uma folha sprite recorta um bitmap com background-position para muitos ícones partilharem um ficheiro. A máscara não faz nem uma coisa nem outra. O elemento continua a ocupar a caixa. Largura e altura de layout não encolhem. Muda só quais píxeis dessa caixa se pintam. Filtros (blur(), grayscale()) mudam o aspeto de cada píxel visível; a máscara decide quais ficam.

Um PNG como estêncil

mask-image aceita url(...) como background-image. Um PNG de máscara típico é branco (ou opaco) onde queres a foto, e transparente onde queres um buraco:

A foto continua a ser fundo (ou um <img> com a mesma máscara). O PNG da mancha é só o estêncil. Se o ficheiro da máscara faltar, o elemento inteiro pode desaparecer — guarda um estilo sem máscara ou testa o URL.

Desvanecer com gradiente

Não precisas de um segundo ficheiro. Uma máscara em gradiente é o fade quotidiano no fundo do cartão:

Preto (ou totalmente opaco) mantém o conteúdo; transparent fura. O gradiente vive no CSS, logo sem pedido HTTP extra — ao contrário de uma folha de ícones sprite. Isto não é opacity no cartão todo: o texto na zona sólida fica nítido; só a região mascarada se dissolve.

Tamanho, repetição e posição

Trata a máscara como uma camada de fundo que nunca vês como imagem:

mask-size: cover enche a caixa; contain guarda o rácio do estêncil; comprimentos fixam uma forma pequena. repeat ladrilha o estêncil (raro e fácil de exagerar). Existe o atalho mask, mas as propriedades longas são mais calmas até a camada se sentir como background.

Alfa versus luminância

mask-mode responde: «Leio transparência ou brilho?»

alpha (muitas vezes o padrão de um PNG transparente) usa o canal alfa. luminance usa claro e escuro: o branco costuma mostrar, o preto esconder — útil quando o estêncil é uma foto cinzenta, não um PNG transparente. Se uma máscara JPEG «não faz nada», provavelmente faltava luminance. Em SVG, <mask> tem mask-type; em caixas HTML começa por mask-mode.

Clip duro versus máscara suave

clip-path corta uma geometria: círculo, inset, polígono. A aresta é nítida. Uma máscara pode ser suave. Não são dois nomes da mesma propriedade:

Avatares e bilhetes costumam querer clip-path. Um poster que se dissolve na página quer uma máscara em gradiente. Podes combinar, mas um trabalho por propriedade é mais calmo. overflow: hidden com border-radius é a terceira ferramenta: recorta descendentes à caixa de padding. A máscara pinta o próprio elemento, fundo incluído, sem arredondar a caixa de layout.

Safari e o prefixo WebKit

Algumas versões do Safari ainda querem -webkit-mask-image (e amigos) ao lado das propriedades padrão:

Linha com prefixo e linha padrão. Não envies só prefixo para sempre. @supports pode envolver extras; o hábito é testar o fade no Safari, não só no Chromium.

Máscara vs clip vs overflow vs sprites

Optional Advanced já usou sprites para ícones e colunas para prosa. A máscara é o estêncil. Misturar os três no mesmo herói dá uma foto recortada como sprite e fatiada como coluna.

O que não mascarar

Não uses uma máscara para «arrumar» um layout confuso. Se um botão ou rótulo ficar debaixo do fade, ninguém lê nem toca. Um leitor de ecrã pode anunciar o texto enquanto quem vê não vê nada — é um bug, não uma funcionalidade. O contraste continua a importar na parte visível. Fotos decorativas, cartões e ícones são o alvo habitual; campos de login não.

Se um filho sai do cartão, overflow (ou um filho mais pequeno) é o arranjo de layout. Se há doze ficheiros HTTP de ícones, um sprite ou um conjunto SVG é o arranjo de recursos. A máscara não substitui nenhum.

Experimenta tu

1. Dá a uma caixa colorida mask-image: linear-gradient(to bottom, #000 50%, transparent) e vê o fundo dissolver-se.
2. Troca um estêncil SVG ou PNG pequeno; define mask-size e mask-position: center.
3. Experimenta mask-mode: luminance num JPEG cinzento versus alpha num PNG transparente.
4. Compara o mesmo círculo com clip-path: circle(50%) — nota a aresta dura.
5. Acrescenta -webkit-mask-image com o mesmo gradiente. Não mascares um formulário.

Erros comuns

• Usar a máscara como layout de página ou como overflow: hidden
• Esquecer mask-size e deixar um estêncil minúsculo no canto
• Esperar buracos de um JPEG sem mask-mode: luminance
• Saltar -webkit-mask-image e culpar «máscaras CSS» no Safari
• Tratar clip-path e mask-image como a mesma coisa
• Mascarar rótulos, legendas ou botões até matar contraste e alvos de clique
• Confundir com sprites (deslocamentos de mosaico) ou várias colunas (fluxos de texto)

Resumo

• Uma máscara é um estêncil num elemento: mostrar aqui, esconder ali
• mask-image aceita url ou gradiente; tamanho, repetição e posição imitam o fundo
• mask-mode: alfa versus luminância
• clip-path é um corte geométrico duro; as máscaras podem desvanecer
• Prefixo para Safari; nunca mascares a interface essencial
• Optional Advanced segue depois com interface de utilizador (user-interface)