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

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar

CSS ile yükleniyor animasyonu yapmak

CSS ile yükleniyor animasyonu yapmak Devamını oku

CSS scroll-snap

20 November 2023 tarihinde yayınlandı.

:user-invalid seçicisi

06 November 2023 tarihinde yayınlandı.