Filtros no CSS

Tempo de leitura: 3 minutos

Filtros no CSS: Os filters (ou filtros) no CSS são uma maneira poderosa de aplicar efeitos visuais a elementos HTML. Eles nos permitem modificar a aparência de imagens, textos e outros elementos de forma criativa e dinâmica.

Neste artigo, vamos explorar vários filtros disponíveis no CSS, entender como usá-los e fornecer exemplos práticos.

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

Os filtros no CSS nos permitem adicionar efeitos visuais interessantes aos nossos elementos. Eles são uma ferramenta versátil para melhorar a aparência e a experiência do usuário. Experimente diferentes combinações de filtros e crie designs únicos!

E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!