CSS Filter Özelliği

CSS’te filter özelliğini kullanarak özellikle resimlerin üzerinde çeşitli efektler uygulayabilirsiniz. Bu efektlerin listesini verelim:

Blur (Bulanıklaştırma)
Brightness (Parlaklık)
Contrast (Kontras)
Drop-shadow (Gölge)
Grayscale (Gri Tonlama)
Hue-rotate
İnvert (Renkleri Tersine Çevirme)
Opacity (Şeffaflık)
Saturate
Sepia (Sepya Efekti)
Contrast — Brightness (Kontras ve Parlaklık Bir Arada)

Bunların ufak örneklerini vermeden önce üzülerek ve kınayarak söylemek istiyorum ki bu efektler Internet Explorer’da çalışmıyor.

Bu efektlerde maalesef tüm tarayıcılar için destek olmadığı için tarayıcı öneklerini kullanacağız. Mesela -webkit-filter gibi.

Blur​

Blur nesnelerimizi bulanıklaştırmaya yarıyor. Kullanımı şu şekilde:

img.dummy-image {
-webkit-filter:blur(5px);
-moz-filter:blur(5px);
}

Burada 5 kısmını değiştirerek daha az veya daha çok bulanık yapabilirsiniz. px cinsinden istediğiniz değeri verebilirsiniz.

(Not: Blur değerini negatif vererek bulanık resimlerin düzgün görünmesini sağlayamazsınız )

Brightness​

Brightness değeri nesne parlaklığıyla oynamamızı sağlıyor. Varsayılan olarak 100% olarak gelen değeri 200% gibi yüksek bir değere çıkartabiliyoruz veya 50% gibi normalden daha düşük bir değere indirebiliyoruz. İşte örnek kod:

img.dummy-image {
-webkit-filter:brightness(200%);
-moz-filter:brightness(200%);
}

Contrast​

İşte bu da ne olduğunu bildiğim ama anlatamadığım şeylerden birisi. Hani şu telefonunuzdan İnstagram’a fotoğraf atarken hep rastgele bi yerlere çekip hoşunuza gittiğinde öyle bıraktığınız konstrast var ya, işte o.

Bu arkadaş da aynı brigtness gibi varsayılan olarak 100% olarak geliyor. Siz istediğiniz gibi değer verebilirsiniz.

Hemen bir örnek verelim. Zaten bunları deneyince ne olduğunu anlayacaksınız.

img.dummy-image {
-webkit-filter:contrast(150%);
-moz-filter:contrast(150%);
}

Drop-Shadow​

Aslında box-shadow ile de aynı sonucu alabiliyoruz ama yine de anlatayım. Drop-shadow da nesnelere veya resimlere gölge efekti vermemizi sağlıyor. Kullanımı da şöyle:

img.dummy-image {
-webkit-filter:drop-shadow(0px 0px 5px #333333);
-moz-filter:drop-shadow(0px 0px 5px #333333);
}

Burada verdiğimiz birinci değer gölgenin sol taraftan margini diyebiliriz. Soldan kaç piksel atlayarak başlamasını istiyorsanız buraya yazıyorsunuz. Birinci parametreye değer olarak 0 (sıfır) verirseniz yatay olarak nesnemizin ortasında olmuş oluyor, yani sağa ve sola eşit miktarda gölge veriyor. Yanlış hatırlamıyorsan negatif değerler de alabiliyor. Denemeye üşendim, siz denersiniz artık.

İkinci değerimiz gölgenin yukarıdan alacağı boşluğu ifade ediyor. Ne demek istediğimi anlamışsınızdır zaten siz. O yüzden daha fazla açıklama yapmayacağım.

Üçüncü değerimiz gölgenin dağılmasını ayarlıyor. Bu kelimelerle anlatması zor bir şey olduğu için bunu size bırakıyorum, zaten 2–3 kez farklı değerler verdikten sonra ne olduğunu anlarsınız.

Zaten farkettiğinizi varsayıyorum; Dördüncü değerimiz de gölgemizin rengi. Açıklama yapmama gerek yok sanırım

Grayscale​

Nesnemizi gri tonlamalı yapmamızı sağlıyor. Varsayılan değeri 0%, eğer siz bu değeri 100% yaparsanız resminiz siyah-beyaz (gri) oluyor. Hemen bir örnek verelim.

img.dummy-image {
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
}

Hue-Rotate​

Açıkçası bunun ne olduğunu bilmiyorum. Bu yüzden sizlere ifade edemiyorum. Sanırım az çok fotoğrafçılık bilgisi olanlar bu efektlerin ne olduğunu bilir ama benim o kadar fotoğrafçılık bilgim yok. O yüzden bunu sadece örnek kullanımı gösterip geçeceğim.

Kendileri derece olarak değer alıyor mesela: 90deg

img.dummy-image {
-webkit-filter:hue-rotate(90deg);
-moz-filter:hue-rotate(90deg);
}

Invert​

İnvert renkleri tersine çevirmeye yarıyor. Örnek olarak siyahları beyaz yapıyor. Tüm renklerin zıtlarını bilmediğimiz için vereceği sonucu tahmin etmek zor, ne iş yaptığını bilin yeter.

Bu da varsayılan değer olarak 0% alıyor. Eğer bu değeri 100% yaparsanız nesnenin renklerini tam zıttıyla değiştiriyor. İşte örnek;

img.dummy-image {
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
}

Opacity​

Bu işlemi artık opacity özelliği ile yapabiliyoruz ama yine de sizlere anlatmalıyım.

Bu arkadaşımız 0% ile 100% arasında değer alıyor. Opaklık değeri yani. Siz opaklık değerini ne kadar düşürürseniz o kadar şeffaf oluyor. 100% yaparsanız da Tam opak oluyor. İşte örnek;

img.dummy-image {
-webkit-filterpacity(30%);
-moz-filterpacity(30%);
}

Saturate​

Bu kelimeyi ilk kez duyuyorum. Google Translate’den baktığınız zaman doyurmak anlamına geldiğini görüyoruz ama yine de buna bir anlam veremedim. Ama etkisine baktığımız zaman sanki pastel boya etkisi veriyor gibi bir hali var. Yalnız bu arkadaş biraz farklı sayılır diğerlerinden. Varsayılan değeri 0 (sıfır) diye biliyorum. Buna direkt sayı değeri veriyoruz. 8 gibi. İşte örnek;

img.dummy-image {
-webkit-filter:saturate(8);
-moz-filter:saturate(8);
}

Sepia​

Bu efektimiz de nesneleri biraz sarılaştırıyor diyebiliriz. Hani o meşhur Samsung E-250 telefonlarda fotoğraflara efekt uygularken gördüğünüz sepya vardı ya, işte o sepya bu sepya. Bunun da varsayılan değeri 0% siz buna 100% değer verirseniz nesnenizi sarı-gri arası bi renge sokmuş oluyorsunuz. Anlatılmaz, görülür. O yüzden hemen deneyelim.

img.dummy-image {
-webkit-filter:sepia(100%);
-moz-filter:sepia(100%);
}

Contrast Brightness​

Bunun ne olduğunu anladığınızı varsayıyorum. Anladığım kadarıyla kontrast ve parlaklığı aynı anda veriyor ve kullanımı şu şekilde;

img.dummy-image {
-webkit-filter:brightness(150%) contrast(150%);
-moz-filter:brightness(150%) contrast(150%);
}

None​

Burada anlatılacak bir şey yok. Eğer efekti kaldırmak isterseniz none değerini kullanıyoruz.

img.dummy-image {
-webkit-filter:none;
-moz-filter:none;
}