CSS Filtreleri nedir?

CSS Filtreleri, bir öğeye bulanıklaştırma veya renk kaydırma gibi grafik efektler uygulamanıza olanak tanır. Genellikle görüntüler, arka planlar ve kenarlıklar için kullanılırlar.

Filtreler, harici görüntü düzenleme araçlarına ihtiyaç duymadan görsel efektler oluşturmak, görüntüleri geliştirmek veya benzersiz tasarım öğeleri oluşturmak için kullanılabilir.

Desteklenen CSS Filtre Özellikleri

• blur()- Öğeye Gauss bulanıklığı uygular.
• brightness()- Öğenin parlaklığını ayarlar.
• contrast()- Öğenin kontrastını ayarlar.
• grayscale()- Öğeyi gri tonlamaya dönüştürür.
• hue-rotate()- Öğeye bir ton döndürmesi uygular.
• invert()- Öğenin renklerini tersine çevirir.
• opacity()- Öğenin opaklığını ayarlar.
• saturate()- Elementi doyurur veya doygunluğunu giderir.
• sepia()- Öğeyi sepyaya dönüştürür.

Filtreler Nasıl Uygulanır

Bu araç tarafından oluşturulan CSS kodunu kullanarak herhangi bir HTML öğesine filtreler uygulayabilirsiniz. Bunu şu şekilde yapabilirsiniz:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Tarayıcı Uyumluluğu

CSS filtreleri, Chrome, Firefox, Safari, Edge ve Opera dahil olmak üzere modern tarayıcılarda yaygın olarak desteklenmektedir. Ancak, Internet Explorer gibi eski tarayıcılar bunları desteklemez.