Buzlu Cam için backdrop-filter
Başka içeriklerin üzerine yerleştirilmiş ögelerde backdrop-filter kullanarak buzlu cam bulanıklığı efektleri oluşturun.
Buzlu Cam için backdrop-filter, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
backdrop-filter nedir?
backdrop-filter, grafik efektlerini öğenin kendisi yerine öğenin arkasındaki alana uygular. Filtrelenen arka planın görünmesi için öğenin bir miktar saydamlığa sahip olması gerekir (alfa değeri 1'den küçük bir arka plan veya arka plan olmaması).
Buzlu Cam Efekti
Klasik buzlu cam deseni:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
-webkit-backdrop-filter Ön Eki
Safari, -webkit-backdrop-filter ön ekini gerektirir. Tarayıcılar arası destek için standart özellikle birlikte her zaman bunu da ekleyin.
Kullanılabilir Filtre İşlevleri
backdrop-filter, filter ile aynı işlevleri destekler: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Koyu Buzlu Cam
Kaplamalar ve modal pencereler için koyu bir varyant:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Yığınlama Bağlamı Gereksinimi
backdrop-filter bir yığınlama bağlamı oluşturur. Öğenin arka planın üzerinde birleştirilmesi gerekir; bu da yığınlama sırasına göre diğer içeriğin üzerinde olması gerektiği anlamına gelir (zorunlu olarak z-index değil, boyama sırası belirleyicidir).
backdrop-filter Performansı
Ağır backdrop-filter: blur() kullanımı maliyetlidir; tarayıcıyı arka planı ayrı bir geçişte oluşturmaya zorlar. Mobil performans için 20 piksel veya daha düşük bulanıklık değerleri kullanın. Sık sık yeniden boyanan içeriklerde bundan kaçının.
Buzlu Kaplamalı Modal Pencere
Buzlu cam kaplamasına sahip bir modal iletişim kutusu:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Cam Efektli Yapışkan Gezinme
Buzlu cam efektli yapışkan bir gezinme çubuğu:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Tarayıcı Desteği
backdrop-filter; Chrome 76+, Firefox 103+ ve Safari 9+ (webkit) sürümlerinde desteklenir. -webkit- ön ekini her zaman ekleyin. Güncel veriler için caniuse.com sitesini kontrol edin ve desteklemeyen tarayıcılar için opak bir geri dönüş sağlayın.
Opak Geri Dönüş
backdrop-filter özelliğini desteklemeyen tarayıcılar için geri dönüş olarak opak bir arka plan sağlayın:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Kısa Kontrol
backdrop-filter'ın görünür olması için bir öğenin neye sahip olması gerekir?
Özet
backdrop-filter, filtre efektlerini bir öğenin arkasındaki alana uygular. Efektin görünmesi için öğenin saydam olması gerekir. Klasik buzlu cam efekti blur() + saturate() kullanır. Safari için her zaman -webkit-backdrop-filter ekleyin. @supports kullanarak opak bir geri dönüş sağlayın.
Sıkça Sorulan Sorular
“Buzlu Cam için backdrop-filter” dersi ücretsiz mi?
Evet — “Buzlu Cam için backdrop-filter” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Buzlu Cam için backdrop-filter” dersinde ne öğreneceğim?
Başka içeriklerin üzerine yerleştirilmiş ögelerde backdrop-filter kullanarak buzlu cam bulanıklığı efektleri oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Buzlu Cam için backdrop-filter” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- filter: blur brightness contrast grayscale
- Buzlu Cam için backdrop-filter
- Katman Harmanlama için mix-blend-mode
- isolation Özelliği