เทคโนโลยี Frosted Glass ที่ขยายจากเกมสู่เว็บ

 (tyleo.com)
4 คะแนน โดย GN⁺ 2024-11-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

โปรสต์กลาสจากเกมสู่เว็บ

  • แนะนำ

    • ระหว่างทำงานเป็นนักพัฒนา UI ของ Forza Horizon 3 และ Forza Motorsport 7 ผู้เขียนได้สัมผัสกับองค์ประกอบการออกแบบแบบ frosted acrylic ที่สวยงาม
    • ผู้เขียนต้องการสร้างเอฟเฟ็กต์ที่คล้ายกันด้วย HTML และแบ่งปันความพยายามนั้นในหน้านี้

  • บทบาทของ backdrop-filter

    • หัวใจของเอฟเฟ็กต์ frosted glass คือการทำให้ฉากหลังเบลอด้วย Gaussian blur
    • ใน CSS สามารถใช้ backdrop-filter และฟังก์ชัน blur เพื่อใช้ Gaussian blur ได้
    • Internet Explorer ไม่รองรับฟีเจอร์นี้

  • เพิ่มมิติความลึก

    • ผู้เขียนสร้างกระจกพื้นฐานด้วย backdrop-filter: blur(10px) แต่เพื่อให้ได้เอฟเฟ็กต์ที่ลึกขึ้น จึงใช้ box-shadow: inset เพื่อเพิ่มความลึกที่ขอบ

  • เงาจริง

    • เพื่อกำจัดความรู้สึกเหมือนวัตถุ 3D ถูกขังอยู่ในพื้นที่ 2D จึงเพิ่ม box-shadow สีเข้มเพื่อทำให้กระจกดูเหมือนลอยขึ้นจากพื้นหลังจริง ๆ

  • ปฏิสัมพันธ์กับแสง

    • เพื่อปรับปรุงการปฏิสัมพันธ์ระหว่างกระจกกับแสง จึงนำ subsurface scattering แบบง่ายมาใช้
    • ใช้ box-shadow: inset เพื่อจำลองเอฟเฟ็กต์ที่แสงกระจายออกเล็กน้อยจากขอบกระจก

  • แสงที่น่าสนใจยิ่งขึ้น

    • เพื่อเน้นคุณสมบัติการสะท้อนของกระจก จึงใช้ลำแสงเป็นภาพพื้นหลัง
    • ใช้ ::before เพื่อใส่ภาพพื้นหลังลงในองค์ประกอบกระจก

  • แสงแบบไดนามิก

    • ใช้ CSS และ JavaScript เพื่อสร้างเอฟเฟ็กต์การสะท้อนแบบไดนามิกที่ทำงานได้บนทุกแพลตฟอร์ม
    • ใช้ JavaScript ปรับ background-position แบบไดนามิกเพื่อจำลองเอฟเฟ็กต์ของ background-attachment: fixed

  • ปิดท้าย

    • เพื่อทำเอฟเฟ็กต์กระจกให้สมบูรณ์ ผู้เขียนได้เพิ่มมุมโค้ง สี และข้อความ
    • ใช้ border-radius เพื่อทำให้มุมโค้ง และใช้ overflow: hidden เพื่อไม่ให้องค์ประกอบลูกล้นออกนอกพื้นผิวกระจก

  • สรุป

    • ขอบคุณที่ติดตามกระบวนการสร้างเอฟเฟ็กต์ frosted glass
    • หากต้องการวิธีคัดลอก asset และโค้ดทั้งหมดได้อย่างรวดเร็ว ให้ดูส่วน "Final Recipe Lookahead" ในช่วงต้นของเอกสาร

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-11-25
ความคิดเห็นจาก Hacker News

  • ผู้ใช้คนหนึ่งบอกว่าชอบด้านความสวยงาม แต่รู้สึกว่าการให้ไคลเอนต์คำนวณฟิลเตอร์เบลอราคาแพงซ้ำๆ เป็นเรื่องสิ้นเปลือง และแนวโน้มทั่วไปของการพัฒนาเว็บดูเหมือนจะเพิ่มภาระมากเกินไป

    • แม้จะมีการปรับแต่งให้เหมาะกับ GPU แต่เขาคิดว่าในทางปฏิบัติก็คงแทบไม่ต่างมาก

  • ผู้ใช้อีกรายอธิบายว่าเคยดึงเท็กซ์เจอร์ "ลำแสง" จาก Windows 7 ออกมาเพื่อพยายามทำเอฟเฟ็กต์คล้ายกันบน Android และเพิ่มความอิ่มสีของฉากหลังที่เบลอขึ้นเล็กน้อย

  • ผู้ใช้อีกคนมองว่าเดโมแบบโต้ตอบทำได้ยอดเยี่ยม แต่ไม่ชอบการใช้ frosted glass ในงานออกแบบส่วนติดต่อผู้ใช้ และรู้สึกว่าการเพิ่มมันเข้ามาใน Mac OS เป็นการถอยหลัง

    • โดยเฉพาะเมื่อคอนเทนต์ด้านหลังพาเนลเป็นแบบไดนามิกหรือสร้างโดยผู้ใช้ เขาคิดว่ามันยิ่งไม่เหมาะ

  • ผู้ใช้คนหนึ่งอธิบายว่าในปี 2008 เขาเคยทำเอฟเฟ็กต์คล้ายกันผ่านการทดลอง CSS โดยใช้ภาพพื้นหลังที่เบลอล่วงหน้าและตรึงตำแหน่งไว้

    • เขาระบุว่าวิธีนี้ให้ประสิทธิภาพดีกว่า Gaussian blur แบบเรียลไทม์ แต่มีข้อเสียคือไม่รองรับภาพพื้นหลังแบบไดนามิก

  • ผู้ใช้อีกรายบอกว่ามีเอฟเฟ็กต์ซ้อนกันอยู่ 10 อย่าง และยกเว้นองค์ประกอบด้านความงามที่จำเป็นที่สุดแล้ว เขาคิดว่าราว 7 อย่างนั้นมากเกินไป

    • เขาเสนอว่าควรใช้แค่สีพื้นหลัง, blur, box shadow หรือเส้นขอบเท่านั้น

  • ผู้ใช้คนหนึ่งอธิบายว่าชอบการเพิ่มเท็กซ์เจอร์นอยส์เข้าไปเพื่อให้ได้ผลลัพธ์ที่หยาบขึ้น

  • ผู้ใช้อีกรายบอกว่าความสำเร็จเชิงเทคนิคนั้นน่าทึ่ง แต่ UX แย่

    • เขาอธิบายว่าเป็นเพราะเนื้อหาภายในพาเนลกึ่งโปร่งใสอ่านและทำความเข้าใจได้ยากกว่า อีกทั้งคอนทราสต์กับพื้นหลังก็ต่ำและไม่สม่ำเสมอ

  • ผู้ใช้คนหนึ่งกล่าวว่าเดโม CSS ดั้งเดิมตัวหนึ่งตั้งใจทำมาเพื่อเอฟเฟ็กต์ frosted glass อยู่แล้ว และเขาคิดว่าน่าสนใจ

  • ผู้ใช้อีกรายบอกว่ารู้สึกประทับใจกับความสร้างสรรค์และพลังของ CSS อยู่เสมอ แต่ก็รู้สึกว่าตัวเองคงไม่มีวันเข้าใจความลึกบางส่วนของ HTML/CSS ได้จริงๆ

  • สุดท้าย มีผู้ใช้บอกว่าตัวอย่างแบบโต้ตอบนั้นดี แต่คงดีกว่านี้หากมีฟังก์ชันเปรียบเทียบหรือสลับกลับไปดูเวอร์ชันก่อนหน้าได้

    • เขาอธิบายว่าในกรณีส่วนใหญ่ การปรับปรุงของแต่ละรอบนั้นเล็กน้อยมากจนแทบมองไม่เห็นความแตกต่าง