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
Stylus'tan CSS'ye Dönüştürücü
SCSS kodunuzu CSS'ye dönüştürün. Hızlı, kolay ve güvenli.
CSS Güzelleştirici
CSS kodunuzu profesyonel hassasiyetle biçimlendirin ve güzelleştirin
CSS3 Geçiş Jeneratörü
Yumuşak opaklık geçişi
Sözcükleri, karakterleri ve daha fazlasını sayma
Doğru kelime sayacı aracımızla metniniz hakkında ayrıntılı istatistikler alın.
CMYK'den PANTONE çevirme
Baskı tasarımı için CMYK renk değerlerini en yakın Pantone® eşdeğerlerine dönüştürün
Base64'den CSV'ye dönüştürücü
Base64 kodlu CSV verilerini anında indirilebilir CSV dosyalarına dönüştürün. Veri yüklemesi olmadan tarayıcınızda yerel olarak çalışır.