Công nghệ Frosted Glass mở rộng từ game sang web

Frosted Glass từ game sang web

• Giới thiệu

  • Khi làm UI developer cho Forza Horizon 3 và Forza Motorsport 7, tác giả đã được trải nghiệm các yếu tố thiết kế acrylic mờ rất đẹp.
  • Tác giả muốn tái tạo hiệu ứng tương tự bằng HTML và chia sẻ thử nghiệm đó trên trang này.

• Vai trò của backdrop-filter

  • Cốt lõi của hiệu ứng kính mờ là làm mờ nền bằng Gaussian blur.
  • Trong CSS, có thể áp dụng Gaussian blur bằng backdrop-filter và hàm blur.
  • Internet Explorer không hỗ trợ tính năng này.

• Thêm chiều sâu

  • Tác giả đã tạo lớp kính cơ bản bằng backdrop-filter: blur(10px), nhưng để có hiệu ứng sâu hơn, đã dùng box-shadow: inset để thêm chiều sâu ở các cạnh.

• Bóng đổ thực

  • Để loại bỏ cảm giác như một vật thể 3D bị mắc kẹt trong không gian 2D, tác giả thêm box-shadow tối để làm lớp kính trông như được nâng lên khỏi nền một cách vật lý.

• Tương tác với ánh sáng

  • Để cải thiện tương tác giữa kính và ánh sáng, tác giả đưa vào một dạng subsurface scattering đơn giản.
  • Dùng box-shadow: inset để mô phỏng hiệu ứng ánh sáng lan nhẹ ở mép kính.

• Ánh sáng thú vị hơn

  • Để nhấn mạnh đặc tính phản xạ của kính, tác giả dùng các tia sáng làm ảnh nền.
  • Dùng ::before để áp dụng ảnh nền lên phần tử kính.

• Ánh sáng động

  • Tác giả dùng CSS và JavaScript để hiện thực hiệu ứng phản xạ động trên mọi nền tảng.
  • JavaScript được dùng để điều chỉnh background-position động nhằm mô phỏng hiệu ứng của background-attachment: fixed.

• Hoàn thiện

  • Để hoàn tất hiệu ứng kính, tác giả thêm các góc bo tròn cùng màu sắc và văn bản.
  • Dùng border-radius để bo tròn góc, và overflow: hidden để các phần tử con không tràn ra ngoài bề mặt kính.

• Kết luận

  • Cảm ơn bạn đã theo dõi quá trình tạo hiệu ứng kính mờ.
  • Để nhanh chóng sao chép toàn bộ tài nguyên và mã, hãy tham khảo phần "Final Recipe Lookahead" ở đầu bài viết.

[GN⁺]

Ý kiến Hacker News

• Một người dùng cho biết họ thích yếu tố thẩm mỹ này, nhưng cảm thấy việc phía client liên tục tính toán các bộ lọc blur tốn kém là lãng phí, và xu hướng chung của phát triển web dường như đang tạo ra quá nhiều tải

  • Dù đã được tối ưu bằng GPU, họ cho rằng trên thực tế sẽ không tạo ra khác biệt lớn

• Một người dùng khác giải thích rằng họ từng trích xuất texture "light rays" của Windows 7 để thử triển khai hiệu ứng tương tự trên Android, và đã tăng nhẹ độ bão hòa của nền bị blur

• Một người dùng khác nữa cho rằng bản demo tương tác rất tuyệt, nhưng họ ghét việc dùng hiệu ứng kính mờ trong thiết kế giao diện người dùng, và cảm thấy việc nó được thêm vào Mac OS là một bước lùi

  • Họ cho rằng điều này đặc biệt không lý tưởng khi nội dung phía sau panel là động hoặc do người dùng tạo ra

• Một người dùng cho biết vào năm 2008 họ đã triển khai hiệu ứng tương tự thông qua một thử nghiệm CSS bằng cách sử dụng ảnh nền được làm mờ sẵn với vị trí cố định

  • Họ nhắc rằng cách này có hiệu năng tốt hơn so với Gaussian blur thời gian thực, nhưng có nhược điểm là không cho phép ảnh nền động

• Một người dùng khác nhận xét có 10 hiệu ứng đang chồng lên nhau, và ngoài yếu tố thẩm mỹ được mong muốn nhất thì khoảng 7 hiệu ứng là quá nhiều

  • Họ đề xuất chỉ nên dùng màu nền, blur, box-shadow hoặc viền

• Một người dùng cho biết họ thích thêm texture nhiễu để tạo ra kết quả thô ráp hơn

• Một người dùng khác nói rằng thành tựu kỹ thuật thì ấn tượng, nhưng UX lại kém

  • Họ giải thích rằng nội dung bên trong các panel bán trong suốt khó đọc hoặc khó hiểu hơn, vì độ tương phản với nền thấp và thiếu nhất quán

• Một người dùng nhắc rằng một trong những demo CSS ban đầu vốn là để tạo hiệu ứng kính mờ, và thấy điều đó khá thú vị

• Một người dùng khác cho rằng việc nhìn thấy mặt sáng tạo và mạnh mẽ của CSS luôn rất ấn tượng, nhưng họ cảm thấy mình có lẽ sẽ không bao giờ hiểu được một số mức độ thông hiểu nhất định về HTML/CSS

• Cuối cùng, một người dùng nói rằng ví dụ tương tác thì tốt, nhưng sẽ còn tốt hơn nếu có tính năng so sánh hoặc chuyển đổi về phiên bản trước đó

  • Họ giải thích rằng trong đa số trường hợp, các cải tiến ở mỗi lần lặp lại khá tinh tế nên họ không nhận ra được sự khác biệt