css filter nedir? Nasıl Kullanılır?

css filter özelliği, Html elemanlarına efekt özellikleri vermek için kullanılır. Genelde resimlerde kullanırız ama diğer html elementlerinde de kullanılabiliriz.

Aldığı değerler :
none : Değer yok.
blur : Bulanıklık vermek için kullanırız.
contrast : Karşıtlık. (0 – 100).
brightness : Parlaklık vermek için kullanırız. (0 – 100)
grayscale : Gri tonlama. (0 – 100)
invert : Ters çevirmek için kullanılır. (0 – 100)
opacity : Şeffaflık değeri. (0 – 100)
sepia : Kahverengi agırlıklı tonlama. (0 – 100)
saturate : Doygunluk. (0 – 100)
hue-rotate : Renk döndürmek için (0 – 360 derece)
drop-shadow : gölge efekti uygulamak için.

Kodlarımız bazı tarayıcılarda çalışma hatası vermemesi için bazı css özelliklerinde için prefix kullanmamız gereklidir. filter özelliği de bunlardan biridir. İlk örnekte prefix kullanacağız diger örneklerde uzun olmaması için kullanmayacağız. Ama projelerde prefix gerekli olduğu heryerde kullanılmalıdır.

Örnek 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 180px;
            margin-bottom: 20px;          
        }
        div img{
            width: 100%;
            height: auto;
        }
        .one img   { filter: none;  }
        .two img   { filter: blur(2px); }
        .three img { filter: contrast(50%);  }
        .four img  { filter: grayscale(90%); }  
    </style>
</head>
<body>
    <div class="one">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="two">
       <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="three">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="four">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>    
</body>
</html>

Html çıktısı:

Örnek 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 180px;
            margin-bottom: 20px;          
        }
        div img{
            width: 100%;
            height: auto;
        }
        .one img   { filter: none;  }
        .two img   { filter:  opacity(50%); }
        .three img { filter: sepia(80%);  }
        .four img  { filter: drop-shadow(4px 4px 4px black) }  
    </style>
</head>
<body>
    <div class="one">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="two">
       <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="three">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="four">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>    
</body>
</html>

Html çıktısı :

Bu örneklerin sınırı yok. Bunları verdiğimiz örnekten çoğaltarak denemeler yapabilirsiniz.

Başka bir yazımızda görüşmek üzere…

Related

Leave a Reply