ตัวสร้าง Glassmorphism CSS

เริ่ม้นอย่างแพร่หลายใน macOS Big Sur, iOS และ Windows 11 Fluent Design โดย Glassmorphism ได้กลายเป็นมาตรฐนหลักสำหรับการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ระดับพรีเมียม

แนวคิดหักพึ่งพา "Z-axis" การทำให้เลเยอร์บนสุดกึ่งโปร่งใสและเบลอเลเยอร์สีสดใส้างใต้ ช่วยให้นักออกแบบสร้างลำดับชั้นทางสายตาได้โดยไม่ต้องพึ่งเงาตกกระทบทึบๆ ทำให้ผู้ใช้เข้าใจบริบทของสิ่งที่เกิดขึ้น "ด้านหลัง" หน้าตางที่กำลังใช้งานอยู่

การสร้างเอฟเฟกต์ Glassmorphism นักพัฒนาะพึ่งพากฎ backdrop-filter ใน CSS เมื่อคุณกำหนดให้องค์ประกอบมีสีพื้นหลังกึงโปร่งใส (เช่น background: rgba(255, 255, 255, 0.2);) และใช้ backdrop-filter: blur(10px); เอนจินการเรนเดอร์ของเบราว์เซอร์จะดึงพิกเซลที่อยู่ด้านหลัง เบลอมันทางคณิตศสตร์ แล้วระบายลงในองค์ประกอบของคุณ

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

แม้การเขียน CSS เองจะดีต่อการเรียนรู้ แต่นักพัฒนายุคใหมซะส่วนใหญ่มักชอบใ้เฟรมเวิร์กอย่าง Tailwind

การสร้างการ์ดกระจกใน Tailwind คุณต้องมี 3 เลเยอร์สำคัญ:

• ความเบลอ: ใช้ backdrop-blur-md หรือ backdrop-blur-lg เพื่อทำพื้นหลังให้ฝ้า
• เฉดสี: ใช้ bg-white/20 (สำหรับโมดสว่าง) หรือ bg-slate-900/40 (สำหรับโหมดมืด) เพื่อให้กระจกมีมิติทางกายภา
• ขอบ: กระจกจริงจะสะท้อนแสงที่ขอบ จำลองสิ่งนี้ด้วยขบขนาด 1px นุ่มนวลโดยใช้ border border-white/20

ตัวสร้างของ Utiliome มีสวิตช์สลับเพื่อส่งออกเป็น CSS มาตรฐานหรือสตริงคลาส Tailwind ที่จัดรูปแบบไว้อย่างสมบูรณ์แบบ

ข้อผิดพลาดใหญ่ของนักพัฒนามือใหม่เม—่อทำ glassmorphism คือการลืมอุปกรณ์ของ Apple แม้ Chrome และ Firefox จะรองรับคุณสมบัติ backdrop-filter มาตรฐานแล้ว แต่ Safari (โดยเฉพาะ iOS เวอร์ชันเก่า) ยังคงต้องใช้ vendor prefix อย่างเคร่งครัด

หากคุณลืมใส่ -webkit-backdrop-filter: blur(10px); ผู้ใช้ Apple จะเห็นเพียง div โปร่งใสที่ชวนสับสน ทำให้ข้อความอ่านไม่ออกเมื่ออยู่บนพ—้นหลัง

ตัวสร้าง CSS ของ Utiliome จะแทรก WebKit prefix ที่จำเป็นลงในโค้ดให้อ—ตโนมัติ เพื่อให้ดีไซน์ของคุณแสดงผลเหมือนกันในทุกระบบปฏิบัติการหลัก

ข้อวิจารณ์ที่พบบ่อยที่สุดของเทรนด์ glassmorphism คือเรืองการเข้าถึงที่ต่ำ หากภาพพื้นหลังที่มีสีสันเปลี่ยนจากสีน้ำเงินเข้มเป็นสีเหลืองสว่างด้านหลังการ์ดกระจก ข้อความสีขาวอาจเลืนหายไปทันที

วิธีแก้ไขคือคุณต้องใช้สีทึบแสงของพื้นหลังทีเข้มพอ ตัวอย่างเช่น หากใช้ข้อความสีขาว ให้ปรับสีพื้นหลังกะจกเป็น rgba(0, 0, 0, 0.6) เพื่อรับประกันว่าไม่ว่าภาพด้านหลังจะเป็นอย่างร ข้อความจะยังรักษาอัตราส่วนความต่างระดับสีขั้นต่ำ 4.5:1 ตามมาตรฐานกฎหมายได้เสมอ

มองของมนุษย์ต้องการสัญญาณแสงเพื่อตีความมิติความลึก หากคุณเพียงแค่เบลอพื้นหลัง UI อาจดู 'แบนราบ'

การทำให้กระจกดูโดดเด่น คุต้องยกระดับมันขึ้นบนแกน Z ตัวสร้างของ Utiliome ช่วยให้คุณปรับแต่ง box-shadow นุ่มนวลได้ การรักษาความทึบของเงาให้ต่ำมาก (ประมาณ 10%) แต่เพ่มรัศมีเบลอให้สูง (32px) จะสร้างเอฟเฟกต์ Ambient Occlusion ที่นุ่มนวลและแยกกรจกออกจากพื้นหลังสีสดใสได้อย่างสวยงาม