ตัวสร้าง CSS สำหรับเอฟเฟกต์กระจกความละเอียดสูง

(glass3d.dev)

5 คะแนน โดย GN⁺ 2025-07-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

ให้แนวทางในการสร้างเอฟเฟกต์กระจกความละเอียดสูงด้วย โค้ด CSS
ใช้ฟิลเตอร์ภาพอย่าง blur, brightness, saturate และเงาแบบหลายชั้น
ใช้ pseudo-element เพื่อสร้างเอฟเฟกต์เลเยอร์ด้านหน้าและด้านหลัง รวมถึงพื้นผิว (texture)
นำไปใช้และปรับแต่งกับ UI ได้หลากหลายด้วย CSS class ที่กระชับเพียงตัวเดียว
เหมาะสำหรับการนำ เอฟเฟกต์กระจกความละเอียดสูง ไปใช้ในเว็บโปรเจ็กต์ได้อย่างรวดเร็วและทันสมัย

แนะนำ

โค้ด CSS ชุดนี้ออกแบบมาโดยเฉพาะสำหรับการสร้าง เอฟเฟกต์กระจกความละเอียดสูง ในเว็บ UI สามารถให้ผลลัพธ์ที่ละเอียดและมีมิติมากกว่าเอฟเฟกต์ glassmorphism แบบเดิม และตรวจดูผลลัพธ์ได้อย่างตรงไปตรงมาด้วยการใส่ CSS class เพียงตัวเดียว

เนื้อหาหลัก

ในคลาส .glass3d มีการใส่เอฟเฟกต์ฟิลเตอร์ภาพหลายแบบ เช่น blur(32px), brightness(0.85), saturate(2.5) รวมถึงการเพิ่มสีและ texture แบบ noise
ใช้ box-shadow หลายระดับเพื่อสร้างความรู้สึกเหมือนกระจกที่มีมิติจริง
ใน ::before pseudo-element มีการซ้อน backdrop-filter, สี และภาพพื้นหลังแบบ noise เพื่อสร้างความโปร่งใสของพื้นหลังและพื้นผิวแบบมีมิติ
ใน ::after pseudo-element มีการเพิ่ม เงาด้านใน (inset shadow) เพื่อให้เกิดเอฟเฟกต์เหมือนแสงสะท้อนบนผิวกระจกจริง
แยก z-index เพื่อจัดโครงสร้างให้เอฟเฟกต์ของแต่ละเลเยอร์ไม่ชนกันและแสดงผลได้อย่างถูกต้อง
ใช้ตัวเลือก .glass3d > * เพื่อให้ส่วนเนื้อหาขององค์ประกอบลูกแสดงอยู่บนสุดเสมอ

พื้นหลังการใช้งานและข้อดี

สามารถสร้าง UI เอฟเฟกต์กระจกที่โมเดิร์นและทันสมัยได้ด้วย CSS class เดียว โดยไม่ต้องพึ่งไลบรารีหรือ dependency ภายนอก
นำไปใช้และต่อยอดได้ง่ายกับระบบออกแบบ UI, การ์ด, ป๊อปอัป, ปุ่ม ฯลฯ จึงมีประโยชน์มากสำหรับนักพัฒนาเว็บฟรอนต์เอนด์
ด้วยการใช้ภาพ pattern จริงเป็น texture การจับคู่สีที่หลากหลาย และเอฟเฟกต์เงาหลายชั้น ทำให้มีจุดเด่นด้านมิติและการไล่แสงเงาเหนือกว่าเทคนิค glassmorphism แบบเดิม

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

GN⁺ 2025-07-04

ความคิดเห็นบน Hacker News

