เครื่องสร้างเงากล่อง CSS

ไวยากรณ์ของ box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: ค่าบวก = ไปทางขวา, ค่าลบ = ไปทางซ้าย
• y-offset: ค่าบวก = ลงล่าง, ค่าลบ = ขึ้นบน
• blur: 0 = ขอบคมชัด, ค่ายิ่งสูงยิ่งนุ่มนวลขึ้น ขนาดที่มองเห็นจะแผ่ออกนอกองค์ประกอบประมาณ 1.5 เท่าของค่าเบลอ
• spread: ขนาดที่เพิ่มออกไปเกินขอบขององค์ประกอบ ค่าบวกทำให้เงาขยายใหญ่ขึ้น ค่าลบทำให้เล็กลง (เหมาะสำหรับสร้างแสงเรืองรอบบางๆ)
• colour: รองรับสีทุกแบบของ CSS โดย rgba(0, 0, 0, 0.15) เป็นค่าพื้นฐานที่ใช้กันมากที่สุด
• inset: คีย์เวิร์ดที่พลิกเงาให้อยู่ภายในองค์ประกอบ

เงาหลายชั้นดูสมจริง

เครื่องมือนี้สร้างกฎเงาครั้งละหนึ่งกฎ หากต้องการเงาหลายชั้น ให้สร้างแต่ละชั้นแยกกันแล้วรวมกฎด้วยเครื่องหมายจุลภาค

เงาเดียวที่ตั้งค่า 0 0 40px จะดูคลุมเครือ แต่เงาสองชั้น คือเงาเล็กคมชัดที่อยู่ใกล้องค์ประกอบ กับเงาใหญ่นุ่มนวลที่อยู่ไกลออกไป จะจำลองวิธีที่แสงจริงกระเจิงได้

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

บรรทัดแรกให้เงาสัมผัสที่แนบชิด ส่วนบรรทัดที่สองให้เงาแวดล้อมที่นุ่มนวลกว่า รูปแบบเดียวนี้ครอบคลุมอินเทอร์เฟซแบบการ์ดได้ถึง 80%

ระบบระดับความสูง (Elevation)

Material Design ใช้ระดับความสูง (elevation) 6 ระดับ โดยแต่ละระดับมีชุดเงาที่ต่างกัน สรุปอย่างง่ายได้ดังนี้:

เลือกหนึ่งค่าสำหรับแต่ละบทบาทระดับความสูง แล้วใช้อย่างสม่ำเสมอ

เงาที่มีสีดูเป็นธรรมชาติมากกว่า

เงาสีดำล้วนดูปลอม เพราะเงาจริงจะถูกย้อมสีโดยพื้นผิวที่อยู่ด้านล่าง ลองทำดังนี้:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

ใช้สีเทาอมฟ้าเย็นๆ แทนสีดำล้วน หากเป็นพื้นหลังโทนอุ่น ให้เลือกโทนสีที่อุ่นกว่า

ประสิทธิภาพ

box-shadow จะถูกวาดใหม่ทุกครั้งที่มีการรีเพนต์ (repaint) เงาขนาดใหญ่และหนาบนองค์ประกอบจำนวนมากอาจทำให้การเลื่อนหน้าจอช้าลง วิธีบรรเทา:

• ใช้ transform: translateZ(0) กับองค์ประกอบเพื่อบังคับให้เกิดเลเยอร์แบบคอมโพสิต
• แทนที่เงาที่ซับซ้อนด้วย filter: drop-shadow() เฉพาะเมื่อคุณต้องการให้เงาเคลื่อนตาม clip-path เท่านั้น (โดยทั่วไปจะช้ากว่า)
• จำกัดเงาบนองค์ประกอบที่ถูกเรนเดอร์ใหม่บ่อยครั้ง

inset สำหรับสถานะที่ถูกกด

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

เงาแบบ inset จำลองลักษณะที่จมลงไป ทำให้ปุ่มดูเหมือนถูกกดลงไปในพื้นผิว เมื่อใช้ร่วมกับ transform: translateY(1px) เล็กน้อยที่ขยับลงล่าง จะให้ความรู้สึกของการคลิกที่จับต้องได้