Conteúdo com textura visual

Recursos da Web: Máscaras

Visão geral

Para aplicar padrões realistas de desgaste ou textura (como grunge, ruído ou textura de papel) a um elemento, use a máscara CSS (mask-image) com uma imagem de textura repetida. Isso permite que o conteúdo em si pareça texturizado, tornando partes dele semitransparentes, em vez de apenas sobrepor uma textura. Isso cria uma aparência de material físico mais realista.

Implementação

Para aplicar um padrão de textura:

Esse é o método mais comum para texturas realistas.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

Método 2: usar gradientes CSS para padrões geométricos

É possível gerar padrões usando gradientes CSS. Ele é independente e não requer arquivos de imagem externos.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Modos de máscara Alfa x Luminância

Por padrão, as máscaras CSS usam mask-mode: match-source. Isso significa que o navegador decide automaticamente se vai usar o canal Alfa (transparência) ou a luminância (brilho) da máscara com base no tipo de origem que você fornece:

Tipo de origem da máscara Modo de máscara padrão Comportamento de mascaramento
Elemento SVG <mask> inline luminance A opacidade é determinada pelo brilho das cores. O branco revela o conteúdo, o preto o oculta e o cinza cria semitransparência.
Arquivo de imagem direto (por exemplo, arquivo PNG, SVG) alpha A opacidade é determinada pela transparência. As partes opacas revelam o conteúdo, e as partes transparentes o ocultam.
Gradiente CSS alpha A opacidade é determinada pela transparência. As cores opacas (como black) revelam o conteúdo, e as cores transparentes o ocultam.

Estratégias de fallback

Se um navegador não for compatível com mask-image ou com a versão prefixada:

  • O elemento vai aparecer sem a textura (preenchimento limpo e sólido).
  • Verifique se o conteúdo ainda é legível sem a textura (aprimoramento progressivo).
  • Você pode usar uma imagem de plano de fundo ou uma sobreposição como alternativa para simular a textura, mas isso não vai afetar a transparência do conteúdo.
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}