เครื่องมือสร้าง Glassmorphism CSS

 (ui.glass)
7 คะแนน โดย xguru 2021-08-29 | 2 ความคิดเห็น | แชร์ทาง WhatsApp

  • เทรนด์การออกแบบ UI ที่ใช้ใน macOS Big Sur / Windows 11

  • แสดงพื้นหลังขององค์ประกอบด้านบนในรูปแบบเบลอจากภาพ/สี/แพตเทิร์นที่อยู่ด้านล่าง

→ ใช้ backdrop-filter: blur()

  • สามารถกำหนดภาพพื้นหลัง/สี/Gradient และปรับค่า Blur, ความโปร่งใส, Saturation ได้

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

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

 
galadbran 2021-08-29

ผมก็รู้สึกว่าแปลกเหมือนกัน เพราะไม่ว่าจะปรับค่า blur กับ saturation ยังไงก็แทบไม่มีอะไรเปลี่ยน สรุปว่าใน Edge ใช้ได้ดี แต่ใน Firefox ใช้ไม่ได้นี่เอง.. ฮ่าๆ
 
joyfui 2021-08-29

ผมก็ใช้ Firefox เลยสงสัยว่ามันต่างกันยังไง ที่แท้ Firefox ยังไม่ได้รองรับเป็นค่าเริ่มต้นนี่เอง..

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

ดูเหมือนว่าถ้าเปลี่ยนการตั้งค่าใน about:config ก็จะใช้งานได้ครับ