Trình tạo CSS cho hiệu ứng kính độ phân giải cao

• glass3d generator là công cụ cho phép thay đổi các giá trị cấu hình, xem trước ngay CSS hiệu ứng chất liệu kính và sao chép để dùng
• Các giá trị điều chỉnh cốt lõi gồm blur, brightness, saturation của backdrop-filter, cùng màu sắc và lựa chọn texture
• Màu sắc được xử lý bằng HSL và giá trị alpha; giá trị ví dụ là hsl(189 80% 10% / 0.2)
• Có thể chọn texture trong số rice paper, egg shell, ink jet, coarse, topology
• CSS được tạo kết hợp .glass3d, ::before, ::after và z-index của phần tử con để tách lớp bộ lọc nền, texture noise, bóng bên trong và lớp nội dung

---

Các giá trị có thể điều chỉnh trong glass3d generator

• Khi thay đổi cấu hình, kết quả được phản ánh ngay trên chính giao diện
• CSS hoàn thiện có thể được sao chép để sử dụng
• Các mục cấu hình chính gồm:
  • backdrop-filter
  • blur
  • brightness
  • saturation
  • color
  • texture

Cấu trúc CSS được tạo

• Class .glass3d định nghĩa các biến CSS và mốc lớp
  • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
  • --color-glass3d: hsl(189 80% 10% / 0.2)
  • --noise-glass3d: egg-shell.png của transparenttextures.com
  • Sử dụng position: relative, z-index: 4 và nhiều cấp box-shadow
• .glass3d::before áp dụng bộ lọc nền và texture
  • Dùng var(--filter-glass3d) cho -webkit-backdrop-filter và backdrop-filter
  • background-color và background-image lần lượt nhận biến màu và biến noise
  • Thiết lập background-size: 100px, background-repeat: repeat
• .glass3d::after thêm bóng highlight bên trong
  • Sử dụng nhiều giá trị inset box-shadow
• .glass3d > * áp dụng position: relative và z-index: 6 để nội dung hiển thị phía trên

[GN⁺]

Ý kiến trên Hacker News

• Cách này có vấn đề là chỉ áp dụng làm mờ dựa trên các pixel ngay phía sau bề mặt, và điều đó được minh họa rất rõ tại https://www.joshwcomeau.com/css/backdrop-filter/#the-issue
  Cũng đáng đọc cùng với cuộc thảo luận ở https://news.ycombinator.com/item?id=42302907. Nếu nền phía sau đang chuyển động, vấn đề chỉ làm mờ các pixel ngay phía sau khá quan trọng; còn nếu nền tĩnh thì thường không đáng kể

  • Sau khi đọc bài viết xuất sắc của Josh, tôi cũng thử triển khai tutorial, nhưng gặp vấn đề ở phần xử lý border-radius bằng SVG mask
    Với các phần tử hard-code thì chạy tốt, nhưng vẫn còn phải giải quyết làm sao để nó hoạt động trong cả một thư viện component nơi border-radius thay đổi theo branding của người dùng và container query
  • Giải pháp của Josh về mặt trực giác cũng có vẻ sai. Nó dường như giả định rằng các phần tử ở gần là nguồn phát sáng, nhưng khó có thể nói “vật liệu” trên web mặc định có những thuộc tính vật lý như vậy
    Tôi thì eher xem vật liệu mặc định giống giấy hơn
  • Khó nói bên nào đúng hơn. Cách mặc định xấp xỉ các vật thể ngay sau tấm kính mờ, còn cách đã điều chỉnh thì mô phỏng các vật thể ở xa hơn nhiều
    Với tôi, phiên bản đã điều chỉnh xung đột với tín hiệu chiều sâu, nên trông rối mắt hơn nhiều và có vẻ sai hơn

