Filtros CSS

O que é

São efeitos de foto aplicados com uma classe, sem editar a imagem: deixar a galeria de logos em preto e branco (e colorir quando o mouse passa), desfocar o fundo atrás de um aviso, escurecer ou clarear, saturar as cores, misturar a foto com a cor do site (efeito "duotone") e colocar um véu em degradê por cima da foto para o título ficar legível.

É só CSS. As classes de filtro vão direto na <img> (ou em qualquer elemento). As de mistura (blend-*) vão na imagem e se misturam com a cor de fundo do pai. O véu (scrim*) é diferente: é uma camada própria que vai por cima da foto, com abs-fill (veja Posição).

Quando usar

• Fileira de logos de clientes que não brigam entre si: gray-hov (P&B que colore no hover).
• Título sobre foto no topo da página ou em card de notícia: véu scrim por cima da foto.
• Foto de fundo que não pode chamar atenção (atrás de um formulário): blur-m ou bright-d.
• Fotos de estilos diferentes com a cara da marca: blend-lu ou blend-mu sobre um pai bg-pri.
• Item indisponível (esgotado, fora de linha): gray.

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

   Coloque a classe na imagem. Aqui ela nasce em preto e branco e ganha cor quando o mouse passa.

   

   <img src="/foto.jpg" alt="Estrada na floresta" class="gray-hov">

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.

1. Cor

Todos os quadros usam a mesma foto; muda só a classe.

2. Luz, contraste e desfoque

3. Véu sobre a foto (scrim)

O véu é uma camada abs-fill por cima da foto, dentro de um pai rel. Ele escurece (ou clareia) só onde o texto vai ficar.

4. Misturar com a cor do fundo (blend)

A foto se mistura com a cor de fundo do pai. Aqui o pai tem bg-pri (a cor primária do site); troque por bg-suc, bg-err… para outro tom.

Tabela de opções

Receitas prontas — usos reais

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

Card de notícia com título sobre a foto Ao vivo

Turismo

As 5 cachoeiras mais bonitas da serra

<div class="rel ar-16-9 r-m ov-hi">
  <img src="/cachoeira.jpg" alt="Cachoeira na serra" class="abs-fill media-fill">
  <span class="abs-fill scrim"></span>
  <div class="abs pin-x pin-b p-m legenda"> <!-- .legenda { color: #fff } no CSS da página -->
    <span sw-badge="pri">Turismo</span>
    <h3 class="m-0 mt-2">As 5 cachoeiras mais bonitas da serra</h3>
  </div>
</div>

Logos de clientes em P&B que colorem no hover Ao vivo

<div class="ar-3-2 bg-sur bd r-m p-m">
  <img src="/logo-cliente.png" alt="Nome do cliente" class="w-fl h-fl blk of-con gray-hov">
</div>

Produto esgotado em preto e branco Ao vivo

Relógio

R$ 389,00

Esgotado

Sapato

Avise-me quando chegar

<div sw-card>
  <div class="rel ar-4-3">
    <img src="/sapato.jpg" alt="Sapato" class="media-fill gray">
    <span class="abs-mid" sw-badge="drk g">Esgotado</span>
  </div>
  <div class="sw-card-bdy">
    <strong>Sapato</strong>
    <p class="m-0 t-mut t-p">Avise-me quando chegar</p>
  </div>
</div>

Galeria de equipe com a cor da marca (duotone) Ao vivo

<div class="ar-3-4 r-m ov-hi bg-pri">
  <img src="/carlos.jpg" alt="Carlos" class="media-fill blend-lu">
</div>

Precisa de quê

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

Cuidados — erros comuns

• Um filtro por elemento. gray, sepia, blur-*, bright-*… usam a mesma propriedade: se você puser dois na mesma imagem (gray blur-p), só um vale. Para combinar, coloque um na imagem e outro num elemento em volta.
• gray-hov não funciona junto com outro filtro de cor (gray, sepia…): o outro trava a imagem e o hover não muda nada.
• blend-* precisa de uma cor atrás: coloque bg-pri (ou outra cor) no pai. Sem cor atrás, a mistura acontece com o fundo da página e quase não aparece.
• O véu scrim não é classe da imagem: é um <span class="abs-fill scrim"> depois da imagem, dentro de um pai rel.
• A cor do texto sobre o véu escuro é sua: garanta texto branco no seu CSS (o SW Core segue o tema, e no tema claro o texto padrão é escuro).
• Desfoque e filtro pesam no celular quando aplicados em muitas fotos grandes ao mesmo tempo. Use com moderação.

O que ele não faz

• As intensidades são fixas (ex.: blur-m = 6 px). Não há classe para valores no meio.
• O desfoque blur-* desfoca o próprio elemento. Para desfocar o que está atrás de um painel (efeito vidro), use a página Superfície.