SWCore / CSS / Filtros

Filtros CSS

P&B, sépia, blur, véu escuro pra texto sobre foto — filtros CSS prontos.

O que é

Filtros visuais comuns aplicados via classe, incluindo o padrão "véu escuro por cima da foto" pra legendas legíveis.

Como funciona

A maioria é filter puro (grayscale, sepia, blur, saturate, brightness, contrast, invert) aplicado direto na imagem; as classes blend-* usam mix-blend-mode. Já scrim é diferente: é um gradiente de fundo (não um filtro) pensado pra ir num elemento posicionado por cima da imagem (com abs-fill), escurecendo só a parte de baixo pra legenda ficar legível sem escurecer a foto toda.

Exemplos

Os filtros de cor Ao vivo
original
gray
sepia
invert
<img src="/foto.jpg" class="gray" alt="">     <!-- preto e branco -->
<img src="/foto.jpg" class="sepia" alt="">    <!-- tom envelhecido -->
<img src="/foto.jpg" class="invert" alt="">   <!-- cores invertidas -->
Colorir no hover (.gray-hov) Ao vivo

Passe o mouse: nasce em preto e branco e ganha cor. Padrão clássico de galeria de parceiros e portfólio.

<img src="/logo-cliente.png" class="gray-hov" alt="">

<!-- nasce em P&B, colore no hover — uniformiza uma fileira de logos -->
Desfoque, brilho, saturação e contraste Ao vivo
blur-p
blur-m
satur-x
bright-d
<img src="/foto.jpg" class="blur-p" alt="">    <!-- desfoque pequeno -->
<img src="/foto.jpg" class="blur-m" alt="">    <!-- desfoque médio -->
<img src="/foto.jpg" class="satur-x" alt="">   <!-- mais saturada -->
<img src="/foto.jpg" class="bright-d" alt="">  <!-- mais escura -->
<img src="/foto.jpg" class="contr-x" alt="">   <!-- mais contraste -->
Véu escuro pra legenda legível (.scrim) Ao vivo
Sem véu — difícil de ler
Com scrim — legível 
<div class="rel">
  <img src="/foto.jpg" class="abs-fill of-cov" alt="">

  <!-- o véu: escurece só a parte de baixo, em degradê -->
  <span class="abs-fill scrim"></span>

  <span class="abs">Título legível</span>
</div>

<!-- diferente dos outros, o scrim NÃO é filtro: é um gradiente
     que vai num elemento POR CIMA da imagem -->
Modos de mistura (.blend-*) Ao vivo
blend-mu
blend-sc
blend-ov
blend-lu
<!-- a imagem se mistura com a COR DE FUNDO do pai -->
<div style="background: var(--sw-pri)">
  <img src="/foto.jpg" class="blend-mu" alt="">
</div>

<!-- mu = multiply · sc = screen · ov = overlay · lu = luminosity -->

Atributos

Nenhum.

Variantes

gray \| gray-hov
preto e branco (fixo, ou só no hover)
sepia \| invert
sépia / inverte cores
blur-p \| blur-m
desfoque pequeno / médio
satur-x \| bright-d \| contr-x
saturação / brilho / contraste
blend-mu \| -sc \| -ov \| -lu
modos de mistura (blend-mode)
scrim (com abs-fill)
véu escuro em degradê pra texto sobre foto

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

  • Filtro CSS é aplicado na hora de desenhar: em muitas imagens grandes ao mesmo tempo (galeria inteira em blur-m), pesa no celular.
  • O scrim precisa de um pai com .rel e da imagem por baixo — sozinho, ele é só um degradê invisível.
← AnteriorProporção Próximo →Superfície