Filtros

No Laboratório Belavista, o cartaz sobre a foto da oficina precisa de um leve desfoque no fundo. filter altera o próprio elemento; backdrop-filter desfoca o que está atrás.

O exemplo está em pacote de exemplos/48-filtros/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Aplicar blur, brightness, contrast, grayscale, saturate.
• Combinar vários filtros em uma declaração.
• Usar backdrop-filter para vidro fosco.
• Manter texto legível se o filtro falhar.

filter no elemento

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Filtros — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <div class="cena">
      <img class="fundo" src="oficina.svg" width="480" height="280" alt="Mesa de tipografia fictícia">
      <p class="placa">Oficina aberta · sábado</p>
    </div>
    <figure>
      <img class="pb" src="oficina.svg" width="240" height="140" alt="Mesma cena em escala de cinza">
      <figcaption>Pré-visualização monocromática</figcaption>
    </figure>
  </body>
</html>

.cena {
  position: relative;
  max-width: 30rem;
}
.fundo {
  display: block;
  width: 100%;
  height: auto;
}
.placa {
  position: absolute;
  inset-inline: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  color: #fff;
  background: rgb(26 58 74 / 0.55);
  backdrop-filter: blur(8px);
}
.pb {
  filter: grayscale(1) contrast(1.1);
}

Mude uma coisa. Em .pb, troque grayscale(1) por blur(2px). Preveja a foto embassada. Recarregue. Confira.

Funções úteis

• blur(raio) — raio em comprimento (8px), não em %.
• brightness(1.2) / contrast() / saturate() — 1 é o original.
• grayscale(1) — total cinza; 0.5 parcial.
• opacity() no filter é diferente da propriedade opacity (cuidado com empilhamento).
• drop-shadow() — sombra que segue a forma (útil com PNG transparente).

Vários filtros: filter: brightness(1.1) saturate(1.2);. Se um estiver inválido, a lista inteira pode falhar.

backdrop-filter

Desfoca o conteúdo atrás do elemento (precisa de fundo semitransparente). Suporte melhorou, mas deixe cor de reserva. Texto sobre imagem filtrada deve continuar legível sem o efeito.

Erro comum: esperar que filter: blur() no pai desfoque só o fundo e mantenha o texto nítido. O filtro afeta o elemento e, em geral, o que ele pinta — use backdrop-filter na placa.

Acessibilidade visual

Filtro não substitui contraste. Se o texto da placa depender do blur para ser lido, aumente a opacidade do fundo ou escureça a cor. Em navegadores sem backdrop-filter, a cor sólida deve bastar.

Arquivo no disco. Teste em 127.0.0.1.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual a diferença entre filter e backdrop-filter?
2. blur(10%) é válido?
3. Por que a .placa usa cor semitransparente além do blur?

Respostas comentadas

1. filter altera o próprio elemento; backdrop-filter altera a aparência do que está atrás dele.
2. Não. O raio de blur no filter exige unidade de comprimento.
3. Sem transparência no fundo, o desfoque do backdrop quase não aparece; a cor também garante contraste se o filtro não existir.