Css Filter Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te filter özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.Filter özelliği ile bir html etiketi üzerinde photoshop benzeri efektleri (bulanıklaştırma, parlaklık, şeffaflık vb..) uygulayabiliriz.Bu özellik daha çok resimlerde kullanılır.Efektler için şu değerleri kullanabiliyoruz : 

      ► none : Varsayılan değerdir.Herhangi bir efekt uygulanmaz.

      ► blur : Resmin bulanıklığını ayarlar.

      ► brightness : Resmin parlaklığını ayarlar.

      ► contrast : Resmin kontrastını ayarlar.

      ► drop-shadow : Resme gölge efekti verir.

      ► grayscale : Resmi siyah beyaz yapar.

      ► hue-rotate : Resme bir ton döndürme efekti verir.

      ► invert : Resmin terse çevrilmesini sağlar.

      ► opacity : Resme şeffaflık verir.

      ► sepia : Resme kahverengi tonlarında bir efekt uygular.

Örneklerimiz için bir elma resmini kullanalım ve tüm değerleri bu resim üzerinde uygulayalım.Değerler üzerinde değişiklikler yaparak daha iyi anlayabilirsiniz.

Dikkat : Filter özelliğini kullanırken birden fazla değer vermek isterseniz, değerler arasına boşluk bırakarak yazabilirsiniz.

Html ve Css kodlarımız şu şekilde,

Efektlerin uygulanmış hali şu şekilde,

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
filter

53.0

18.0 -webkit-

13.035.0

9.1

6.0 -webkit-

40.0

15.0 -webkit-

Bu resimde tarayıcıların filter özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Dikkat : Bu özellikleri eski tarayıcılarda da sorunsuz bir şekilde kullanmak istiyorsanız, ön eklerle birlikte kullanmalısınız.Örneğin blur ve brighness değerlerini -webkit- ön eki ile birlikte kullanalım.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 31 – Font Face Kullanımı

Sonraki : Css Dersleri 33 – Flex Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +