CSS mask, shape-outside e perspectiva 3D, com demos ao vivo | We.Inc
Esmaeça imagens com gradientes em mask-image, recorte formas com máscaras SVG, faça o texto contornar círculos com shape-outside, compare clip-path com mask e monte uma cena com perspectiva 3D.
Uma máscara CSS esconde partes de um elemento usando a transparência de uma imagem: mask-image: linear-gradient(black, transparent) o esmaece em direção à parte de baixo. shape-outside faz o texto vizinho contornar um círculo ou polígono em vez de um retângulo. perspective em um pai dá profundidade real aos filhos rotacionados. Monte uma máscara no playground e copie-a.
Qual ferramenta para qual tarefa
Objetivo
Propriedade
Borda
Esmaecimento suave ou holofote
mask-image com um gradiente
Suave, qualquer opacidade
Recorte em forma de ícone ou logo
mask-image com um SVG
Segue o alfa da imagem
Corte geométrico rígido
Sempre nítida
Texto fluindo em volta de uma forma
shape-outside em um float
Afeta o layout do texto
Profundidade para rotações 3D
perspective no pai
Não é um corte
Comece pelo playground de máscaras: escolha um esmaecimento, um holofote ou uma forma recortada, mova-a sobre uma imagem de exemplo e copie o CSS já com o prefixo -webkit-. Abaixo dele há exemplos editáveis de contorno de texto, clip-path contra mask e uma pequena cena 3D, todos funcionando sem JavaScript.
Escolha um tipo de máscara: esmaecimento linear, holofote radial ou uma forma SVG.
Ajuste a direção, a posição, o tamanho e a suavidade. A prévia é redesenhada na hora.
Copie o CSS. Ele inclui mask-image e -webkit-mask-image para que versões antigas do Safari e do Chromium também funcionem.
Role para baixo para ver shape-outside, as comparações com clip-path e a cena com perspectiva, e edite qualquer um deles ali mesmo.
No mask-image, por padrão só o canal alfa conta. Preto e qualquer outra cor opaca significam visível; transparente significa escondido.
Use mask-size, mask-position e mask-repeat exatamente como as propriedades de background. Uma máscara SVG se repete, a menos que você defina mask-repeat: no-repeat.
shape-outside só funciona em elementos com float. Combine-o com o mesmo clip-path se quiser que o próprio elemento também tenha essa forma.
Adicione shape-margin para manter o texto contornado um pouco afastado da curva.
Perguntas frequentes
Qual é a diferença entre clip-path e mask?
clip-path desenha um contorno geométrico e tudo fora dele é cortado com uma borda rígida. mask-image usa uma imagem ou gradiente, então as bordas podem ser suaves e parcialmente transparentes. Clip paths são mais simples para polígonos e círculos; máscaras são a escolha para esmaecimentos, holofotes difusos e recortes em forma de logo.
Ainda preciso de -webkit-mask-image?
As propriedades de mask sem prefixo entraram no Baseline no fim de 2023. Adicionar a versão -webkit- junto não custa nada e mantém o efeito funcionando para visitantes em versões antigas do Safari e do Chromium.
Por que meu shape-outside não funciona?
Confira três coisas: o elemento precisa ter float, precisa de width e height, e se você usa uma imagem como forma, ela precisa ser da mesma origem ou servida com cabeçalhos CORS. Além disso, o texto só contorna o lado oposto ao do float.
Como esmaecer a borda de uma lista com rolagem?
Coloque uma máscara no contêiner de rolagem: mask-image: linear-gradient(to bottom, black 85%, transparent). As últimas linhas somem aos poucos como indicação de que há mais conteúdo, e a máscara rola com a caixa, não com o conteúdo.
Que valor perspective deve ter?
É a distância entre quem vê e o plano z = 0. Algo entre 600px e 1200px parece natural para cards. Valores menores, como 300px, exageram a profundidade e distorcem bastante as bordas mais próximas.
Como uma máscara decide o que aparece
O navegador coloca a imagem da máscara sobre o elemento e lê a transparência pixel a pixel. Onde a máscara é totalmente opaca, o elemento aparece normalmente; onde é totalmente transparente, o elemento desaparece; e transparência parcial gera visibilidade parcial.
Como gradientes são imagens, qualquer gradiente linear, radial ou cônico é uma máscara pronta. Várias máscaras podem ser empilhadas com vírgulas e combinadas com mask-composite, por exemplo para abrir um furo em um esmaecimento.
Fazendo o texto contornar formas
shape-outside aceita formas básicas como circle(), ellipse(), polygon() e inset(), uma palavra-chave de caixa como margin-box, ou uma imagem cujos pixels transparentes definem a forma. Só o conteúdo inline que flui ao lado do float acompanha a curva.
O float continua ocupando a sua caixa retangular na própria pintura. Para fazer uma foto parecer redonda, além de empurrar o texto em círculo, adicione clip-path: circle(50%) ou border-radius: 50% ao mesmo elemento.
Máscaras com gradiente: esmaecimentos e holofotes
Esmaecer a parte de baixo de um bloco
Totalmente visível até 50 por cento da altura e depois um esmaecimento suave até sumir.
Holofote radial
Um gradiente radial mantém um círculo suave visível e esconde o resto do padrão.
Máscaras SVG e data URI
Recortar um elemento em forma de estrela
O SVG fica inline como data URI, então nenhum arquivo extra é necessário. mask-size: contain mantém a estrela inteira dentro da caixa.
Recolorir um arquivo de ícone com uma máscara
O arquivo do ícone fornece só a forma; background-color define a cor, então um único SVG serve para todos os temas e estados de hover.
shape-outside: texto que contorna formas
Contornar um círculo com texto
O float empurra o texto com shape-outside e parece redondo graças ao border-radius. shape-margin adiciona um respiro.
Contornar um polígono diagonal com texto
O mesmo polígono controla tanto o corte visível (clip-path) quanto o fluxo do texto (shape-outside).
clip-path contra mask
O mesmo círculo, com borda rígida e com borda suave
À esquerda, clip-path: circle(). À direita, uma máscara com gradiente radial e borda difusa, o que o clip-path não consegue fazer.
clip-path e mask comparados
Entrada
Forma básica ou <clipPath> SVG
Qualquer imagem: gradiente, PNG, SVG
Bordas
Rígidas
Suaves ou rígidas
Transparência parcial
Não
Sim
Animável
Formas com o mesmo número de pontos
mask-position e mask-size
Uma pequena cena com perspectiva 3D
Cards inclinados em um espaço 3D compartilhado
perspective no palco e preserve-3d no grupo colocam os três cards em um mesmo espaço; translateZ empurra cada um para uma profundidade diferente.
Referência das propriedades de mask
Propriedades longas de mask e o que fazem
Propriedade
Padrão
Finalidade
A imagem ou gradiente usado como máscara
Usa o alfa ou a luminância da máscara
Tamanho da máscara, como background-size
Onde a máscara fica
Repetição da imagem da máscara
Caixa a partir da qual a posição é medida
Área afetada pela máscara
Como máscaras empilhadas se combinam: add, subtract, intersect, exclude
Círculo
Estrela
Coração
Bolha
Playground de máscaras
Tipo de máscara
Esmaecimento linear
Holofote
Forma SVG
Elemento com máscara. O xadrez mostra onde ele está escondido.