Buzlu cam efekti yapmak, :user-invalid seçicisi yazısındaki örnekte de kullandığım bir teknikti. CSS’in bizlere kazandırdıklarını göstermek açısından güzel örnek.
Peki buzlu cam desenli ardalanlar nasıl yapılıyor?
Ben bu efekti ilk olarak Kyle Wetton’ın CodePen‘deki örneğinde görmüştüm.
Kod olarak da çok basit bir uygulaması var. Arka tarafında büyük bir resim olan bir kutunu ard alanına backdrop-filter: blur(18px); tanım yaparız. Uyguladığımız yere göre ard alanına beyaz veya siyah bir renk tanımlayıp saydamlığını da 0.3 tanımladıktan sonra son olarak kutuya bir gölge vermekte güzel etki yapıyor. Sonuçta kod:
.glass {
background-color: rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow: 0px 20px 18px rgba(0, 0, 0, 0.30);
}
Üste yapışık menülerde de güzel efekt veriyor.
Bunların dışında bir çok örnek var. İncelemek isterseniz codpen linki
Not:
filter: blur(10px)ile benzer sonuçlar elde edilebilir.
Tarayıcı Desteği
Türkiye’de şu an %95’lik desteği ile kullanılır durumda.
Tarayıcı Desteği
 |
 |
 |
|---|---|---|
| + | - | + |
Mobil Tarayıcılar
|
 |
 |
|---|---|---|
| + | + | + |
Kalın sağlıcakla.