CSS Filtreleri

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 22 / 43.

Filtreler, eğlenceli efektler kullanarak görselleri, arka planları ve hatta metinleri görsel olarak değiştirmenizi sağlar. Bu, güneş gözlüğü takmak, bir spot ışığını açmak veya siyah-beyaz moda geçmek gibidir: üstelik hepsi tek bir CSS satırıyla.

1. Bulanıklık (px) : Öğenin yumuşak ve odak dışı görünmesini sağlar.

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

2. Parlaklık(%): Bir şeyin ne kadar açık veya koyu göründüğünü kontrol eder.

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

3. Grayscale(%): Rengi siyah beyaza dönüştürür.

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

4. Sepia(%): Retro bir fotoğraf havası için sıcak, kahverengimsi bir ton ekler.

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

Deneyebileceğin daha birçok filtre var! Bunları keşfetmekten ve hangi yaratıcı efektleri oluşturabileceğini görmekten çekinme.

Görev

Kolay

Bir galeride dört görseliniz var. Göreviniz, aşağıdaki filtreleri her görsele uygulamaktır:

Birinci Görsel (Bulanıklık): Görseli yumuşak ve odak dışı hâle getirmek için blur(3px) filtresini uygulayın.
İkinci Görsel (Parlaklık): Görseli daha parlak hâle getirmek için brightness(2.0) kullanın.
Üçüncü Görsel (Gri Tonlama): Görseli siyah beyaza dönüştürmek için grayscale(100%) filtresini uygulayın.
Dördüncü Görsel (Sepya): Görsele sıcak, vintage bir ton vermek için sepia(70%) kullanın.

Her görsel, filtresinin adını taşıyan bir sınıfa (<div>, blur, brightness, grayscale) sahip bir sarmalayıcının sepia içinde yer alır. Alt öğe seçicisi kullanarak görsele ulaşın; örneğin .blur img { filter: blur(3px); } ve her görsel için bir kural yazın.

Kendin dene

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