Superfície CSS

O que é

Duas famílias de efeito de "acabamento". O vidro (sw-glass) é aquele painel translúcido que desfoca o que está atrás — muito usado em cima de foto ou vídeo no topo do site, para o texto ficar legível sem esconder a imagem. Os sw-blur-* fazem só o desfoque, sem cor nem borda. O brilho (sw-glow) coloca um halo de luz colorido em volta de uma caixa (plano recomendado, alerta importante) ou das letras de um título (sw-glow-text).

É só CSS. O vidro segue o tema: no escuro é um vidro escuro, no claro é um vidro claro, e o texto acompanha. O brilho usa as cores do seu site (primária, secundária, sucesso, erro) — se você trocar a cor primária, o halo muda junto.

Quando usar

• Texto ou formulário sobre foto/vídeo no topo da página: painel sw-glass.
• Barra ou faixa sobre a foto que só precisa desfocar, sem cor: sw-blur-md.
• Destacar o plano recomendado ou um card especial: sw-glow.
• Mostrar um alerta crítico ou um sucesso: sw-glow-err / sw-glow-suc.
• Título com brilho em página escura (evento, festa, games): sw-glow-text.

Comece aqui

1. 1

   Coloque o SW Core no <head>. As classes estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Um pai rel com a foto de fundo e, por cima, um painel com sw-glass.

   

   Pousada Vale Verde

   Diárias a partir de R$ 280

   <div class="rel ar-4-3 r-m ov-hi">
     <img src="/pousada.jpg" alt="" class="abs-fill media-fill">
     <div class="abs pin-x pin-b m-m p-m r-m sw-glass">
       <strong>Pousada Vale Verde</strong>
       <p class="m-0 t-p">Diárias a partir de R$ 280</p>
     </div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<section class="rel ar-16-9 r-m ov-hi">
  <img src="/serra.jpg" alt="Montanhas com neve" class="abs-fill media-fill">
  <div class="abs-mid p-g r-m sw-glass t-ct">
    <h3 class="m-0">Trilhas guiadas na serra</h3>
    <p class="m-0 mt-2 t-p">Saídas todo sábado, com guia credenciado.</p>
    <a href="/reservar" sw-btn="pri p" class="mt-3">Reservar vaga</a>
  </div>
</section>

<div sw-card class="sw-glow">
  <div class="sw-card-bdy t-ct">
    <span sw-badge="pri">Recomendado</span>
    <p class="m-0 mt-2"><strong>Loja</strong></p>
    <p class="m-0 t-mut">R$ 129/mês</p>
  </div>
</div>

<div class="bg-sur r-m p-m sw-glow-suc">
  <p class="m-0 t-mut t-p">Site</p>
  <strong>No ar</strong>
</div>
<div class="bg-sur r-m p-m sw-glow-err">
  <p class="m-0 t-mut t-p">Backup</p>
  <strong>Falhou às 03:00</strong>
</div>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• Vidro em fundo liso não aparece: ele desfoca o que está atrás. Use sobre foto, vídeo ou degradê.
• O vidro precisa estar por cima da foto (pai rel, foto abs-fill, painel abs ou abs-mid). Painel ao lado da foto não desfoca nada.
• Não use dois sw-glow-* no mesmo elemento: só um halo vale.
• O brilho aparece mais no tema escuro. No claro ele fica discreto — é normal.
• Muitos painéis de vidro na mesma tela pesam no celular (o desfoque é recalculado ao rolar). Use em um ou dois lugares de destaque.
• Procurando o brilho que segue o mouse? Não é classe desta página: é o efeito data-sw="glow" da página Glow (segue o mouse).

O que ele não faz

• O halo sw-glow-* existe em 4 cores (primária, secundária, sucesso, erro). Não há versão de alerta (amarelo) nem de informação (azul).
• O sw-glow-text só tem a cor primária.
• O sw-glow usa box-shadow: ele substitui qualquer sombra que o elemento já tenha (ex.: sw-card="sha").