Filtros no CSS

Tempo de leitura: 4 minutos

Filtros no CSS: Os filtros CSS são uma ferramenta poderosa que permite aplicar efeitos visuais a elementos HTML, como imagens, backgrounds e até mesmo elementos de texto. Com eles, você pode criar efeitos como blur, contraste, saturação, sepia e muitos outros, adicionando um toque especial e personalizado aos seus designs.

Neste artigo, vamos explorar em detalhes o funcionamento dos filtros CSS, suas diversas funções e como utilizá-los de forma eficaz em seus projetos.

O que são Filtros CSS?

Os filtros CSS são propriedades que permitem aplicar efeitos gráficos a elementos HTML. Ao invés de criar imagens pré-renderizadas com efeitos, você pode aplicar esses efeitos diretamente no elemento HTML utilizando CSS. Isso oferece maior flexibilidade e permite criar efeitos dinâmicos e interativos.

Como os filtros funcionam?

Os filtros CSS funcionam aplicando uma ou mais funções a um elemento. Essas funções modificam a renderização do elemento, alterando suas cores, brilho, contraste, etc

1. blur(): Desfoque

O filtro blur() aplica um efeito de desfoque a um elemento. Ele aceita um valor em pixels para determinar o grau de desfoque. Quanto maior o valor, mais borrado o elemento fica. Por exemplo:

/* Aplica um desfoque de 5 pixels */
.my-element {
    filter: blur(5px);
}

2. opacity(): Opacidade

A propriedade opacity() controla a transparência de um elemento. Um valor de 0 torna o elemento completamente transparente, enquanto 1 o torna totalmente opaco. Por exemplo:

/* Torna o elemento com 50% de opacidade */
.my-element {
    filter: opacity(0.5);
}

3. drop-shadow(): Sombra

O filtro drop-shadow() cria uma sombra projetada para um elemento. Ele aceita valores para a posição horizontal, vertical, desfoque e cor da sombra. Por exemplo:

/* Cria uma sombra vermelha deslocada 2px para a direita e 4px para baixo */
.my-element {
    filter: drop-shadow(2px 4px 5px red);
}

4. grayscale(): Escala de Cinza

O filtro grayscale() converte um elemento para tons de cinza. Um valor de 0 mantém as cores originais, enquanto 1 transforma o elemento em preto e branco. Por exemplo:

/* Converte o elemento para tons de cinza */
.my-element {
    filter: grayscale(1);
}

5. sepia(): Sépia

O filtro sepia() aplica um tom sépia ao elemento. Um valor de 0 mantém as cores originais, enquanto 1 aplica o efeito sépia completo. Por exemplo:

/* Aplica um tom sépia ao elemento */
.my-element {
    filter: sepia(0.7);
}

6. invert(): Inversão de Cores

O filtro invert() inverte as cores de um elemento. Um valor de 0 mantém as cores originais, enquanto 1 inverte todas as cores. Por exemplo:

/* Inverte as cores do elemento */
.my-element {
    filter: invert(1);
}

7. hue-rotate(): Rotação de Matiz

O filtro hue-rotate() gira as cores de um elemento no círculo cromático. Ele aceita um ângulo em graus. Por exemplo:

/* Gira as cores do elemento em 90 graus */
.my-element {
    filter: hue-rotate(90deg);
}

8. brightness(): Brilho

O filtro brightness() ajusta o brilho do elemento. Um valor de 0 deixa o elemento completamente preto, enquanto 1 mantém o brilho original. Valores acima de 1 aumentam o brilho. Por exemplo:

/* Aumenta o brilho do elemento em 50% */
.my-element {
    filter: brightness(1.5);
}

9. contrast(): Contraste

O filtro contrast() ajusta o contraste do elemento. Um valor de 0 deixa o elemento completamente cinza, enquanto 1 mantém o contraste original. Valores acima de 1 aumentam o contraste. Por exemplo:

/* Aumenta o contraste do elemento em 20% */
.my-element {
    filter: contrast(1.2);
}

10. saturate(): Saturação

O filtro saturate() em CSS é usado para aumentar ou diminuir a intensidade da cor de um elemento ao qual é aplicado. Ele afeta a saturação da imagem, tornando-a mais vibrante ou menos colorida. Aqui está os tipos de valores que podem ser atribuidos e um exemplo de código:

• Valor numérico: Por exemplo, 0 ou 1.5.
• Valor percentual: Por exemplo, 100% ou 50%.

/* Deixar completamente dessaturado */
filter: saturate(0);

/* Aumentar a saturação em 40% */
filter: saturate(0.4);

/* Sem efeito (100% de saturação) */
filter: saturate(100%);

/* Saturação duplicada (200%) */
filter: saturate(200%);

11. url(): Filtros Personalizados

O filtro url() permite aplicar filtros personalizados a elementos usando imagens ou vídeos como máscaras. Por exemplo, podemos criar um efeito de recorte usando uma imagem como máscara:

/* Aplica um filtro personalizado usando uma imagem como máscara */
.my-element {
    filter: url("mask.png");
}

Exemplos Práticos

Aqui estão alguns exemplos práticos de como usar os filtros no CSS:

Exemplo 1: Desfoque em Imagens de Fundo

/* Aplica um desfoque de 5 pixels na imagem de fundo */
.header {
    background-image: url("background.jpg");
    filter: blur(5px);
}

Exemplo 2: Sombra em Ícones

/* Cria uma sombra projetada para ícones */
.icon {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

Exemplo 3: Transformando Cores

/* Converte o texto para tons de sépia */
.quote {
    color: #333;
    filter: sepia(0.7);
}

Conclusão

Filtros no CSS: Os filtros CSS são uma ferramenta poderosa para criar efeitos visuais personalizados e aprimorar a aparência de seus projetos web. Ao dominar as diferentes funções de filtro e suas combinações, você poderá criar designs mais criativos e envolventes. No entanto, é importante utilizar os filtros com moderação e considerar o impacto no desempenho e na acessibilidade.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: