Funções de filter: blur(), brightness(), contrast(), grayscale()

Na lição anterior, você teve uma introdução à propriedade filter e entendeu seu propósito de aplicar efeitos visuais. Agora, vamos mergulhar nas funções de filtro mais utilizadas, que permitem manipular o desfoque e os aspectos de cor e luz dos seus elementos.

Pense nessas funções como os botões e controles de um painel de edição de imagem. Cada botão (blur, brightness, contrast, grayscale) tem uma função específica para ajustar a aparência visual do seu elemento.

Funções de Filtro Essenciais

Todas essas funções são aplicadas como valores da propriedade filter.

1. blur(raio): O Efeito de Desfoque

A função blur() aplica um efeito de desfoque gaussiano ao elemento. É como se você estivesse olhando para o elemento através de uma lente embaçada.

• raio: Define a intensidade do desfoque.
  • Geralmente expresso em unidades de comprimento como px (pixels).
  • Quanto maior o valor, mais borrado o elemento ficará.
  • 0 (ou nenhum valor) significa nenhum desfoque.

Exemplos:

• filter: blur(3px);
  • Aplica um desfoque suave de 3 pixels.
• filter: blur(10px);
  • Aplica um desfoque mais intenso de 10 pixels.

Aplicação: Ideal para criar efeitos de profundidade de campo, esconder detalhes de uma imagem até que o usuário interaja, ou para estilizar fundos.

2. brightness(quantidade): Ajustando o Brilho

A função brightness() ajusta o brilho do elemento. Você pode deixá-lo mais claro ou mais escuro.

• quantidade: Um valor numérico ou porcentagem.
  • 0% ou 0: O elemento fica completamente preto (sem brilho).
  • 100% ou 1: O brilho original do elemento (padrão).
  • Valores maiores que 100% (ex: 150% ou 1.5) aumentam o brilho.
  • Valores entre 0% e 100% (ex: 50% ou 0.5) diminuem o brilho.

Exemplos:

• filter: brightness(1.5);
  • Aumenta o brilho em 50%.
• filter: brightness(75%);
  • Diminui o brilho em 25%.

Aplicação: Útil para clarear ou escurecer imagens, criar efeitos de hover em botões ou cards, ou ajustar a legibilidade de texto sobre imagens.

3. contrast(quantidade): Manipulando o Contraste

A função contrast() ajusta o contraste do elemento, ou seja, a diferença entre as áreas claras e escuras.

• quantidade: Um valor numérico ou porcentagem.
  • 0% ou 0: O elemento fica completamente cinza (sem contraste).
  • 100% ou 1: O contraste original do elemento (padrão).
  • Valores maiores que 100% (ex: 200% ou 2) aumentam o contraste.
  • Valores entre 0% e 100% (ex: 50% ou 0.5) diminuem o contraste.

Exemplos:

• filter: contrast(2);
  • Dobra o contraste do elemento.
• filter: contrast(0.7);
  • Diminui o contraste em 30%.

Aplicação: Pode ser usado para dar mais "vida" a imagens, criar efeitos dramáticos ou melhorar a distinção visual entre elementos.

4. grayscale(quantidade): Preto e Branco

A função grayscale() converte o elemento para escala de cinza, removendo a saturação das cores.

• quantidade: Um valor numérico ou porcentagem.
  • 0% ou 0: O elemento mantém suas cores originais (padrão).
  • 100% ou 1: O elemento fica completamente em preto e branco.
  • Valores intermediários (ex: 50%) aplicam uma conversão parcial.

Exemplos:

• filter: grayscale(100%);
  • Converte o elemento para preto e branco.
• filter: grayscale(0.5);
  • Converte o elemento para 50% em escala de cinza.

Aplicação: Perfeito para efeitos de hover em galerias de imagens (onde a cor aparece ao passar o mouse), ou para dar um toque vintage/artístico a elementos.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Funções de Filter: blur(), brightness(), contrast(), grayscale()</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f4f4f4;
      padding: 20px;
    }

    .card {
      width: 250px;
      height: 200px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: transform 0.3s ease-out;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 0.4s ease-in-out; /* Transição suave para o filtro */
    }

    .card-title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0,0,0,0.6);
      color: white;
      padding: 10px;
      margin: 0;
      text-align: center;
      font-size: 1.1em;
      font-weight: bold;
    }

    /* --- Aplicação dos Filtros --- */

    .card-blur img:hover {
      filter: blur(5px);
    }

    .card-brightness img:hover {
      filter: brightness(1.7); /* Mais claro */
    }

    .card-contrast img:hover {
      filter: contrast(250%); /* Mais contraste */
    }

    .card-grayscale img:hover {
      filter: grayscale(100%); /* Preto e branco */
    }

    .card-combined img:hover {
      filter: blur(2px) brightness(1.2) contrast(150%) grayscale(50%); /* Múltiplos filtros */
    }
  </style>
</head>
<body>
  <div class="card card-blur">
    <img src="https://via.placeholder.com/400x300/FF5733/FFFFFF?text=Natureza" alt="Natureza">
    <div class="card-title">Efeito Blur</div>
  </div>
  <div class="card card-brightness">
    <img src="https://via.placeholder.com/400x300/33FF57/FFFFFF?text=Cidade" alt="Cidade">
    <div class="card-title">Efeito Brilho</div>
  </div>
  <div class="card card-contrast">
    <img src="https://via.placeholder.com/400x300/3357FF/FFFFFF?text=Montanhas" alt="Montanhas">
    <div class="card-title">Efeito Contraste</div>
  </div>
  <div class="card card-grayscale">
    <img src="https://via.placeholder.com/400x300/FF33FF/FFFFFF?text=Pessoas" alt="Pessoas">
    <div class="card-title">Efeito Grayscale</div>
  </div>
  <div class="card card-combined">
    <img src="https://via.placeholder.com/400x300/FFFF33/000000?text=Abstrato" alt="Abstrato">
    <div class="card-title">Filtros Combinados</div>
  </div>
</body>
</html>

Resultado:

• Passe o mouse sobre cada card para ver os efeitos de filtro em ação.
• Observe como cada função altera a imagem de uma maneira única.

Pontos Chave:

• blur(): Controla o nível de desfoque.
• brightness(): Controla a intensidade da luz.
• contrast(): Controla a diferença entre tons claros e escuros.
• grayscale(): Controla a conversão para preto e branco.
• Valores: A maioria aceita porcentagens ou números. blur() aceita unidades de comprimento.
• Combinação: Você pode combinar várias funções de filtro na mesma propriedade filter (ex: filter: blur(2px) brightness(1.2);).
• transition: Sempre use transition para que a aplicação dos filtros seja suave e animada.

Essas funções são a base para muitos efeitos visuais modernos e interativos, permitindo que você adicione personalidade e dinamismo aos seus elementos HTML e imagens.