Css Filter Kullanımı

Bu yazımızda 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.

 Önemli  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,

CSS FİLTER ÖZELLİĞİ TARAYICI DESTEĞİ

Özellik Chrome IE Firefox Safari Opera
filter

53.0

18.0 -webkit-

13.0 35.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.

 Önemli  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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link