Teknologi Frosted Glass yang Meluas dari Game ke Web

Frosted Glass dari Game ke Web

• Pendahuluan

  • Saat bekerja sebagai pengembang UI untuk Forza Horizon 3 dan Forza Motorsport 7, penulis merasakan elemen desain frosted acrylic yang indah.
  • Penulis ingin mewujudkan efek serupa menggunakan HTML, dan membagikan upaya tersebut di halaman ini.

• Peran backdrop-filter

  • Inti dari efek frosted glass adalah memburamkan latar belakang menggunakan Gaussian blur.
  • Di CSS, Gaussian blur dapat diterapkan menggunakan backdrop-filter dan fungsi blur.
  • Internet Explorer tidak mendukung fitur ini.

• Menambahkan kedalaman

  • Penulis membuat kaca dasar dengan backdrop-filter: blur(10px), tetapi untuk efek yang lebih dalam, menambahkan kedalaman pada tepi menggunakan box-shadow: inset.

• Bayangan nyata

  • Untuk menghilangkan kesan seperti objek 3D yang terjebak di ruang 2D, penulis menambahkan box-shadow gelap agar kaca terlihat terangkat secara fisik dari latar belakang.

• Interaksi dengan cahaya

  • Untuk meningkatkan interaksi antara kaca dan cahaya, penulis memperkenalkan subsurface scattering sederhana.
  • Menggunakan box-shadow: inset untuk mensimulasikan efek cahaya yang sedikit menyebar di tepi kaca.

• Cahaya yang lebih menarik

  • Untuk menonjolkan sifat reflektif kaca, penulis menggunakan sinar cahaya sebagai gambar latar belakang.
  • Menggunakan ::before untuk menerapkan gambar latar belakang pada elemen kaca.

• Cahaya dinamis

  • Penulis mewujudkan efek pantulan dinamis di semua platform menggunakan CSS dan JavaScript.
  • Dengan JavaScript, background-position disesuaikan secara dinamis untuk mensimulasikan efek background-attachment: fixed.

• Penyelesaian akhir

  • Untuk menyempurnakan efek kaca, penulis menambahkan sudut membulat, warna, dan teks.
  • Menggunakan border-radius untuk membulatkan sudut, dan overflow: hidden agar elemen anak tidak melampaui permukaan kaca.

• Kesimpulan

  • Terima kasih telah mengikuti proses pembuatan efek frosted glass ini.
  • Untuk cara cepat menyalin semua aset dan kode, lihat bagian "Final Recipe Lookahead" di awal dokumen.

[GN⁺]

Komentar Hacker News

• Seorang pengguna menyebut ia menyukai unsur estetikanya, tetapi merasa memboroskan jika klien harus berulang kali menghitung filter blur yang mahal, dan tampaknya tren umum pengembangan web memberi beban terlalu besar

  • Meski dioptimalkan dengan GPU, ia merasa pada praktiknya perbedaannya tidak akan besar

• Pengguna lain menjelaskan bahwa ia pernah mengekstrak tekstur "light rays" dari Windows 7 untuk mencoba membuat efek serupa di Android, dan sedikit menaikkan saturasi latar belakang yang diburamkan

• Pengguna lain lagi mengatakan demo interaktifnya luar biasa, tetapi ia tidak suka penggunaan frosted glass dalam desain antarmuka pengguna, dan merasa penambahannya ke Mac OS merupakan langkah mundur

  • Ia merasa ini terutama tidak ideal ketika konten di balik panel bersifat dinamis atau dibuat pengguna

• Seorang pengguna menjelaskan bahwa pada 2008 ia pernah membuat efek serupa lewat eksperimen CSS dengan menggunakan gambar latar belakang yang sudah diburamkan sebelumnya dan diposisikan tetap

  • Ia menyebut cara ini berkinerja lebih baik daripada Gaussian blur real-time, tetapi punya kekurangan karena tidak memungkinkan gambar latar belakang yang dinamis

• Pengguna lain mengatakan ada 10 efek yang ditumpuk, dan selain elemen estetika yang paling dibutuhkan, sekitar 7 di antaranya terasa berlebihan

  • Ia menyarankan cukup memakai warna latar, blur, box-shadow, atau border saja

• Seorang pengguna menjelaskan bahwa ia suka menambahkan tekstur noise untuk mendapatkan hasil yang lebih kasar

• Pengguna lain mengatakan pencapaian teknisnya keren, tetapi UX-nya buruk

  • Ia menjelaskan bahwa isi di dalam panel semi-transparan lebih sulit dibaca atau dipahami, karena kontras dengan latar belakang rendah dan tidak konsisten

• Seorang pengguna menyebut salah satu demo CSS asli memang ditujukan untuk efek frosted glass, dan menganggapnya menarik

• Pengguna lain mengatakan selalu terkesan melihat sisi CSS yang kreatif dan kuat, tetapi merasa ia mungkin tidak akan pernah memahami sebagian tingkat pemahaman HTML/CSS tertentu

• Terakhir, seorang pengguna mengatakan contoh interaktifnya bagus, tetapi akan lebih baik jika ada fitur perbandingan atau toggle untuk beralih ke versi sebelumnya

  • Ia menjelaskan bahwa dalam kebanyakan kasus, peningkatan di tiap iterasi terlalu halus sehingga ia tidak bisa melihat perbedaannya