Filtros CSS

Parte da seção Domínio do CSS do Journey de HTML da Coddy. Lição 22 de 43.

Os filtros permitem alterar visualmente imagens, planos de fundo e até mesmo textos usando efeitos divertidos. É como colocar óculos de sol, acender um holofote ou mudar para o modo preto e branco: tudo com uma linha de CSS.

1. Blur (px) : Faz o elemento parecer suave e desfocado.

img {
  filter: blur(5px);
}
//slightly out of focus

2. Brilho(%): Controla quão claro ou escuro algo aparece.

img {
  filter: brightness(150%);
}
//brightens like turning on a spotlight.

3. Grayscale(%): Converte a cor para preto e branco.

img {
  filter: grayscale(100%);
}
//classic vintage or newspaper effect.

4. Sepia(%): Adiciona um tom quente e amarronzado para dar um ar de foto retrô.

img {
  filter: sepia(70%);
}
//like an old photo album.

Há muitos outros filtros com os quais você pode experimentar! Sinta-se à vontade para explorá-los e ver quais efeitos criativos você pode criar.

Desafio

Fácil

Você tem quatro imagens em uma galeria. Seu desafio é aplicar os seguintes filtros a cada imagem:

Primeira imagem (Desfoque): aplique um filtro blur(3px) para deixar a imagem suave e fora de foco.
Segunda imagem (Brilho): use brightness(2.0) para deixar a imagem mais clara.
Terceira imagem (Escala de cinza): aplique grayscale(100%) para transformar a imagem em preto e branco.
Quarta imagem (Sépia): use sepia(70%) para dar à imagem um tom quente e vintage.

Cada imagem fica dentro de um contêiner <div> com uma classe nomeada de acordo com seu filtro (blur, brightness, grayscale, sepia). Alcance a imagem com um seletor descendente, por exemplo .blur img { filter: blur(3px); }, e escreva uma regra para cada imagem.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>