Yükleniyor...

CSS Filtreler

Animasyonlar zaman çizelgesi yazdı. Transform piksellerin nerede durduğunu gösterdi. Filtreler aynı piksellerin nasıl göründüğünü değiştirir: modal arkasında hafif blur, hover’da renklenen gri küçük resim, brightness ve contrast ile hafifçe yükseltilmiş foto — hepsi aynı yerleşim kutusunda.

`filter` ne yapar?

filter özelliği, öğenin çizilmiş çıktısına (genelde alt öğelerle birlikte, tek grup gibi) bir veya daha fazla son-işlem efekti uygular. Genişlik, yükseklik ve belge akışı aynı kalır; yalnızca boyanan sonuç değişir. Efektleri kaldırmak için filter: none (başlangıç değeri).

Birden fazla fonksiyonu tek bir filter değerinde, boşlukla zincirlersiniz — transform zincirlemeye benzer ruh, ama burada araçlar mekânsal değil görsel: filter: brightness(1.1) contrast(1.05) saturate(1.2);

Filter fonksiyonları — bir bakışta

📊 Yaygın CSS filter fonksiyonları

Fonksiyon	Tipik iş
`blur(radius)`	Kenarları yumuşat / buzlu cam hissi (`px` ve benzeri uzunluklar)
`brightness(%)`	Aydınlat veya karart (`1` / `100%` = değişmez)
`contrast(%)`	Ton aralığını aç veya düzleştir
`grayscale(%)`	Rengi al (`1` = tam gri)
`saturate(%)`	Doygunluğu artır veya azalt
`hue-rotate(angle)`	Renk tekerleğinde ton kaydırması
`opacity(%)`	Filtrelenmiş sonucu soluklaştır (`opacity` özelliğiyle yakın ama aynı değil)
`sepia(%)` / `invert(%)`	Sıcak vintage ton / tonları ters çevir
`drop-shadow(…)`	Alfa siluetini takip eden gölge (ikonlar, şeffaf PNG)
`none`	Filtreleri kaldır

Yüzde ve çıplak sayılar çoğu zaman eşdeğerdir (grayscale(1) ≈ grayscale(100%)). Projede bir stili seçin ve tutarlı kalın.

Hover’da uyanan gri kartlar

Galeri klasikleri: varsayılan soluk, hover’da tam renk. filter üzerinde kısa bir transition kasıtlı bir geçiş hissi verir — hareket önceki derslerden, görünüm bu dersten.

Hover’da renklenen grayscale küçük resim

css

.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) tam renktir. filter transition’ını küçük değişimler için kullanın; büyük fotoğraflarda ağır blur animasyonu pahalıya patlar.

Vurgu için yumuşak blur

blur() öğeyi yumuşatır. Okunabilirlik için tüm sayfa gövdesine değil, overlay veya arka katmana makul bir yarıçap verin.

Modal arkasında bulanık arka panel

css

.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

Büyük bir atayı blur’larsanız içindeki metin de bulanıklaşır. Ön plan net kalmalıysa ayrı bir arka katmanı blur’layın (veya aşağıdaki backdrop-filter).

Fotoğraflar için brightness ve contrast

Ürün ve hero görselleri çoğu zaman görsel düzenleyici açmadan hafif bir “grade” ister.

Brightness ve contrast ile foto grade

css

.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

1’in biraz üstü aydınlatır veya kontrastı vurgular; altı geri çeker. Küçük adımlar cilalı okunur; büyük sıçramalar yapay durur.

Birden fazla filtreyi üst üste

Tek bildirimde ton, renk ve yumuşaklığı birleştirebilirsiniz. Karmaşık yığınlarda sıra önemli olabilir — niyetinizi soldan sağa yazın ve tarayıcıda doğrulayın.

Üst üste saturate, hue-rotate ve hafif blur

css

.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

Bir veya iki fonksiyonla başlayın. Tasarım gerçekten istediğinde ekleyin — büyük yüzeylerde her ek filter daha fazla GPU işi demektir.

`drop-shadow()` ve `box-shadow`

box-shadow border box’ı takip eder. drop-shadow() alfa siluetini takip eder — şeffaf PNG’ler ve gölgenin dikdörtgen değil glif şeklini sarması gereken ikonlar için ideal.

drop-shadow ile ikon gölgesi

css

.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() box-shadow gibi inset desteklemez. Göçük kart yüksekliği için Effects dersindeki box-shadow’da kalın.

Backdrop-filter — arkada görüneni bulanıklaştır

backdrop-filter, yarı saydam bir öğenin arkasından görünen içeriği etkiler (buzlu cam). Öğenin yarı saydam bir arka planı olmalı; yoksa örnek alınacak bir şey yoktur.

Örnek fikir: yoğun bir hero üzerindeki yapışkan header’da background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);. Modern tarayıcılarda destek geniş; blur atlanabilirse katı bir yedek arka plan bırakın.

Filter içindeki opacity ve `opacity` özelliği

filter: opacity(0.5) filtrelenmiş boyamayı soluklaştırır. opacity özelliği öğenin tamamını soluklaştırır ve çoğu zaman yığınlama ile alt öğelerin birleşimini de etkiler. “Kontrol ve çocukları birlikte solsun” diyorsanız genelde ayrı opacity daha nettir. Filter opacity() blur veya renk grade’i ile filter yığınının parçasıyken anlamlıdır.

Kendiniz deneyin

Kart görseline filter: grayscale(1) verin; :hover ile grayscale(0)’a dönün ve transition: filter 0.2s ease ekleyin.
Arka katmanı blur(8px) ile yumuşatın; ön plandaki metin filtresiz kalsın.
Fotoğrafa brightness(1.1) contrast(1.05) verin; sonra ikisini de yavaşça 1’e yaklaştırın.
Çıkartmaya saturate(1.4) hue-rotate(20deg) koyun; bir fonksiyonu kaldırıp karşılaştırın.
Şeffaf PNG ikona drop-shadow(...); aynı ikonu kare kutuda box-shadow ile de deneyin.
İsteğe bağlı: yarı saydam background + backdrop-filter: blur(12px) ile buzlu çubuk.

Sık yapılan hatalar

Okunabilir metin içeren devasa bir bölüme güçlü blur() uygulamak
drop-shadow()’dan box-shadow gibi inset beklemek
Basit bir öğe opacity yeterliyken filter: opacity() kullanmak
Büyük görsellerde ağır filter’ları her scroll karesinde performans kontrolü olmadan animate etmek
Tam opak arka planda backdrop-filter — arkada görünen yok, buzlu cam oluşmaz

Özet

filter çizilmiş piksellerin görünümünü değiştirir; yerleşim akışı yerinde kalır
blur, brightness, contrast, grayscale, saturate ve benzerlerini tek değerde zincirleyin
Alfa şekilli gölge için drop-shadow(); kutu yüksekliği için box-shadow
backdrop-filter yarı saydam katmandan görüneni buzlu yapar
Effects & Motion burada biter; sırada Modern Toolkit — CSS Variables ile başlar

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil