📖 Görsel Efektler

backdrop-filter (Buzlu Cam & Glassmorphism Efekti)

Öğenin arkasında kalan arka plan içeriğine bulanıklık (blur), renk tonu veya doygunluk efektleri uygular.

⚡ Sözdizimi (Syntax)

backdrop-filter: blur(16px) saturate(180%);

🛠️ Pratik Kullanım Örnekleri

📌 Modern Glassmorphism Kart Tasarımı

.glass-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
}

💡

Mühendislik İpucu & En İyi Pratik: Safari tarayıcı uyumluluğu için mutlaka `-webkit-backdrop-filter` önekini de eklemelisiniz.

İlgili Kılavuzlar

display: flex (Esnek Kutu Düzeni - Flexbox) display: grid (İki Boyutlu CSS Izgara Düzeni) position: sticky (Kaydırmaya Bağlı Sabitlenen Başlıklar) backdrop-filter (Buzlu Cam & Glassmorphism Efekti) clamp() (Akıcı Tipografi ve Dinamik Boyutlandırma) :has() Ebeveyn Seçici (Parent Selector) aspect-ratio (En-Boy Oranı Kilitleme)

← Tüm Referans Dizini (500+)