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

 (tyleo.com)
4 คะแนน โดย GN⁺ 2024-11-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • สรุปกระบวนการนำเอฟเฟกต์แผงกระจกแบบเดียวกันบนเว็บมาสร้างใหม่ด้วย HTML/CSS/JavaScript โดยเริ่มจาก frosted acrylic UI ของ Forza Horizon 3 และ Forza Motorsport 7
  • แกนหลักของเอฟเฟกต์คือ Gaussian blur และควรใช้ CSS backdrop-filter ร่วมกับ -webkit-backdrop-filter สำหรับ iOS เพื่อลดความแตกต่างระหว่างเบราว์เซอร์
  • หากใช้เพียงการเบลออย่างเดียวจะดูแบน จึงเพิ่มความลึกของขอบและ subsurface scattering ด้วย box-shadow: inset และใช้เงาปกติเพื่อสร้างความรู้สึกว่าลอยอยู่เหนือพื้นหลัง
  • การสะท้อนบนผิวทำโดยวาง ภาพลำแสง เป็นเลเยอร์แยก และเลียนแบบการสะท้อนแบบไดนามิกตามการเคลื่อนที่ของกระจกด้วย background-attachment: fixed หรือ JavaScript
  • UI สุดท้ายประกอบจากเลเยอร์ .glass, .light, .drag-me แล้วเพิ่มมุมโค้ง, clipping และสีพื้นหลังแบบกึ่งโปร่งใส จนได้คอมโพเนนต์กระจกที่คัดลอกไปใช้ได้

เอฟเฟกต์แผงกระจกที่นำมาจาก UI เกม

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

สร้างการเบลอพื้นหลังด้วย backdrop-filter

  • หัวใจของเอฟเฟกต์ frosted glass ที่ดีคือ Gaussian blur ที่ทำให้พื้นหลังเบลอจนดูเหมือนหน้าจอกึ่งโปร่งใส
  • ใน CSS ใช้ backdrop-filter ร่วมกับ blur เพื่อทำเอฟเฟกต์นี้
  • องค์ประกอบกระจกพื้นฐานเริ่มจาก div ธรรมดาและคลาส .glass
    • backdrop-filter: blur(10px)
    • -webkit-backdrop-filter: blur(10px)
  • บน iOS จำเป็นต้องใช้ -webkit-backdrop-filter เว้นแต่ว่าจะปรับการตั้งค่าเฉพาะลงลึก
  • เนื่องจาก backdrop-filter เพิ่งได้รับการรองรับจากเบราว์เซอร์ไม่นาน ผู้ใช้ Internet Explorer จึงไม่สามารถลองเดโมได้

สร้างความลึกด้วยขอบและเงา

  • หากใช้แค่ backdrop-filter: blur(10px) กระจกอาจดูแบนและเรียบเกินไป
  • ขอบทำด้วย box-shadow: inset แทน border: 1px solid
    • border ส่งผลต่อขนาดขององค์ประกอบและการจัดวางองค์ประกอบลูก
    • เมื่อใช้ box-shadow: inset องค์ประกอบลูกจะเติมเต็มพื้นที่เนื้อหาของกระจกได้อย่างเป็นธรรมชาติ โดยไม่ต้องปรับแต่งอย่าง margin ติดลบ
  • ใช้ inset shadow สีขาวกึ่งโปร่งใส 2 ชั้นเพื่อแสดงขอบกระจก
    • shadow ชั้นแรกแสดงมุมกระจกที่มองเห็นจากด้านนอก ในตัวอย่างจะปรากฏที่ขอบด้านล่างและด้านซ้าย
    • shadow ชั้นที่สองแสดงขอบที่มองเห็นผ่านกระจก ในตัวอย่างจะปรากฏที่ขอบด้านบนและด้านขวา
  • ขอบที่มองเห็นผ่านกระจกมีแสงลดลง จึงตั้งให้ดูนุ่มและโปร่งใสมากกว่า
  • การเพิ่ม box-shadow สีเข้มแบบปกติช่วยให้กระจกให้ความรู้สึกว่า ลอยอยู่เหนือพื้นหลังในเชิงกายภาพ

