Filtri CSS

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 22 di 43.

I filtri ti permettono di modificare visivamente le immagini, gli sfondi e persino il testo usando effetti divertenti. È come indossare occhiali da sole, accendere un riflettore o passare alla modalità bianco e nero: tutto con una sola riga di CSS.

1. Sfocatura (px) : Fa apparire l'elemento sfocato e fuori fuoco.

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

2. Luminosità(%): Controlla quanto chiaro o scuro appare qualcosa.

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

3. Scala di grigi(%): Converte il colore in bianco e nero.

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

4. Sepia(%): Aggiunge una tonalità calda e marroncina per un effetto da foto retrò.

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

Ci sono molti altri filtri con cui puoi sperimentare! Sentiti libero di esplorarli e scoprire quali effetti creativi puoi creare.

Sfida

Facile

Hai quattro immagini in una galleria. La tua sfida consiste nell'applicare i seguenti filtri a ciascuna immagine:

Prima immagine (sfocatura): Applica un filtro blur(3px) per rendere l'immagine morbida e fuori fuoco.
Seconda immagine (luminosità): Usa brightness(2.0) per rendere l'immagine più luminosa.
Terza immagine (scala di grigi): Applica grayscale(100%) per trasformare l'immagine in bianco e nero.
Quarta immagine (seppia): Usa sepia(70%) per dare all'immagine una tonalità calda e vintage.

Ogni immagine si trova all'interno di un elemento contenitore <div> con una classe che prende il nome dal filtro (blur, brightness, grayscale, sepia). Seleziona l'immagine con un selettore discendente, ad esempio .blur img { filter: blur(3px); }, e scrivi una regola per ogni immagine.

Provalo tu

<!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>