Softonic

CSS Filtre Üreticisi

Adım 1 / 2
Sonraki

CSS filter özelliği, bulanıklık, parlaklık, kontrast ve doygunluk gibi görüntü işleme efektlerini yalnızca görsellere değil her öğeye uygular. Birden fazla filtreyi zincirlemek ve birimleri doğru ayarlamak çoğu hatanın kaynağıdır. Bu oluşturucu en yaygın beş işlev için filter bildirimini üretir: bulanıklık, parlaklık, kontrast, gri tonlama ve doygunluk. Değerlerinizi girin ve oluşan CSS kodunu kopyalayın.

Filtre zinciri nasıl oluşturulur?

  1. 1

    Değerleri girin

    Bulanıklık piksel cinsinden; parlaklık, kontrast, gri tonlama ve doygunluk yüzde cinsindendir.

  2. 2

    Ölçeği anlayın

    Parlaklık ve kontrast %100'de değişiklik olmadığı anlamına gelir; %0'da öğe siyah veya gri olur. Gri tonlama %0 (tam renk) ile %100 (tamamen renksiz) arasında gider; %100 doygunluk renkleri olduğu gibi korur.

  3. 3

    CSS kodunu oluşturun

    Düğmeye tıklayın, araç beş işlevin tümünü içeren birleşik `filter` kuralını çıkarır.

  4. 4

    Kuralı kopyalayın

    Sonucu kopyalayıp stil sayfanıza yapıştırın.

  5. 5

    Sırayı kontrol edin

    İşlevler soldan sağa uygulanır. Efekt beklediğinizden farklıysa değerleri ayarlayın.

Filtre fonksiyonları

Fonksiyon Birim Etki
blur() px Gauss bulanıklığı. 0 = bulanıklık yok
brightness() % veya ondalık 100% = değişiklik yok, 0% = siyah, 200% = iki kat parlak
contrast() % veya ondalık 100% = değişiklik yok, 0% = gri, 200% = iki kat
saturate() % veya ondalık 100% = değişiklik yok, 0% = gri tonlama
grayscale() % veya ondalık 0% = değişiklik yok, 100% = tamamen renksiz
sepia() % veya ondalık 0% = değişiklik yok, 100% = tamamen sepya
hue-rotate() deg 0deg = değişiklik yok. Renk çarkını döndürür
invert() % veya ondalık 0% = değişiklik yok, 100% = tamamen ters
opacity() % veya ondalık opacity özelliğiyle aynı
drop-shadow() x y bulanıklık renk box-shadow gibi ancak opaklık/clip-path’i takip eder

Zincirleme sırası önemlidir

filter: brightness(0.5) saturate(2) önce parlaklığı, sonra doygunluğu uygular; iki filtre üst üste biner.

filter: saturate(2) brightness(0.5) önce doygunluğu uygular. Görüntü koyulaştırılmadan önce daha parlak olduğundan renk doygunluğu daha belirgin olur.

Görsel fark inceyse de gerçektir. Filtre zinciri beklediğiniz gibi görünmediğinde iki sırayı da deneyin.

Sık kullanılan tarifler

/* Soluk fotoğraf görünümü */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / soluk */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Duotone yaklaşımı */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Hero görselini karart */
filter: brightness(0.6);

/* Devre dışı durum */
filter: grayscale(1) opacity(0.6);

/* Buzlu cam katmanı */
filter: blur(12px) saturate(1.3);

Mat cam efekti için backdrop-filter

filter öğenin kendisine uygulanır; backdrop-filter ise yarı saydam bir öğenin arkasında kalana uygulanır; bu da iOS’un yaygınlaştırdığı mat cam efektidir.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Destek: Tüm modern tarayıcılar; Firefox 103 sürümünden itibaren bunu nihayet bayrak gerektirmeden destekliyor.

Performans notları

  • blur(), her pikseli bir çekirdekle konvolüsyona soktuğu için en maliyetli filtredir. 4K bir hero görselinde 30px bulanıklık gerçek anlamda kare düşürür.
  • grayscale, sepia, brightness ve benzerleri piksel bazlı renk dönüşümleridir, ucuzdur.
  • Modern tarayıcılarda filtreler GPU ile hızlandırılır; ancak blur() animasyonu düşük donanımlı cihazlarda hâlâ takılır.
  • Animasyondan önce will-change: filter ayarlamak iyi olur.

filter: drop-shadow() ile box-shadow karşılaştırması

  • box-shadow, elementin kenar kutusunu takip eder (border-radius’ye uygundur).
  • filter: drop-shadow(), elemanın şeffaf olmayan piksellerini takip eder; yani clip-path şekillerini, PNG şeffaflığını ve SVG yollarını belirler.

Kesilmiş veya şeffaf görüntülerdeki gölgeler için drop-shadow kullanın; standart kartlar ve kutular için ise box-shadow daha hızlıdır.

Sık Sorulan Sorular

Evet, filtre, elemana ve tüm alt elemanlarına bir grup olarak uygulanır. Bir ebeveyni filtrelediğinizde alt elemanlar da dahil olur. Sadece ebeveyn arka planını filtrelemek için içeriği ayrı bir yığma bağlamına yerleştirin veya backdrop-filter kullanın.

Çünkü bulanıklık, işlenmiş metin de dahil olmak üzere öğenin tamamına uygulanır. Yalnızca sıradan filter ile arka planı bulanıklaştırıp metni net tutmanın bir yolu yoktur. Yarı saydam bir katmanda backdrop-filter kullanın ve metni filtre uygulanan öğenin dışında tutun.

Evet, tüm filtre fonksiyonları animasyona uygundur. Mobil cihazlarda bulanıklık performansına dikkat edin; bulanıklık yarıçapını canlandırmak belirgin şekilde maliyetlidir. grayscale, sepia ve brightness ise ucuza animasyona alınır.

Evet, CSS filter, diğer tüm DOM öğeleri gibi SVG öğelerine de uygulanır. SVG ayrıca daha güçlü ancak çok daha ayrıntılı olan kendi gelişmiş <filter> öğe sisteminin de sahiptir.

İlgili Araçlar

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur