Oyundan web'e taşınan Frosted Glass teknolojisi

Oyundan web'e frosted glass

• Giriş

  • Forza Horizon 3 ve Forza Motorsport 7'nin UI geliştiricisi olarak çalışırken güzel frosted akrilik tasarım öğeleriyle karşılaştı.
  • HTML kullanarak benzer bir etki oluşturmak istedi ve bu sayfada bu denemeyi paylaşıyor.

• backdrop-filter'ın rolü

  • Frosted glass efektinin özü, arka planı bulanıklaştırmak için Gaussian blur kullanmaktır.
  • CSS'te Gaussian blur uygulamak için backdrop-filter ve blur fonksiyonu kullanılabilir.
  • Internet Explorer bu özelliği desteklemez.

• Derinlik ekleme

  • backdrop-filter: blur(10px) kullanarak temel bir cam görünümü oluşturdu, ancak daha derin bir etki için box-shadow: inset ile kenarlara derinlik ekledi.

• Gerçek gölge

  • 3D bir nesnenin 2D alana hapsolmuş gibi görünmesini önlemek için koyu bir box-shadow ekleyerek camın arka plandan fiziksel olarak yükselmiş görünmesini sağladı.

• Işıkla etkileşim

  • Cam ile ışığın etkileşimini iyileştirmek için basit bir subsurface scattering yaklaşımı ekledi.
  • Işığın cam kenarlarında hafifçe yayılması etkisini simüle etmek için box-shadow: inset kullandı.

• Daha ilgi çekici ışık

  • Camın yansıtıcı özelliklerini vurgulamak için arka plan görseli olarak ışık huzmeleri kullandı.
  • Arka plan görselini cam öğesine uygulamak için ::before kullandı.

• Dinamik ışık

  • CSS ve JavaScript kullanarak tüm platformlarda dinamik yansıma efekti oluşturdu.
  • JavaScript ile background-position değerini dinamik olarak ayarlayarak background-attachment: fixed efektini simüle etti.

• Son rötuşlar

  • Cam efektini tamamlamak için yuvarlatılmış köşeler, renk ve metin ekledi.
  • Köşeleri yuvarlatmak için border-radius, alt öğelerin cam yüzeyinin dışına taşmamasını sağlamak için overflow: hidden kullandı.

• Sonuç

  • Frosted glass efektini oluşturma sürecini takip ettiğiniz için teşekkür ediyor.
  • Tüm varlıkları ve kodu hızlıca kopyalamanın yolu için belgenin başındaki "Final Recipe Lookahead" bölümüne bakılabilir.

[GN⁺]

Hacker News görüşleri

• Bir kullanıcı estetik yönünü beğendiğini, ancak istemcinin pahalı blur filtrelerini tekrar tekrar hesaplamasının israf gibi geldiğini ve web geliştirmedeki genel eğilimin fazla yük bindirdiğini düşündüğünü belirtiyor

  • GPU kullanılarak optimize edildiğini, ancak pratikte çok büyük bir fark yaratmayacağını düşündüğünü ekliyor

• Başka bir kullanıcı, Windows 7'nin "ışık huzmeleri" dokusunu çıkarıp Android'de benzer bir etki uygulamaya çalıştığını ve bulanık arka planın doygunluğunu biraz artırdığını anlatıyor

• Bir diğer kullanıcı, interaktif demonun harika olduğunu düşünüyor, ancak kullanıcı arayüzü tasarımında frosted glass kullanımından hoşlanmadığını ve bunun Mac OS'e eklenmesini bir geri adım olarak gördüğünü söylüyor

  • Özellikle panel arkasındaki içeriğin dinamik ya da kullanıcı tarafından üretilmiş olduğu durumlarda ideal olmadığını düşünüyor

• Bir kullanıcı, 2008'de bir CSS deneyiyle sabit konumlu önceden bulanıklaştırılmış arka plan görselleri kullanarak benzer bir etki elde ettiğini anlatıyor

  • Bunun gerçek zamanlı Gaussian blur'dan daha iyi performans verdiğini, ancak dinamik arka plan görsellerine izin vermemesi gibi bir dezavantajı olduğunu belirtiyor

• Başka bir kullanıcı, üst üste binen 10 efekt olduğunu ve en gerekli estetik unsur dışında yaklaşık 7 tanesinin fazla olduğunu düşünüyor

  • Yalnızca arka plan rengi, blur, box-shadow veya border kullanılmasını öneriyor

• Bir kullanıcı, daha pütürlü bir sonuç elde etmek için noise texture eklemeyi sevdiğini anlatıyor

• Başka bir kullanıcı, teknik başarının etkileyici olduğunu ama UX'in kötü olduğunu söylüyor

  • Bunun nedeninin yarı saydam paneller içindeki içeriğin okunmasının ve anlaşılmasının daha zor olması, ayrıca arka planla kontrastın düşük ve tutarsız olması olduğunu açıklıyor

• Bir kullanıcı, ilk CSS demolarından birinin aslında frosted glass efekti için olduğunu belirtiyor ve bunu ilginç buluyor

• Başka bir kullanıcı, CSS'in yaratıcı ve güçlü yönlerini görmenin her zaman etkileyici olduğunu düşünüyor, ancak HTML/CSS'e dair bazı anlayış seviyelerini hiçbir zaman kavrayamayacakmış gibi hissettiğini söylüyor

• Son olarak bir kullanıcı, interaktif örneğin iyi olduğunu, ancak önceki sürüme geçiş yapmayı sağlayan bir karşılaştırma ya da toggle özelliği olsaydı daha iyi olacağını belirtiyor

  • Çoğu durumda her iterasyondaki iyileşmenin çok ince olduğunu ve bu yüzden farkı anlayamadığını açıklıyor