Funções de filter: hue-rotate(), invert(), opacity(), saturate(), sepia()

Descubra outros filtros para manipulação de cores e efeitos artísticos.

Além das funções de filtro que controlam o desfoque, brilho, contraste e escala de cinza, o CSS oferece outras funções poderosas para manipular cores e criar efeitos visuais artísticos. Nesta lição, vamos explorar hue-rotate(), invert(), opacity(), saturate() e sepia().

Pense nessas funções como filtros especiais que você pode aplicar a uma imagem ou elemento para dar um toque único, seja mudando suas cores, invertendo-as, ajustando a transparência ou dando um ar vintage.

Funções de Filtro para Manipulação de Cores e Efeitos Especiais

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

1. hue-rotate(angulo): Girando as Cores

A função hue-rotate() gira os tons de cor (matiz) do elemento ao longo do círculo cromático. Isso muda a cor de todos os pixels do elemento.

  • angulo: Um valor de ângulo (geralmente em deg).
    • 0deg (ou nenhum valor) mantém as cores originais.
    • 360deg também retorna às cores originais (uma volta completa no círculo cromático).
    • Valores intermediários mudam as cores.

Exemplos:

  • filter: hue-rotate(90deg);
    • Gira os tons de cor em 90 graus no círculo cromático.
  • filter: hue-rotate(180deg);
    • Inverte completamente as cores (complementares).

Aplicação: Ótimo para criar efeitos psicodélicos, mudar o esquema de cores de um elemento sem alterar o HTML/CSS original, ou para efeitos de hover criativos.

2. invert(quantidade): Invertendo Cores

A função invert() inverte as cores do elemento, como um efeito de "negativo" de fotografia.

  • quantidade: Um valor numérico ou porcentagem.
    • 0% ou 0: O elemento mantém suas cores originais (padrão).
    • 100% ou 1: O elemento tem suas cores completamente invertidas.
    • Valores intermediários aplicam uma inversão parcial.

Exemplos:

  • filter: invert(100%);
    • Inverte completamente as cores.
  • filter: invert(0.5);
    • Inverte as cores em 50%.

Aplicação: Útil para temas escuros (dark mode) onde ícones claros precisam ser escuros, ou para efeitos de destaque.

3. opacity(quantidade): Transparência

A função opacity() ajusta a transparência do elemento. É similar à propriedade opacity normal, mas pode ser combinada com outros filtros.

  • quantidade: Um valor numérico ou porcentagem.
    • 0% ou 0: O elemento fica completamente transparente (invisível).
    • 100% ou 1: O elemento fica completamente opaco (visível, padrão).
    • Valores intermediários tornam o elemento semitransparente.

Exemplos:

  • filter: opacity(0.5);
    • Torna o elemento 50% transparente.
  • filter: opacity(25%);
    • Torna o elemento 75% transparente.

Aplicação: Criar efeitos de fade-in/fade-out, sobreposições semitransparentes, ou para indicar elementos desabilitados.

4. saturate(quantidade): Intensidade das Cores

A função saturate() ajusta a intensidade (saturação) das cores do elemento.

  • quantidade: Um valor numérico ou porcentagem.
    • 0% ou 0: O elemento fica completamente dessaturado (preto e branco).
    • 100% ou 1: A saturação original do elemento (padrão).
    • Valores maiores que 100% (ex: 200% ou 2) aumentam a saturação (cores mais vibrantes).
    • Valores entre 0% e 100% (ex: 50% ou 0.5) diminuem a saturação (cores mais pálidas).

Exemplos:

  • filter: saturate(200%);
    • Dobra a saturação das cores.
  • filter: saturate(0.2);
    • Deixa as cores muito pálidas.

Aplicação: Para dar mais vida a imagens, criar efeitos de hover onde as cores "explodem", ou para dessaturar elementos secundários.

5. sepia(quantidade): Efeito Sépia

A função sepia() aplica um tom sépia ao elemento, dando-lhe uma aparência vintage ou antiga.

  • 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 com o tom sépia.
    • Valores intermediários aplicam um tom sépia parcial.

Exemplos:

  • filter: sepia(100%);
    • Aplica o efeito sépia completo.
  • filter: sepia(0.7);
    • Aplica um tom sépia de 70%.

Aplicação: Ideal para fotos antigas, galerias com tema vintage, ou para criar um estilo visual específico.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Funções de Filter: hue-rotate(), invert(), opacity(), saturate(), sepia()</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-hue-rotate img:hover {
      filter: hue-rotate(180deg); /* Inverte as cores */
    }

    .card-invert img:hover {
      filter: invert(100%); /* Efeito negativo */
    }

    .card-opacity img:hover {
      filter: opacity(0.3); /* Torna 70% transparente */
    }

    .card-saturate img:hover {
      filter: saturate(400%); /* Cores super vibrantes */
    }

    .card-sepia img:hover {
      filter: sepia(100%); /* Efeito vintage */
    }

    .card-all-combined img:hover {
      filter: hue-rotate(90deg) invert(20%) opacity(0.8) saturate(200%) sepia(50%); /* Combinação de todos */
    }
  </style>
</head>
<body>
  <div class="card card-hue-rotate">
    <img src="https://via.placeholder.com/400x300/FF5733/FFFFFF?text=Pôr+do+Sol" alt="Pôr do Sol">
    <div class="card-title">Hue Rotate</div>
  </div>
  <div class="card card-invert">
    <img src="https://via.placeholder.com/400x300/33FF57/FFFFFF?text=Floresta" alt="Floresta">
    <div class="card-title">Invert</div>
  </div>
  <div class="card card-opacity">
    <img src="https://via.placeholder.com/400x300/3357FF/FFFFFF?text=Oceano" alt="Oceano">
    <div class="card-title">Opacity</div>
  </div>
  <div class="card card-saturate">
    <img src="https://via.placeholder.com/400x300/FF33FF/FFFFFF?text=Flores" alt="Flores">
    <div class="card-title">Saturate</div>
  </div>
  <div class="card card-sepia">
    <img src="https://via.placeholder.com/400x300/FFFF33/000000?text=Antigo" alt="Antigo">
    <div class="card-title">Sepia</div>
  </div>
  <div class="card card-all-combined">
    <img src="https://via.placeholder.com/400x300/33FFFF/FFFFFF?text=Galáxia" alt="Galáxia">
    <div class="card-title">Todos 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, e como elas podem ser combinadas.

Pontos Chave:

  • hue-rotate(): Gira os tons de cor.
  • invert(): Inverte as cores.
  • opacity(): Controla a transparência (similar à propriedade opacity).
  • saturate(): Controla a intensidade das cores.
  • sepia(): Aplica um tom vintage.
  • Valores: A maioria aceita porcentagens ou ângulos (deg para hue-rotate()).
  • Combinação: Lembre-se que você pode combinar várias funções de filtro na mesma propriedade filter (ex: filter: hue-rotate(90deg) invert(50%);).
  • transition: Essencial para animações suaves.

Essas funções expandem ainda mais suas possibilidades criativas, permitindo que você crie designs com paletas de cores dinâmicas, efeitos de destaque únicos e estilos visuais memoráveis.