การกระเจิงของแสงและการสะท้อนบนผิว

  • ความรู้สึกว่าแสงกระจายภายในกระจกแสดงออกแบบเรียบง่ายจาก subsurface scattering
  • การทำเอฟเฟกต์นี้ใช้ box-shadow: inset อีกครั้ง
    • เอฟเฟกต์การกระเจิงสั้น: inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025)
    • เอฟเฟกต์การกระเจิงที่ลึกกว่า: inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025)
  • เอฟเฟกต์นี้จะเห็นชัดขึ้นเมื่อ ลากกระจกไปบนพื้นหลังสีเข้ม
  • นอกจากความรู้สึกว่าพื้นหลังถูกเบลอจนเกิดการหักเหแล้ว ยังเพิ่ม คุณสมบัติการสะท้อน ของแสงบนผิวกระจกด้วย
  • การสะท้อนแสงทำโดยผสมภาพลำแสงเข้าเป็นพื้นหลัง
    • มี YouTube tutorial และ คำอธิบายแบบข้อความ ที่ใช้เป็นข้อมูลอ้างอิงเมื่อจะสร้างภาพลักษณะคล้ายกันเอง
    • หากใส่ภาพโดยตรงเป็น background-image ขององค์ประกอบ .glass ตัว backdrop-filter จะทำให้ภาพเบลอ จึงใช้เลเยอร์แยกอย่าง ::before

เปลี่ยนการสะท้อนแบบคงที่ให้เป็นไดนามิก

  • หากวางเพียงภาพลำแสง ก็จะเกิดการสะท้อน แต่เมื่อขยับกระจก แสงอาจดูเหมือนถูกตรึงอยู่กับผิวกระจก
  • วิธี CSS ล้วนคือเพิ่ม background-attachment: fixed ให้กับ ::before
    • ทำได้ง่าย แต่อาจไม่ทำงานบนทุกแพลตฟอร์ม
  • หากต้องการให้ทำงานบนทุกแพลตฟอร์ม ให้ใช้ JavaScript เลียนแบบ background-attachment: fixed
    • การจัดการ ::before โดยตรงจาก JavaScript ไม่มีประสิทธิภาพ จึงใช้ div.light แยกต่างหาก
    • ใส่แอตทริบิวต์ data-js-background-attachment-fixed ให้กับองค์ประกอบเป้าหมาย
  • JavaScript จะอ่านค่า getBoundingClientRect() ขององค์ประกอบเป้าหมายในทุกเฟรมแอนิเมชัน แล้วอัปเดต background-position ในทิศทางตรงข้ามกับตำแหน่งภายใน viewport
    • backgroundPositionX = -clientRect.x
    • backgroundPositionY = -clientRect.y
  • ลูปซ้ำทำงานด้วย requestAnimationFrame

โครงสร้าง HTML/CSS สุดท้าย

  • HTML สุดท้ายของเวอร์ชัน JavaScript มีโครงสร้างที่ใส่ .light สำหรับการสะท้อนแสง และ .drag-me ซึ่งเป็นเลเยอร์ข้อความ/สี ไว้ภายใน .glass

  Drag Me
  • .glass รับผิดชอบรูปทรงพื้นฐานและเอฟเฟกต์ภาพของแผงกระจก
    • ใช้ backdrop-filter และ -webkit-backdrop-filter เพื่อใช้ การเบลอพื้นหลัง
    • ใช้ box-shadow หลายชั้นเพื่อสร้างขอบ เงา และเอฟเฟกต์การกระเจิง
    • ใช้ position: relative เพื่อให้องค์ประกอบลูกเติมเต็มพื้นที่ของพาเรนต์ได้
    • ใช้ border-radius: 5px เพื่อทำมุมโค้ง
    • ใช้ overflow: hidden เพื่อตัดไม่ให้องค์ประกอบลูกยื่นออกนอกมุมโค้ง
  • .light ใช้ภาพลำแสงเป็นพื้นหลังแบบซ้ำ
    • background-image: url(path/to/light.png)
    • background-repeat: repeat
    • background-size: 750px
    • opacity: 0.075
    • ใช้ position: absolute และออฟเซ็ตทั้งสี่ทิศทางเป็น 0 เพื่อเติมเต็มพาเรนต์ทั้งหมด
    • ใช้ z-index: -1 เพื่อเรนเดอร์ไว้ด้านหลังองค์ประกอบลูกอื่น
  • .drag-me จัดเนื้อหาไว้กึ่งกลางและสร้างเลเยอร์กระจกกึ่งโปร่งใสที่มีสี
    • display: flex
    • align-items: center
    • justify-content: center
    • height: 30px
    • background-color: rgba(12, 13, 14, 0.75)

