Sombras

Na vitrine do Laboratório Belavista, a ficha do workshop sobe levemente com sombra; o título precisa de sombra no texto; um logotipo recortado pede sombra no formato, não na caixa. Três ferramentas: box-shadow, text-shadow e filter: drop-shadow().

O exemplo deste capítulo é 38-sombras, no pacote que acompanha o volume. Aumente o blur da box-shadow, preveja, recarregue e confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Ler a ordem dos valores de box-shadow.
• Usar sombra interna (inset).
• Aplicar text-shadow em títulos.
• Escolher drop-shadow() para silhuetas.
• Lembrar que sombra não ocupa layout.

Box shadow

Sombra na caixa retangular (respeitando border-radius).

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sombras — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <article class="ficha">
      <h1 class="titulo">Workshop de cartaz</h1>
      <p>Sábado fictício · Belavista, Recife</p>
      <img class="selo" src="selo.png" alt="Selo circular do ateliê Belavista">
    </article>
  </body>
</html>

.ficha {
  max-inline-size: 22rem;
  padding: 1.25rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ficha:focus-within {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 0 0 3px #8b1e1e;
}

Ordem típica: deslocamento X, Y, blur, spread (opcional), cor. inset coloca a sombra para dentro.

Text shadow

.titulo {
  color: #1a1a1a;
  text-shadow: 1px 1px 0 #f7f4ef, 2px 2px 0 rgba(139, 30, 30, 0.35);
}

Não cria caixa; acompanha os glifos. Várias sombras separam por vírgula.

Drop-shadow no filtro

box-shadow ignora transparência da imagem: a sombra é do retângulo. Para um selo PNG com fundo transparente, use:

.selo {
  display: block;
  max-inline-size: 6rem;
  filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.35));
}

Erro comum: esperar que box-shadow contorne o desenho do PNG. Contorna a caixa. Troque para filter: drop-shadow().

Layout e desempenho

Sombras não somam à width/height. Evite dezenas de sombras animadas em scroll longo; prefira estados discretos (hover/foco).

Critério para avançar

Você avança se: aplica box-shadow na ficha; diferencia text e box; cita quando usar drop-shadow().

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 parâmetro controla o “borrão” da box-shadow?
2. Por que drop-shadow() ajuda no selo transparente?
3. Sombra conta no cálculo de border-box?

Respostas comentadas

1. O blur (terceiro comprimento na forma comum).
2. A sombra segue o alpha da imagem, não só o retângulo.
3. Não. Como outline, fica fora do tamanho de layout.