Módulo 16: Efeitos de Vidro e Filtros

2. Resumo da Aula Anterior

No Módulo 15, construímos o nosso primeiro projeto prático: um Hero de Elite. Agora, vamos elevar ainda mais a estética do site aprendendo a criar o famoso efeito de "vidro fosco" (Glassmorphism).

3. O Que Vais Aprender Hoje

✅ A propriedade backdrop-filter.
✅ Como criar o efeito de Glassmorphism premium.
✅ Filtros de imagem do CSS (grayscale, blur, brightness).
✅ Contraste e acessibilidade em interfaces transparentes.

4. Teoria: A Camada de Vidro

Conceito: O Glassmorphism foca-se na transparência e no desfoque do fundo para criar uma sensação de profundidade e hierarquia. A "mágica" acontece quando usamos o backdrop-filter, que não desfoca o elemento em si, mas sim o que está atrás dele.

🍷 Analogia: O Copo de Vinho Fosco

Imagina que estás num restaurante:

Sem Filtro (Vidro Comum): Consegues ver tudo o que está do outro lado do copo com nitidez.
Com Backdrop-filter (Vidro Fosco): O copo é semi-transparente, mas a luz do restaurante que passa através dele fica difusa e suave. Tu sabes que há algo lá atrás, mas não vês os detalhes. É elegante e foca a atenção no que está escrito no copo!

5. Exemplos Práticos

Exemplo 1: O Cartão de Vidro

A fórmula exata para o efeito Glassmorphism.

.glass-card {
  background: rgba(255, 255, 255, 0.2); /* Branco semi-transparente */
  backdrop-filter: blur(10px);         /* Desfoca o fundo */
  -webkit-backdrop-filter: blur(10px);  /* Recomendado para Safari */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borda subtil */
  border-radius: 20px;
  padding: 30px;
}

A borda semi-transparente é o segredo para dar aquele aspeto de "corte de vidro" nas extremidades.

Exemplo 2: Filtros de Imagem

Mudar o aspeto das tuas fotos sem usar o Photoshop.

.foto-antiga {
  filter: grayscale(100%) sepia(50%);
}

.foto-focada:hover {
  filter: blur(0);
}

.foto-desfocada {
  filter: blur(5px);
  transition: filter 0.3s;
}

O filter atua no conteúdo do elemento, enquanto o backdrop-filter atua no que está por trás dele.

6. Agora é a Tua Vez!

Vamos criar uma "Barra de Navegação Flutuante":

Cria uma <nav> e coloca-a por cima de uma imagem de fundo bonita.
No CSS, dá-lhe um background com rgba(0, 0, 0, 0.4) (preto transparente).
Aplica o backdrop-filter: blur(15px).
Dá-lhe um border-bottom branco muito clarinho.
Faz scroll na página e observa como a barra "derrete" as cores da imagem que passa por baixo.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 backdrop-filter cria efeitos no fundo atrás do elemento.
📌 filter cria efeitos no próprio elemento/imagem.
📌 O Glassmorphism precisa de transparência e desfoque combinados.
📌 Usa sempre rgba ou hsla para o fundo de elementos "vidro".

9. Desafios Práticos

Desafio 1: Brilho Extra

Como farias para aumentar o brilho de uma imagem em 50% quando o utilizador passa o rato?

Desafio 2: O Contraste Perdido

Se o teu texto branco não se lê bem no "vidro", qual a propriedade (que já aprendemos) que podes adicionar ao texto para criar uma sombra subtil e melhorar a leitura?

Desafio 3: Safari Compatibility

Por que é que muitas vezes vemos a propriedade -webkit-backdrop-filter repetida no código de sites profissionais?

Aprende Web: CSS

Módulo 16: Glassmorphism e Filtros