ความแตกต่างของเวอร์ชันที่ไม่มี JavaScript

  • เวอร์ชันที่ไม่มี JavaScript ใช้ .glass::before แทนองค์ประกอบ .light แยกต่างหาก
  • ใช้ภาพลำแสงกับ ::before และใช้ background-attachment: fixed เพื่อทำการสะท้อนที่ตรึงอยู่กับหน้าจอ
  • วิธีนี้ไม่ได้ทำงานบนทุกแพลตฟอร์ม ส่วนเวอร์ชัน JavaScript จะชดเชยด้วยการอัปเดต background-position โดยตรง

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

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

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

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

    • ดูเหมือนว่าแต่ละคนมีอคติของตัวเองว่าอะไรคือความสิ้นเปลือง
      ผมโตมากับยุคโมเด็ม 14.4k เลยชินกับการคิดว่าแบนด์วิดท์เครือข่ายหายากและแพงกว่าเวลา CPU มาก
      ถ้าคำนวณบนไคลเอนต์ได้ง่าย ๆ ผมมองว่าการดาวน์โหลดภาพทั้งภาพผ่านอินเทอร์เน็ตนั้นสิ้นเปลืองกว่า เพราะเพื่อรับภาพนั้นต้องให้เราเตอร์ เซิร์ฟเวอร์ และแม้แต่ดิสก์ที่อยู่ไกล ๆ ทำงาน ทั้งหมดนั้นเพื่อเลี่ยงการประมวลผลข้อมูลที่มีอยู่ใน RAM ของไคลเอนต์อยู่แล้วเพียงครั้งเดียว ผมว่าแบบนั้นน่าเสียดายกว่า
    • เว็บไซต์ที่ในเชิงเทคนิคอาจดู “สิ้นเปลือง” เมื่อดูการใช้งานจริงในภาพใหญ่ ส่วนใหญ่ก็ถูกใช้เพื่อ ความบันเทิงล้วน ๆ
      ดังนั้นถ้าความบันเทิงเองไม่ใช่เรื่องสิ้นเปลือง การใช้การคำนวณเพิ่มเพื่อทำให้ความบันเทิงดีขึ้นก็น่าจะยอมรับได้
    • ในมุมคนทั่วไป มันดูเหมือน “คำนวณกราฟิกที่เรนเดอร์แล้วใหม่ครั้งใหญ่” จึงรู้สึกสิ้นเปลือง แต่ในทางเทคนิคผมว่าไม่จำเป็นต้องเป็นเช่นนั้น
      ถ้าจะวาดสิ่งที่เปลี่ยนใน UI ใหม่ ยังไงก็ต้องใช้การคำนวณของ GPU อยู่แล้ว และ blur แบบง่าย ๆ สามารถเพิ่มเข้าไปได้ค่อนข้างมีประสิทธิภาพ มีโอกาสที่ต้นทุนจะต่ำกว่า animation ของวัตถุ DOM ที่ไม่ได้ปรับให้เป็นเลเยอร์ GPU ด้วยซ้ำ
      เมื่อเห็นว่าแม้แต่เว็บไซต์ที่เรียบง่ายที่สุดในปัจจุบันก็โหลด JavaScript เกิน 1MB พร้อมตัวติดตามจำนวนมากและกิน CPU แล้ว blur เพื่อเอฟเฟกต์ด้านสุนทรียะอยู่ต่ำมากในรายการสิ่งสิ้นเปลือง
    • ผมคิดว่าวิธีส่งทั้งภาพที่เบลอแล้วและภาพต้นฉบับผ่านเครือข่ายคือสิ่งที่การพัฒนาเว็บทำกันมาตลอด 20 ปีที่ผ่านมาไม่ใช่หรือ
      ถ้ามีภาพความละเอียดสูงจำนวนมาก แบนด์วิดท์เครือข่ายจริง ๆ ก็มีจำกัด และโดยเฉพาะในสภาพแวดล้อมมือถือที่สัญญาณไร้สายไม่ดี มันด้อยกว่าการคำนวณในเครื่องอย่างชัดเจน น่าทึ่งที่ทุกวันนี้ทำสิ่งนี้ได้ด้วย CSS/WebGL เท่านั้น เมื่อก่อนต้องใช้ hack และวิธีอ้อมค้อมมากมายเพื่อทำเอฟเฟกต์แบบนี้
    • ตอนนี้ถึงเวลาต้องยอมรับอย่างจริงจังแล้วว่าเทคโนโลยีจำนวนมากที่คิดว่า “โอ้ ดูเจ๋งดี แน่นอนว่าฉัน/พวกเราต้องมี” นั้นไม่มีที่ยืนในโลกนี้
      ไม่ว่าการกระทำนั้นจะสิ้นเปลืองหรือไม่ วิธีคิดแบบนี้เองสะท้อนปัญหาที่ใหญ่กว่าของสังคม ทำไมเราถึงต้องการสิ่งนี้ และทำไมเราถึงมองว่าสภาพที่ไม่มีมันเป็นเรื่องแย่?
      เมื่อคิดถึงขนาดของปัญหาสังคมในปัจจุบัน ใครจะสนใจว่าแผง UI จะเบลอหรือไม่กัน

  • ตอนลองดูว่า shader API ใหม่บน Android ทำอะไรได้บ้าง ผมเคยสร้างเอฟเฟกต์ Windows 7 Aero Glass ขึ้นมาใหม่ และดึง texture “ลำแสง” ที่คล้ายกันออกมา
    ผลลัพธ์ออกมาคล้ายกับบทความนี้มาก แต่ไม่ได้ใส่เงาด้านใน และเพิ่ม saturation ของพื้นหลังที่เบลอขึ้นเล็กน้อย
    https://mastodon.social/@grishka/110524476584503201

    • เจ๋งมาก texture ลำแสง มีบทบาทกับเอฟเฟกต์นี้ได้มากจริง ๆ
      พูดตามตรง สิ่งที่ทำไว้สำหรับ tutorial ก็ไม่ได้ดีขนาดนั้น ผมชอบเส้นที่คมกว่าของฝั่ง Windows 7
      ผมก็คิดเรื่องการปรับ saturation และเห็นในตัวอย่างอื่น ๆ ด้วย แต่ตัดสินใจไม่ใช้ในบทความ เพราะภาพดวงจันทร์ที่ใช้ไม่ได้มีสีมากนัก คงไม่ต่างมากอยู่ดี คนที่ทำเอฟเฟกต์กระจกเองน่าจะลองทดลองกับ saturation ดูด้วย

  • งานที่ทำยอดเยี่ยม และวิธีนำเสนอเป็น เดโมแบบโต้ตอบได้ ก็ดี สนุกดีที่ลากหน้าต่างไปบนดวงจันทร์ได้
    แต่ผมไม่ชอบการใช้เอฟเฟกต์กระจกฝ้าในงานออกแบบส่วนติดต่อผู้ใช้ และรู้สึกว่าตอนที่เพิ่มเข้ามาใน Mac OS นั้นเป็นการถอยหลัง ดีไซเนอร์หลงใหลเอฟเฟกต์นี้ง่ายเกินไป แต่ในความเป็นจริงมันไม่เคยเหมาะอย่างแท้จริง โดยเฉพาะเมื่อเนื้อหาหลังแผงเป็นแบบไดนามิกหรือผู้ใช้สร้างขึ้นเอง
    มันเหมือน brushed metal ของยุค 2010s และน่าประหลาดใจที่มันรั่วออกมาจาก Windows Vista แล้วแพร่ไปทุกที่

    • ผมไม่เข้าใจว่าทำไมถึง “ไม่เหมาะ” การออกแบบภาพขึ้นอยู่กับรสนิยมส่วนตัวว่าอะไรดูดี มากกว่าวัตถุประสงค์เชิงปฏิบัติ
      แน่นอนว่าการออกแบบมีผลต่อฟังก์ชันด้วย แต่เป้าหมายหลักคือทำให้ประสบการณ์ผู้ใช้น่าเพลิดเพลินขึ้น
      ผมคิดว่า skeuomorphism ทำให้อินเทอร์เฟซสนุกกว่ากระแสมินิมอลที่ทำให้ทุกอย่างแบนราบมาตลอดกว่าสิบปีที่ผ่านมา องค์ประกอบตกแต่งทางภาพที่เลียนแบบพื้นผิวและวัสดุในโลกจริงช่วยเพิ่มความคุ้นเคยและการเข้าถึง ในเชิงปฏิบัติ flat design ยังทำให้แยกองค์ประกอบและสถานะได้ยาก ขณะที่ยุคที่มีปุ่ม 3D, brushed metal และกระจกฝ้านั้นชัดเจนกว่ามาก
      ผมคิดว่าตอนนี้ลูกตุ้มกำลังแกว่งกลับ ดีไซเนอร์จำนวนมากขึ้นกำลังหลีกเลี่ยงรูปลักษณ์แบน ๆ และหวังว่า UI ที่เป็นมิตรกับมนุษย์มากขึ้นจะกลับมา
    • ผมไม่ใช่นักออกแบบ UI เลยอยากถามจริงจังว่า ปัญหาคือการใช้ เอฟเฟกต์ด้านสุนทรียะ อย่างกระจกฝ้าหรือ brushed metal ในการออกแบบ UI เอง หรือเป็นเพราะระหว่างพยายามสร้างอินเทอร์เฟซแบบนั้น ดีไซเนอร์บางคนทำให้สูญเสียสัญญาณทางภาพที่บอกตำแหน่งและบทบาทของคอนโทรลไป?
    • ผมใส่ความโปร่งใสเล็กน้อยให้หน้าต่างเทอร์มินัลมาหลายปีแล้ว ตอนนี้เริ่มต้องกลับมาคิดใหม่
    • brushed metal ไม่ส่งผลต่อบริบทของข้อมูล ส่วน blur ให้ บริบทที่ปรับระดับได้
      blur ส่วนใหญ่ไม่ใช่คำตอบที่ถูกต้อง แต่บางครั้งก็เป็นตัวเลือกที่ใช่
    • ที่น่าขันคือ macOS เวอร์ชันก่อน ๆ ก็ใช้ brushed metal กันเยอะมาก

  • ในปี 2008 ก่อนที่ CSS จะรองรับ backdrop-blur เคยมีการทดลอง CSS เพื่อสร้างเอฟเฟกต์คล้ายกัน: https://webdev.andersriggelsen.dk/aero/
    วิธีคือใส่เอฟเฟกต์กระจกลงบนภาพพื้นหลังตำแหน่งคงที่ที่ถูกเบลอไว้ล่วงหน้า: https://webdev.andersriggelsen.dk/aero/bgl.jpg
    ประสิทธิภาพดีกว่า Gaussian blur แบบเรียลไทม์มาก แต่ข้อเสียที่ยังเหมือนเดิมคือไม่สามารถใช้ภาพพื้นหลังแบบไดนามิกได้

    • ก่อนหน้านั้นอีก เคยก้าวไปอีกขั้นด้วยการใช้ไฟล์ Flash เป็นพื้นหลัง
      สามารถสร้างเอฟเฟกต์กระจกได้แม้ในเฟรมที่เคลื่อนไหวแบบไดนามิก จำไม่ได้ว่าใช้ iframe หรือไม่ เลยต้องไปค้นโค้ดดู แต่ถ้าคิดถึงยุคนั้น ก็น่าจะมีโอกาสสูงว่าใช้
    • หน้าต่างลอยไม่อัปเดตหลังจากตำแหน่งเริ่มต้น
      เป็น Windows 10 19045.5131 และ Chrome เป็นเวอร์ชันล่าสุด Version 131.0.6778.86 (Official Build) (64-bit)

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

    • การเหมารวมว่า “UX ไม่ดี” จากเอฟเฟกต์ภาพเพียงอย่างเดียวคงทำได้ยากมาก ขึ้นอยู่กับวิธีผสานเข้ากับระบบเป็นอย่างมาก
      ถ้าผสานได้ดี ก็ควรปรับความแรงของเอฟเฟกต์ไม่ให้ UI ดูเกินพอดี ตรวจสอบการรองรับฟีเจอร์เพื่อหลีกเลี่ยงการตกแต่งเพิ่มเติมเมื่อไม่รองรับ blur และตรวจสอบความสามารถของจอแสดงผลกับวิดีโอเพื่อไม่เรนเดอร์บนอุปกรณ์ที่อาจมี GPU ไม่เพียงพอ
      นอกจากนี้ควรตรวจสอบค่าความชอบของผู้ใช้ เพื่อให้พื้นหลังสีทึบที่คอนทราสต์ดีแก่ผู้ใช้ที่มีปัญหากับพื้นหลังซับซ้อน จำกัดขอบเขตของเอฟเฟกต์และเงาตามพื้นที่ที่ใช้ได้ และปรับ blur กับความทึบตามความซับซ้อนและคอนทราสต์ของพื้นหลังใต้พื้นที่เบลอ
      ยังจำเป็นต้องทำให้ blur และเงาปรับสเกลแบบ adaptive ให้สอดคล้องกับ typography ด้วย โดยแก่นของ UX คือการออกแบบว่าผู้ใช้สัมผัสประสบการณ์การโต้ตอบกับแอปทั้งระบบอย่างไร ไม่ใช่การตัดสินแพ้ชนะจากตัวเลือกสไตล์เพียงรายการเดียว
    • Windows Vista แก้ปัญหานี้ด้วยการใส่ เส้นขอบคล้ายเงาสีขาว ให้ตัวอักษรสีดำบนกระจกฝ้า
      ทำให้ยังอ่านตัวอักษรได้แม้ในกรณีสุดโต่งที่พื้นหลังเป็นสีดำ ใน CSS สามารถทำซ้ำได้ด้วยพร็อพเพอร์ตี text-shadow
    • เพราะอย่างนั้นผมจึงไม่ใช้เอฟเฟกต์นี้ทั่วทั้งเว็บไซต์ของตัวเอง เพราะทำ UX ที่ดีได้ยากขึ้น
      แต่ในเกมยังมีพื้นที่ให้ใช้มากกว่า โดยเฉพาะกับ HUD ที่ไม่อยากบังพื้นหลังซึ่งเป็นพื้นที่หลักที่ผู้ใช้โต้ตอบ
    • ถ้าปัญหาคือคอนทราสต์ต่ำ ก็ทำให้พื้นหลังหรือโทนสีกระจกมืดลงและทำให้คอนเทนต์ด้านหน้าสว่างขึ้น หรือทำกลับกันก็ได้
      คอนทราสต์ที่ดีเป็นความท้าทายในทุกองค์ประกอบการออกแบบ ไม่ว่าจะเป็นสีทึบหรือเอฟเฟกต์กระจก
      เรื่องที่สิ่งที่เกิดขึ้นในพื้นหลังทำให้เสียสมาธิและสับสนทิศทางก็เป็นเรื่องอัตวิสัยมาก เช่นเดียวกับการลดความทึบของสีทึบ เราก็ลดความโปร่งแสงของกระจกได้
      คำวิจารณ์นี้ยากจะถือว่าจริงอย่างเป็นวัตถุวิสัย และมีวิธีผสานองค์ประกอบดีไซน์นี้โดยหลีกเลี่ยงปัญหาเหล่านั้นได้ ภาพหน้าจอ Forza ดูโอเค และตอนเห็นจริง ๆ พื้นหลังก็ไม่ได้ทำให้เสียสมาธิ กลับได้ UI ที่น่าสนใจและน่ามองกว่าพื้นหลังสีทึบ อาจสำคัญกว่าในวิดีโอเกม แต่ใน OS และเว็บดีไซน์ก็ใช้ให้ดูดีมีรสนิยมได้เช่นกัน
    • blur เป็นวิธีซ่อนข้อมูลโดยยังคงบริบทไว้ในระดับที่ควบคุมได้
      ถ้าต้องการบริบทมาก ๆ blur ไม่ใช่ตัวเลือกที่ดี และถ้าไม่ต้องการบริบทเลยก็ไม่ใช่ตัวเลือกที่ดีเช่นกัน
      แต่บางครั้งมันก็เป็นตัวเลือกที่ยอดเยี่ยม

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

    • เห็นด้วย บนมือถือ ตั้งแต่ขั้นที่สองเป็นต้นไปแทบไม่เห็นความแตกต่าง หรือไม่รู้เลยด้วยซ้ำ

  • มีเอฟเฟกต์ซ้อนกันอยู่ราว 10 อย่าง ถ้าไม่ได้เล็งสุนทรียศาสตร์ที่ละเอียดพิถีพิถันที่สุด ประมาณ 7 อย่างก็ดูเกินไป
    ใช้แค่สีพื้นหลัง, blur, เงาหรือเส้นขอบก็น่าจะพอ

    • คนที่อยากได้เอฟเฟกต์กระจกที่ไม่หนักเกินไปก็เลือกหยิบจากบทช่วยสอนได้
      แค่ถึงขั้นที่สาม ก็ได้ชิ้นกระจกที่ดูดีพอสมควรด้วย blur กับเงาเท่านั้นแล้ว โดยส่วนตัวผมแนะนำให้ผสมภาพลำแสงแบบคงที่เข้าไปด้วย แอปพลิเคชันส่วนใหญ่คงไม่ต้องใช้เอฟเฟกต์ JavaScript เต็มชุด สนุกก็จริง แต่อาจทำให้เสียสมาธิได้
      แค่ blur, เงา และลำแสง ก็เข้าใกล้ ภาพ Forza ด้านบนได้จริง ๆ
    • น่าสนใจที่คอมเมนต์ยอดนิยมส่วนใหญ่พูดถึงความสิ้นเปลือง
      ผมคิดว่านั่นเป็นหนึ่งในเหตุผลที่ทุกคนหันไปใช้ flat design กัน Windows Vista กับเอฟเฟกต์กระจกนั้นสวย แต่มีต้นทุนการคำนวณสูง
      flat design เป็นที่ถกเถียงในเชิงสุนทรียะ และโดยเฉพาะสำหรับผู้ใช้สูงวัย อาจใช้งานยากกว่า skeuomorphic design [0][1]
      ถ้าความสมจริงช่วยการใช้งานได้ ผมคิดว่าการใช้เอฟเฟกต์แบบนี้บนเว็บก็สมเหตุสมผลทีเดียว
      [0]: https://www.tandfonline.com/doi/abs/10.1080/0144929X.2020.18...
      [1]: https://www.sciencedirect.com/science/article/abs/pii/S01419...
    • ผมสงสัยว่าทำไมถึงมองว่าขีดจำกัดของเอฟเฟกต์ที่ซ้อนกันควรเป็น n <= 3
      ไม่แน่ใจว่าเป็นปัญหาด้าน accessibility, ประสิทธิภาพ, การบำรุงรักษา หรือเหตุผลอื่น
      ในบรรดาทักษะการพัฒนา CSS เป็นจุดที่ผมอ่อนที่สุดอย่างท่วมท้น เลยอยู่ในสภาพที่ไม่รู้เลยว่าอะไรเป็นแนวปฏิบัติที่ดีหรือไม่ดี
    • พลาดส่วนที่ผู้เขียนอธิบายว่าตั้งเป้าไปที่สุนทรียศาสตร์ที่ละเอียดพิถีพิถันที่สุดไปหรือเปล่า?

  • น่าสนใจที่เหมือนกลับมาครบวงอีกครั้ง
    หนึ่งในเดโม CSS ยุคแรก ๆ ซึ่งเป็นเดโมสำหรับ CSS 1 ก็คือ เอฟเฟกต์กระจกฝ้า: https://meyerweb.com/eric/css/edge/complexspiral/glassy.html

  • พูดตรง ๆ ก็ค่อนข้างน่าประทับใจมาก การได้เห็นว่า CSS สามารถสร้างสรรค์และทรงพลังได้แค่ไหนเป็นเรื่องที่สนุกเสมอ
    แต่ก็รู้สึกเหมือนว่าใน HTML/CSS มีระดับบางอย่างที่ผมคงไม่มีวันเข้าใจอยู่ เดโมนี้ก็เป็นแบบนั้นเลย คนนี้กำลังทำหน้าต่างฝ้าอยู่ ส่วนผมยังจัด div อันเดียวให้อยู่กึ่งกลางไม่ได้ด้วยซ้ำ

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

  • ไม่ใช่กระจกฝ้าเป๊ะ ๆ แต่ผมลองใส่ เอฟเฟกต์กระจก ไว้ที่แถบด้านข้างของ https://www.gyan.dev/ffmpeg/builds/

    • ถ้าดูบน PC ไซต์นี้ดูสบายตาและสวยมาก