Neumorphism CSS Shadow — โค้ดสองชั้น
สร้างโค้ดกล่องเงา CSS ด้วยสายตา: แถบเลื่อนสำหรับออฟเซ็ต เบลอ กระจาย สีด้วยความทึบ โหมดแทรก และสูงสุดสี่เลเยอร์พร้อมการแสดงตัวอย่างแบบสด
ผลลัพธ์
หน้านี้จะเปิดเครื่องกำเนิดด้วยคู่นิวมอร์ฟิกแบบคลาสสิกที่สร้างไว้แล้ว: เลเยอร์แสงชดเชย −8px/−8px ในสีขาวใกล้ และเลเยอร์สีเข้มชดเชย 8px/8px ในสีเทา-น้ำเงินที่ถูกปิดเสียง ซึ่งทั้งคู่เบลอ 16px สลับระหว่างสองชั้นในรายการเลเยอร์เพื่อปรับแต่งแต่ละด้านโดยแยกจากกัน
Neumorphism (UI แบบอ่อน) เป็นรูปแบบนูนที่มีจุดสูงสุดประมาณปี 2020 องค์ประกอบต่างๆ ดูถูกดึงออกมาจากพื้นหลัง แทนที่จะลอยอยู่เหนือมัน พูดตามตรง มันมาพร้อมกับข้อเสียเปรียบอย่างแท้จริง — เอฟเฟกต์จะทำงานเฉพาะเมื่อพื้นหลังขององค์ประกอบตรงกับพื้นหลังของหน้า และขอบที่มีคอนทราสต์ต่ำอาจส่งผลเสียต่อการเข้าถึง — ดังนั้นทีมส่วนใหญ่จึงใช้มันเป็นสำเนียง ไม่ใช่ภาษาการออกแบบทั้งหมด
หากสไตล์เหมาะกับโปรเจ็กต์ของคุณ การประกาศสองชั้นนี้คือจุดเริ่มต้นตามรูปแบบบัญญัติ: คัดลอก CSS ตั้งค่าองค์ประกอบและพื้นหลังของหน้าให้เป็นสีเทาอ่อนเหมือนกัน และเพิ่มรัศมีเส้นขอบที่ตรงกัน ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณ