CSS Filtre Oluşturucu
Özel CSS görüntü filtreleri oluşturun ve görselleştirin
Preview
CSS Code
Filtre Kontrolleri
Popüler Filtreler
Vintage
Neon Glow
Polaroid
Nostaljik Film
Dijital Sanat
CSS Filtreleri Nasıl Kullanılır?
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:
1. Bir Eleman Seçin
Filtreyi uygulamak istediğiniz HTML öğesini seçin. Bu bir görüntü, arka plan veya başka herhangi bir öğe olabilir.
2. Bir Sınıf veya Kimlik Ekleyin
Öğenin henüz bir sınıfı veya kimliği yoksa, CSS ile hedeflemeyi kolaylaştırmak için bir tane ekleyin.
3. Filtreyi uygulayın
CSS'yi kullanınfilterOluşturulan filtreyi uygulamak için stil sayfanızdaki veya satır içi stilinizdeki özelliği.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Birden Çok Filtreyi Birleştirin
Birden çok filtre işlevini, boşluklarla ayırarak birbiri ardına listeleyerek birleştirebilirsiniz.
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.
Related Tools
Mükemmel Flexbox Düzenleri Oluşturun
Sezgisel sürükle ve bırak arayüzümüzle CSS flexbox kodunu görselleştirin, özelleştirin ve oluşturun.
Stylus'tan CSS'ye Dönüştürücü
SCSS kodunuzu CSS'ye dönüştürün. Hızlı, kolay ve güvenli.
SCSS'den CSS'ye dönüştürücü
SCSS kodunuzu CSS'ye dönüştürün. Hızlı, kolay ve güvenli.
CSS Üçgen Oluşturucu
Üçgeninizi aşağıdaki seçeneklerle özelleştirin ve oluşturulan CSS kodunu anında alın.
ASCII'den İkiliye çevirme
ASCII karakterlerini zahmetsizce ikili koda dönüştürün
CSS Küçültücü
CSS kodunuzu profesyonel hassasiyetle sıkıştırın ve optimize edin