มีเวอร์ชันที่ใช้ JavaScript เพื่อใส่เอฟเฟกต์การหักเหแสงจริงให้กับองค์ประกอบบนหน้า แนะนำให้ลองดู https://real-glass.vercel.app/
เอฟเฟกต์นี้มีข้อจำกัดตรงที่ทำให้เบลอได้เฉพาะพิกเซลที่อยู่หลังพื้นผิวโดยตรง แนะนำให้อ่านบทความของ Josh Comeau ที่อธิบายประเด็นนี้ได้ดี (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) และกระทู้บน Hacker News (https://news.ycombinator.com/item?id=42302907) ถ้าพื้นหลังมีการเคลื่อนไหวก็เป็นประเด็นที่ค่อนข้างสำคัญ แต่ถ้าเป็นพื้นหลังนิ่งก็มักไม่สำคัญมาก
- ฉันอ่านบทความยอดเยี่ยมของ Josh แล้วลองทำตามทิวทอเรียลดู แต่ติดปัญหาตอนจัดการ border-radius ด้วย SVG mask มันทำงานได้ดีกับองค์ประกอบที่ฮาร์ดโค้ดไว้ แต่ยังต้องคิดต่อว่าจะทำให้ใช้ได้กับทั้ง component library ที่ border-radius เปลี่ยนตาม brand/container query ได้อย่างไร
- โซลูชันของ Josh ให้ความรู้สึกแบบสัญชาตญาณว่ามีอะไรไม่ค่อยถูกต้อง เพราะมันสมมติว่าองค์ประกอบรอบข้างเป็นวัสดุที่เปล่งแสงออกมา ซึ่งฉันไม่คิดว่านั่นเป็นคุณสมบัติพื้นฐานทางกายภาพของ "material" บนเว็บ โดยพื้นฐานแล้วฉันมองว่า material คล้ายกระดาษมากกว่า
ดูเหมือนทำออกมาได้ค่อนข้างเจ๋ง แต่ถ้าขาดเอฟเฟกต์การหักเหของกระจกไป ความรู้สึกของการแยกเลเยอร์แบบเด่นชัดของ Liquid Glass ก็หายไป ดูจาก design resource ของ Material จะเห็นว่าเขาเน้นว่าแอปควรประกอบด้วยเลเยอร์ 3D ที่เคลื่อนไหวอย่างสอดคล้องกัน แต่พอเอามาทำเป็น 2D จริงแล้วทุกองค์ประกอบปนกัน การแยกแต่ละเลเยอร์จะยากมาก คนมักหา action button ที่อยู่ตามมุมไม่เจอ แม้ motion จะช่วยแยก chrome ออกจากคอนเทนต์ได้ แต่ในเชิงภาพมันไม่ได้โดดเด่นมาก ข้อดีใหญ่ที่สุดของ Liquid Glass น่าจะเป็น edge distortion เพราะมันสร้าง non-linear motion ที่สายตาคนจับได้ทันทีเมื่อคอนเทนต์ขยับ ทำให้การแบ่งเลเยอร์ชัดขึ้นเมื่อมีการเคลื่อนไหว ซึ่งองค์ประกอบการหักเหสำคัญนี้ไม่มีอยู่ที่นี่ การทำ edge distortion ด้วย SVG filter ไม่ใช่เรื่องง่าย และสุดท้ายก็เป็นงานที่ซับซ้อนมาก ดูคำอธิบายแบบทีละขั้นได้ที่ https://atlaspuplabs.com/blog/liquid-glass-but-in-css/… จะเห็นความซับซ้อนชัดเจน และยังเจอ CodePen Spark collection ที่รวมความพยายามทำ Liquid Glass หลายแบบไว้ด้วย พร้อมตัวอย่างอ้างอิงที่ทำออกมาใช้ได้ด้วย SVG แบบฮาร์ดโค้ด แนะนำเช่นกัน https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM
- ฉันคิดว่า Apple สร้าง moat ที่ฉลาดผ่าน Liquid Glass คือใคร ๆ ก็ทำเวอร์ชันราคาถูกได้ง่าย แต่การทำให้ดูเหมือนของจริงนั้นยากมาก เราเห็นกระจกจริงทุกวัน จึงแยก "ของจริง vs ของปลอม" ได้โดยสัญชาตญาณ ทำให้ของเลียนแบบดูออก และ Apple ก็รักษาความรู้สึกแบบ "พรีเมียม" เอาไว้ได้
- ฉันคิดว่า edge distortion ของ Liquid Glass เท่มาก เลยตั้งใจว่าสักวันจะกลับมาทำอีกครั้ง ตอนนี้โปรเจ็กต์ที่กำลังทำอยู่โฟกัสที่การเก็บรายละเอียด ความเข้ากันได้กับเบราว์เซอร์ และการทำวัสดุโดยไม่ใช้ 3D จริง และก็เห็นด้วยว่าพอเลเยอร์เคลื่อนบนพื้นหลังนิ่ง เอฟเฟกต์จะเด่นขึ้น เดโมไซต์ที่กำลังพัฒนาอยู่ตอนนี้มีเอฟเฟกต์แบบนั้นแล้ว แต่ยังไม่เสร็จ ขอบคุณสำหรับการแนะนำแหล่งข้อมูลดี ๆ
- เห็นด้วยกับความเห็นที่ว่าการหักเหของกระจกช่วยสร้างความรู้สึกแยกเลเยอร์ แต่ฉันมองว่าเอฟเฟกต์หักเหมันรบกวนสายตาเกินไป และในบางสภาพแวดล้อมก็ดูไม่สวย แม้จะเป็นปรากฏการณ์ทางกายภาพของกระจกจริง แต่ก็ไม่ได้แปลว่าจำเป็นต้องมี มันให้ความรู้สึกเหมือนขยายหนึ่งในองค์ประกอบที่ฉันชอบน้อยที่สุดของ skeuomorphism ออกไป อนึ่ง ฉันชอบงานดีไซน์ก่อน iOS 7 มากกว่า
ตัวเอฟเฟกต์เองดูดี แต่ฉันยังไม่ค่อยรู้สึกถึงความเป็นกระจก ความต่างที่เห็นได้ทันทีคือแสงไม่ตอบสนองกับ bevel เลย และก็คาดหวังว่าแสงที่สะท้อนบนกระจกจะมีผลกับแสง/สีด้วย แค่ blur อย่างเดียวคงไม่พอ อีกอย่างกระจกยังสร้างเงาเฉพาะตัวได้ด้วย โดยเฉพาะ caustics แต่ดูเหมือน Apple ก็ไม่ได้ใส่ใจถึงจุดนั้น ตอนนี้เงาดูเหมือน drop shadow ธรรมดา เลยยิ่งให้ความรู้สึกเหมือนการ์ดแบน ๆ มากกว่าวัตถุ 3D ซึ่งสวนทางกับแก่นของเทรนด์ล่าสุด เรื่องนี้ทำด้วย CSS ล้วนคงยาก และน่าจะเหมาะกับการรัน shader บน GPU มากกว่า
- ถ้าทำด้วย CSS ไม่ได้ก็สงสัยว่าควรใช้วิธีอะไร และก็ไม่แน่ใจว่าจะเอาเอฟเฟกต์ GPU shader ไปใช้กับ div ทั่วไปได้ไหม ถ้าใส่เอฟเฟกต์ GPU ลงใน HTML พื้นฐานโดยตรงไม่ได้ สุดท้ายการทำ rendering engine ใหม่ด้วย custom canvas อาจจะดีกว่า ตอนนี้ HTML แทบไม่มีความหมายแล้ว เหลือแค่ใช้แท็ก <p> ส่งข้อความและที่เหลือก็เป็นโฆษณาหมด งั้นอาจถึงเวลาต้องเริ่มใหม่ทั้งหมด เหลือแค่ <p> แล้วปรับปรุงการผสานกับ GPU ให้ดีขึ้น
กำลังสะสมตัวอย่างดีไซน์แบบนี้อยู่ https://github.com/swyxio/spark-joy
ขอแนะนำข้อมูลที่เกี่ยวข้องอีกสักหน่อย
- https://ui.glass/generator/ : ตัวสร้าง CSS ฟรีสไตล์ glassmorphism
- frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
- ตัวอย่าง glassmorphism pen codepen, in context
- ตัวอย่าง CSS เอฟเฟกต์ blur+หมุน
```
.blur-and-rotate {
 border-radius: 20px;
 backdrop-filter: blur(20px) hue-rotate(120deg);
 -webkit-backdrop-filter: hue-rotate(120deg);
}
```
- ขอบคุณที่เพิ่มโปรเจ็กต์นี้เข้าไปในรายการ spark-joy
- คิดว่า Spark Joy เป็นแหล่งข้อมูลที่ยอดเยี่ยมมาก
- เจอ ASCII Font generator อันหนึ่ง แต่ดูเหมือนยังไม่มีใน spark-joy เลยขอแนะนำเครื่องมือที่ใช้บ่อยแทน https://patorjk.com/software/taag/…
รู้สึกว่าถ้ามีตัวเลือกซ่อนหรือพับกล่องบนมือถือได้ น่าจะใช้งานสะดวกขึ้นมาก เพราะกล่องกินพื้นที่เต็มหน้าจอจนแทบไม่เห็นเอฟเฟกต์ด้านหลัง แต่ก็น่าสนใจดี ไว้จะลองใหม่บนจอใหญ่ การมีตัวเลือกซ่อนกล่องน่าจะช่วยได้มาก
ดูเหมือนจะใช้เทคนิคคล้ายกับ glass implementation ของฉัน https://news.ycombinator.com/item?id=42225481 โดยเฉพาะแนวทางที่ใช้ box shadow อย่างหนักค่อนข้างคล้ายกัน
- โปรเจ็กต์ของคุณเจ๋งมาก ดีใจที่ไม่ได้มีแค่ฉันคนเดียวที่ใช้ชั้นเงาหลายชั้นเพื่อสร้างมิติ ไอเดียการเพิ่ม Light Rays น่าประทับใจเป็นพิเศษ
ใช้เป็นเอฟเฟกต์พื้นหลังเว็บได้ดี
บนมือถือของฉันการเลื่อนค่อนข้างช้า เลยสงสัยว่ามีเอฟเฟกต์เลื่อนช้าแบบจงใจอยู่แล้วหรือว่าเป็นผลข้างเคียงจากเอฟเฟกต์กระจก
- ชี้ประเด็นได้น่าสนใจนะ ในหน้านี้ไม่มีเอฟเฟกต์การเลื่อนใด ๆ เลย ถ้าเป็นไปได้อยากให้ช่วยแชร์ว่าใช้อุปกรณ์ เบราว์เซอร์ และสภาพเครือข่ายแบบไหน
- บนเครื่อง M4 RAM 128GB ของฉันทำงานได้ดี
คิดว่าทำออกมาได้ดีมาก และทุกครั้งก็ยังทึ่งที่ computer graphics ไม่ได้มี "วิธีพิเศษอย่างหนึ่ง" แต่จริง ๆ คือ "กลลวงซ้อนกัน 5 ชั้น" การรองรับข้ามเบราว์เซอร์ก็น่าจะเป็นความท้าทายใหญ่เหมือนกัน เลยสงสัยว่าพอจะเดาได้ไหมว่าส่วนไหนใช้ทรัพยากรมากที่สุด ฉันเดาเล่น ๆ ว่าน่าจะเป็น backdrop-filter
- ฉันเองก็ไม่คิดว่าจะต้องใช้หลายเทคนิคขนาดนี้ ส่วนที่หนักที่สุดคือการทำ blur ของ backdrop-filter ยิ่งค่า blur สูง ก็ยิ่งต้องดูข้อมูลพิกเซลรอบข้างมากขึ้นในการเรนเดอร์ อีกส่วนที่ใช้ทรัพยากรก็คือการอัปเดตลักษณะของ glass แบบเรียลไทม์ตอนเลื่อนหน้าหรือเมื่อพื้นหลังวิดีโอเปลี่ยน
- บางครั้งแค่จะทำอะไรสักอย่างให้ "จัดกึ่งกลาง" ก็ยังต้องใช้ "กลลวงซ้อนกัน 5 ชั้น" เหมือนกัน