Soft CSS Box Shadow — โค้ดสำเร็จรูป
สร้างโค้ดกล่องเงา CSS ด้วยสายตา: แถบเลื่อนสำหรับออฟเซ็ต เบลอ กระจาย สีด้วยความทึบ โหมดแทรก และสูงสุดสี่เลเยอร์พร้อมการแสดงตัวอย่างแบบสด
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างเงาแบบกล่องที่โหลดไว้ล่วงหน้าด้วยเงาแบบนุ่มนวล: ไม่มีการชดเชยแนวนอน, ลดลง 8px, การเบลอที่มาก 24px และความทึบของสีดำต่ำ 12% การ์ดแสดงตัวอย่างจะเรนเดอร์ทันที — สะกิดแถบเลื่อนใดๆ แล้วบรรทัด CSS จะตามมาแบบเรียลไทม์
เงาที่นุ่มนวลเป็นส่วนสำคัญของอินเทอร์เฟซสมัยใหม่ การเบลอขนาดใหญ่ที่จับคู่กับความทึบแสงต่ำจะทำให้การ์ดหลุดออกจากหน้าโดยไม่ต้องวาดโครงร่างที่แข็ง ซึ่งเป็นเหตุผลว่าทำไมระบบการออกแบบส่วนใหญ่จึงเก็บเงาระดับความสูงไว้ในช่วงนี้พอดี แทนที่จะเป็นเงามืดทึบของการออกแบบแบนในยุคแรกๆ
คัดลอกเส้นเงาของกล่องลงในสไตล์ชีตของคุณโดยตรง หรือซ้อนเลเยอร์เพิ่มเติมอีก 3 เลเยอร์เพื่อให้มีระดับที่สมบูรณ์ยิ่งขึ้น ตัวสร้างทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ของคุณ — ไม่มีการอัพโหลดอะไรเลย