Filter CSS

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 22 dari 43.

Filter memungkinkan kamu mengubah tampilan gambar, latar belakang, bahkan teks dengan efek yang menarik. Ini seperti memakai kacamata hitam, menyalakan lampu sorot, atau beralih ke mode hitam-putih: semuanya cukup dengan satu baris CSS.

1. Buram (px) : Membuat elemen terlihat lembut dan tidak fokus.

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

2. Brightness(%): Mengatur seberapa terang atau gelap tampilan sesuatu.

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

3. Skala abu-abu(%): Mengubah warna menjadi hitam putih.

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

4. Sepia(%): Menambahkan nuansa hangat kecokelatan agar foto terasa retro.

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

Ada banyak filter lain yang bisa kamu coba! Silakan jelajahi dan lihat efek kreatif apa yang bisa kamu buat.

Tantangan

Mudah

Di galeri terdapat empat gambar. Tantanganmu adalah menerapkan filter berikut pada setiap gambar:

Gambar Pertama (Blur): Terapkan filter blur(3px) agar gambar tampak lembut dan tidak fokus.
Gambar Kedua (Kecerahan): Gunakan brightness(2.0) agar gambar lebih cerah.
Gambar Ketiga (Grayscale): Terapkan grayscale(100%) agar gambar menjadi hitam putih.
Gambar Keempat (Sepia): Gunakan sepia(70%) untuk memberi gambar nuansa hangat dan vintage.

Setiap gambar berada di dalam elemen pembungkus <div> dengan class yang dinamai sesuai filternya (blur, brightness, grayscale, sepia). Pilih gambar dengan selector turunan, misalnya .blur img { filter: blur(3px); }, lalu tulis satu aturan untuk setiap gambar.

Coba sendiri

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