CSS Filtresi Oluşturucu

Bulanıklık, parlaklık gibi efektleri kaydırıcılarla ayarlayın ve CSS filter kodunu önizleme yaparak oluşturun

Güncelleme bilgisiCSS filtresi oluşturucusu eklendi, bulanıklık ve parlaklığı ayarlayarak oluşturunGüncellemeleri görüntüle

Özellikler

9 çeşit efekti kaydırıcıyla

Her hareket ettirdiğinizde önizleme ve CSS kodu aynı anda değişir

Kendi görüntünüzle deneyebilirsiniz

Yerel görüntünüzü tarayıcıda görüntüleyip efekti kontrol edin

Basıldığı sürece orijinal görüntü

Efekt uygulanmadan önce ve sonrasını hemen karşılaştırın

8 örnek üzerinden ince ayar

Sepya tonu veya vintage gibi örneklerden başlayarak ayarlayın

Nasıl Kullanılır

Görüntü seçin

"Kendi görüntünüzü seçin" ile yerel görüntünüzü belirtin. Seçmezseniz yerleşik örnek görüntüyle deneyebilirsiniz

Efekti ayarlayın

Örnek olarak yakın bir havayı seçin veya her kaydırıcıyla efektin gücünü ayarlayın

Önce ve sonrasını karşılaştırın

"Orijinal görüntüyle karşılaştır" basıldığı sürece efektsiz görüntü görüntülenecektir

Kodu kopyalayın

"Kopyala" düğmesiyle filter satırını kendi CSS'inize yapıştırın

Kullanım Alanları

Arka plan fotoğrafındaki metnin okunabilirliği

Arka plan fotoğrafını hafifçe bulanıklaştırıp üzerine konulan başlığı okunur hale getirin

Fotoğrafların renk tonunun birleştirilmesi

Ekip sayfası veya galerideki fotoğrafları siyah-beyaz veya sepyaya standardize edin

El konusu fotoğraflarla sayısal değerleri belirleme

Kullanacağınız fotoğrafa uygulayıp bulanıklık veya vintage efekt değerlerini belirleyin

Karanlık mod için görüntü ayarı

Koyu arka planda göz kamaştırmasını önlemek için parlaklık ve kontrastı azaltılmış değerleri belirleyin

Temel Bilgiler

Filter işlevleri ve birimleri

CSS filter özelliği, görüntü veya öğenin görünümüne efekt uygulayan bir özelliktir ve blur, sepia gibi işlevleri boşlukla ayrıştırarak sırası ile yazılır.

px (piksel)：blur işlevi bulanıklık yarıçapını px ile belirten bir işlevdir ve 4px belirtirseniz 4 piksel yarıçaplı alanda renkler karışır.
% (yüzde)：brightness ve sepia işlevleri efektin gücünü % ile belirten işlevlerdir; brightness işlevinde %100 orijinal parlaklık, %120 ise yüzde 20 daha parlak durumdur.
deg (derece)：hue-rotate işlevi renk çarkında rengi döndürme açısını deg ile belirten bir işlevdir ve 180deg belirtirseniz renk karşı taraftaki renk tonuna hareket eder.

Yazış sırası sonucu neden değiştirir

filter'e sıralanmış işlevler soldan sağa uygulanır ve önceki efektin sonucuna bir sonraki efekt uygulanır; bu nedenle sıra değişirse görünüm de değişebilir. Örneğin siyah-beyaza yaptıktan sonra sepya uygularsanız kahverengi ton kalır, sepya yaptıktan sonra siyah-beyaza çevirirseniz kahverengi ton kaybolur. Bu araçta uygulama sırası sabitlenmiş olmakla beraber, oluşturulan CSS kodunu düzenleyerek sırayı değiştirebilirsiniz.

backdrop-filter ile fark

filter ve backdrop-filter aynı işlevleri kullanabilecek özelliklerdir ancak efektin uygulandığı hedef farklıdır.

filter：filter, belirtilen öğenin kendisine (görüntü, metin vb.) efekt uygulayan bir özelliktir.
backdrop-filter：backdrop-filter, belirtilen öğenin arkasında görünen kısma efekt uygulayan bir özelliktir ve buzlu cam görünümü oluşturmak için kullanılır.