CSS Filtreleri

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

Filtreler, eğlenceli efektler kullanarak görüntüleri, arka planları ve hatta metinleri görsel olarak değiştirmenize olanak tanır. Bu, güneş gözlüğü takmak, bir spot ışığı yakmak veya siyah-beyaz moduna geçmek gibidir — hepsi tek bir CSS satırı ile.

1. Blur (px) – Öğenin yumuşak ve odak dışı görünmesini sağlar.

img {
  filter: blur(5px);
}
//hafifçe odak dışı

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

img {
  filter: brightness(150%);
}
//bir spot ışığını açmak gibi aydınlatır.

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

img {
  filter: grayscale(100%);
}
//klasik nostaljik veya gazete efekti.

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

img {
  filter: sepia(70%);
}
//eski bir fotoğraf albümü gibi.

Deneyebileceğiniz daha pek çok filtre var! Onları keşfetmekten ve ne tür yaratıcı efektler oluşturabileceğinizi görmekten çekinmeyin.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

Bir galeride dört resminiz var. Göreviniz, her bir resme aşağıdaki filtreleri uygulamaktır:

Birinci Resim (Bulanıklık): Resmi yumuşak ve odak dışı hale getirmek için bir blur(3px) filtresi uygulayın.
İkinci Resim (Parlaklık): Resmi daha parlak hale getirmek için brightness(2.0) kullanın.
Üçüncü Resim (Gri Tonlama): Resmi siyah beyaz yapmak için grayscale(100%) uygulayın.
Dördüncü Resim (Sepya): Resme sıcak, nostaljik bir ton vermek için sepia(70%) kullanın.

Kopya kağıdı

CSS filtreleri; efektler kullanarak görüntüleri, arka planları ve metinleri görsel olarak değiştirmenize olanak tanır.

Blur (px) – Öğeleri yumuşatır ve odak dışı bırakır:

img {
  filter: blur(5px);
}

Brightness(%) – Bir şeyin ne kadar açık veya koyu görüneceğini kontrol eder:

img {
  filter: brightness(150%);
}

Grayscale(%) – Renkleri siyah beyaza dönüştürür:

img {
  filter: grayscale(100%);
}

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

img {
  filter: sepia(70%);
}

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>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.