• Trông khá ổn, nhưng nếu thiếu tính khúc xạ của kính thì sẽ mất đi cảm giác tách lớp mạnh mà tôi cho là đóng góp lớn nhất của Liquid Glass
  Material có tài liệu thiết kế rất hay, dùng 3D nhìn nghiêng để cho thấy ứng dụng nên được cấu thành từ các lớp chuyển động nhất quán. Nhưng khi gộp lại thành 2D thì rất khó tìm chức năng nào nằm ở đâu. Thực sự có rất nhiều trường hợp người dùng không nhìn thấy nút hành động ở góc
  Chuyển động có giúp đôi chút trong việc phân biệt chrome với nội dung, nhưng có quá ít yếu tố định nghĩa trực quan. Tôi nghĩ ưu điểm lớn nhất của Liquid Glass là biến dạng ở mép. Khi nội dung chuyển động, nó tạo ra chuyển động phi tuyến, và thị giác con người bắt ngay được điều đó
  Ảnh chụp màn hình tĩnh thì không phải lúc nào cũng đẹp, nhưng khi chuyển động, nó phân tách các phần tử tốt hơn hẳn những gì tôi từng thấy. Yếu tố khúc xạ cốt lõi tận dụng mạnh khả năng phát hiện chuyển động của con người lại bị thiếu ở đây
  Trước đây tôi từng thấy thêm một demo web rất tốt nhưng giờ khó tìm lại; thay vào đó, demo này có hiệu năng kém trên mobile và nhìn cũng không đẹp bằng, nhưng lại cho thấy từng bước công việc phức tạp đến mức nào. Triển khai biến dạng mép chỉ bằng SVG filter là một con đường khá gian nan: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
  Tôi cũng tìm thấy một bộ sưu tập các thử nghiệm Liquid Glass (CodePen Spark), và link thứ hai là một ví dụ khá tốt được làm bằng SVG hard-code định nghĩa sẵn rất cụ thể: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

  • Có vẻ Apple đã khéo tạo ra một con hào bằng Liquid Glass. Phiên bản tệ hơn thì dễ làm, nhưng họ đã chọn một hiệu ứng mà cách làm thật sự đúng thì cực khó
    Vì hằng ngày mọi người đều nhìn thấy kính thật, họ có trực giác về thứ gì trông thật và đúng. Do đó các bản bắt chước sẽ rõ ràng trông tệ hơn, còn Apple có thể duy trì hình ảnh sản phẩm “trông cao cấp”
  • Tôi đồng ý rằng biến dạng mép của Liquid Glass trông rất đẹp, và sau này định tự thử tái tạo nó
    Trong dự án hiện tại, mục tiêu là tạo ra một chất liệu có cảm giác được trau chuốt, hoạt động nhất quán giữa các trình duyệt và không dùng 3D thật. Nhận xét rằng hiệu ứng trông rõ hơn khi chuyển động trên nền cố định cũng đúng. Trang demo của thư viện tôi đang làm dùng cách đó, nhưng vẫn chưa sẵn sàng
  • Việc thiếu hiệu ứng khúc xạ lại là điểm tốt. Tôi đã thấy kính mờ vốn đã lưng chừng rồi, còn hiệu ứng khúc xạ thì thật sự không thích. Nó quá gây xao nhãng và trong một số tình huống chắc chắn luôn trông xấu
    Tôi biết kính thật hoạt động như vậy, nhưng không muốn phải bận tâm đến nó. Cảm giác như chọn đúng phần tệ nhất của skeuomorphism rồi đẩy mạnh gấp đôi; ngay cả với tư cách người thích thời trước iOS 7 hơn, tôi cũng thấy vậy

• Hiệu ứng rất hay, nhưng với tôi nó không giống kính thật
  Khác biệt tức thì nhất là ánh sáng không tương tác với bevel. Tôi kỳ vọng ánh sáng phải đi vào lại trong kính và ảnh hưởng cả đến ánh sáng lẫn màu sắc. Chỉ thêm blur đơn giản là chưa đủ
  Ngoài ra kính có thể có bóng tự thân và các hoa văn tụ sáng thú vị. Ở đây có bóng, nhưng nó giống một drop shadow đơn giản, nên trông như một tấm thẻ phẳng hơn là một vật thể vật lý 3D thuộc luồng mới
  Dù sao thì bắt chước chỉ bằng CSS không dễ, và shader chạy trên GPU có vẻ phù hợp hơn

  • Nếu CSS không làm được thì tôi cũng không biết phải làm thế nào. Làm sao áp dụng hiệu ứng GPU shader cho một div thông thường? Nếu không thể áp dụng hiệu ứng GPU cho HTML cơ bản mà phải làm trên một custom element kiểu tổ hợp Canvas tùy ý, có lẽ tốt hơn là xây lại hẳn một rendering engine hoàn toàn mới có thể áp dụng hiệu ứng GPU
    Tôi cho rằng HTML đã chết. Để truyền tải văn bản thì vài thẻ là đủ, còn phần lớn những thứ khác chỉ dùng để biến trang web thành bom quảng cáo. Vì vậy có lẽ nên bắt đầu lại với thẻ <text> và tích hợp GPU tốt hơn, rồi bỏ phần còn lại

• Tôi đã làm một phiên bản JavaScript thực sự khúc xạ các phần tử trên trang: https://real-glass.vercel.app/

  • Trên Safari, hiệu ứng kính mờ không hoạt động

• Đang sưu tầm những thứ như thế này: https://github.com/swyxio/spark-joy
  Các tài liệu khác gồm có trình tạo CSS miễn phí dựa trên đặc tả thiết kế glassmorphism https://ui.glass/generator/, header cố định kiểu kính mờ sương https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism codepen và in context

  .blur-and-rotate {  
  border-radius: 20px;  
  backdrop-filter: blur(20px) hue-rotate(120deg);  
  -webkit-backdrop-filter: hue-rotate(120deg);  
  }  
  

  • Tôi tìm một trình tạo phông chữ ASCII nhưng không thấy, nên để lại một công cụ tôi dùng: https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...

• Làm thực sự tốt. Tôi luôn thấy ngạc nhiên khi đồ họa máy tính không phải là “một mẹo kỳ lạ”, mà gần với 5 thủ thuật xếp chồng lên nhau hơn
  Việc đảm bảo tương thích giữa các trình duyệt còn là một bài toán khó nữa. Tôi tò mò liệu có hình dung được phần nào tốn tài nguyên nhất không. Nghĩ đơn giản thì có vẻ là backdrop-filter

  • Đúng vậy, tôi không ngờ việc triển khai lại cần nhiều thủ thuật đến thế
    Trực giác của bạn đúng, phần tốn tài nguyên nhất là xử lý làm mờ của backdrop-filter. Giá trị làm mờ càng lớn thì trước khi render càng phải “tham chiếu” nhiều pixel lân cận hơn
    Một yếu tố tốn kém khác là phải liên tục vẽ lại khi cuộn trang hoặc khi nền video làm thay đổi diện mạo của kính
  • Đôi khi chỉ để “căn giữa” một thứ gì đó cũng cần 5 lớp thủ thuật

• Có vẻ dùng kỹ thuật tương tự như cách tôi triển khai kính: https://news.ycombinator.com/item?id=42225481
  Đặc biệt là phần tận dụng box-shadow quá mức khá giống

  • Dự án trông rất hay. Vui vì không chỉ mình tôi đào sâu vào hơn 5 lớp shadow. Đặc biệt phần thêm Light Rays rất ấn tượng

• Một vấn đề nhỏ: bóng giữa phần trên cùng và vùng cuộn có toggle/code biến mất khi cuộn xuống. Có lẽ ban đầu nó nên được ẩn rồi mới xuất hiện

  • Bắt lỗi tốt đấy. Đây không phải vấn đề fade-in, mà là bóng đơn giản bị cuộn ra khỏi màn hình
    Những box-shadow “overhang” đó được thiết kế để áp dụng bên trong phần tử, chứ không phải kiểu đổ xuống từ một phần tử; trong trường hợp này tôi nhận ra rằng cần áp dụng kiểu bóng theo cách thứ hai

• Trên điện thoại của tôi, việc cuộn nội dung khá chậm. Tôi tự hỏi có hiệu ứng cuộn nào khác cố ý làm chậm không, hay đó là tác dụng phụ của hiệu ứng kính

  • Thú vị đấy, nhưng trên trang không có hiệu ứng cuộn nào cả. Bạn có thể cho biết thiết bị, trình duyệt và mức độ kết nối Internet đang dùng không?
  • Trên M4 và RAM 128GB thì chạy tốt

• Có thể tôi đã bỏ sót, nhưng trên mobile nếu có thể ẩn hoặc thu gọn hộp thì sẽ hữu ích hơn nhiều
  Hiện tại nó chiếm toàn bộ màn hình nên gần như không thấy được hiệu ứng phía sau. Dù vậy tôi vẫn quan tâm và định sẽ thử lại sau trên màn hình lớn hơn, nhưng nếu có tùy chọn ẩn hộp thì sẽ tốt hơn nhiều

  • Bạn đang nói đến vùng xem trước code phải không?
    Ở bản triển khai đầu tiên, tôi đặt một hình chữ nhật demo nhỏ phía trên UI của trình tạo, nhưng ngay cả kích thước nhỏ cũng chiếm quá nhiều không gian khiến UI khó dùng. Nếu để toàn bộ trang cuộn, mọi người sẽ bực vì không rõ rằng muốn xem hình chữ nhật đang chỉnh thì phải cuộn lên đầu trang
    Công cụ này chủ yếu dành cho việc coding nên tôi ưu tiên trải nghiệm desktop, còn mobile được để gần như là phần xem trước nhanh và chứng minh rằng nó cũng hoạt động trên mobile. Dù vậy, nếu bạn biết UI tương tự nào thực sự hoạt động tốt trên mobile thì tôi muốn xem link