Efekt nasıl çalışır?
Buzlu cam görünümü tek bir özellikten doğar: backdrop-filter. Bu özellik öğenin kendisini değil, arkasında kalan pikselleri filtreler. Bu yüzden iki koşul zorunludur; öğenin arka planı kısmen saydam olmalı ve arkasında filtrelenecek bir içerik bulunmalıdır. Zemin tamamen opak yazıldığında hiçbir şey görünmez ve efekt çalışmıyor sanılır. Apple'ın arayüzlerinde kullanılan görünüme yaklaşmak için bulanıklığın yanına bir de saturate() eklenir: arkadaki renkler bulanırken soluklaşır, doygunluk artışı bu kaybı geri verir.
Okunabilirlik her şeyden önce gelir
Cam kartların en büyük riski erişilebilirliktir. Arka plan değiştikçe metnin kontrastı da değişir; açık bir fotoğrafın üzerinde beyaz yazı okunmaz hâle gelir. Güvenli yol, saydam katmana kendi renginden bir tabaka eklemektir — koyu arayüzlerde siyahın düşük saydamı, açık arayüzlerde beyazın. Kart içindeki metnin kontrastını en kötü durumdaki arka planla ölçün, ortalamayla değil. Üst kenara eklenen ince iç parlaklık (inset 0 1px 0) camın kalınlık hissini verirken kenarı da zeminden ayırır.
Destek, başarım ve tuzaklar
backdrop-filter bugün tüm güncel tarayıcılarda çalışır; Safari için -webkit-backdrop-filter ön ekini yazmak hâlâ iyi bir alışkanlıktır. Destek olmayan ortamlarda kartın arkası tamamen şeffaf kalacağı için @supports not (backdrop-filter: blur(1px)) bloğuyla daha opak bir zemine düşmek gerekir; üretilen kod bu bloğu içerir. En sık karşılaşılan tuzak, üst öğelerden birinde filter kullanılmasıdır: filtre yeni bir kapsayıcı blok oluşturur ve alt öğedeki backdrop-filter beklenmedik biçimde bozulur. Başarım açısından da ölçülü olun; her bulanık katman ekranın o bölgesinin yeniden bileşiklenmesine yol açar, uzun listelerde her satıra cam efekti vermek kaydırmayı gözle görülür biçimde yavaşlatır. Kartın zeminini gradyan üreticisiyle hazırlarsanız iki katmanı birlikte deneyebilirsiniz.