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

กายวิภาคของพร็อพเพอร์ตี box-shadow

เงา box-shadow หนึ่งชุดคือรายการของค่าที่เรียงตามลำดับตายตัว ได้แก่ ออฟเซ็ตแนวนอน ออฟเซ็ตแนวตั้ง รัศมีความเบลอ รัศมีการกระจาย และสี โดยมีคีย์เวิร์ด inset เป็นทางเลือก จำเป็นเพียงออฟเซ็ตทั้งสองและสีเท่านั้น ส่วนความเบลอและการกระจายมีค่าเริ่มต้นเป็นศูนย์ ดังนั้นรูปแบบย่อที่อ่านว่า 0px 4px 12px rgba(0, 0, 0, 0.15) จึงหมายถึงไม่มีการเลื่อนในแนวนอน เลื่อนลงสี่พิกเซล เบลอสิบสองพิกเซล ไม่มีการกระจาย และสีดำที่ 15 เปอร์เซ็นต์ แถบเลื่อนในเครื่องมือนี้เขียนสตริงนั้นให้คุณพอดี แต่การเข้าใจลำดับทำให้แก้ไขด้วยมือได้อย่างไม่เจ็บปวด

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

ความเบลอกับการกระจาย: รัศมีสองค่าที่คนสับสน

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

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

เงาด้านใน (inset) สำหรับพื้นผิวที่ถูกกดและยุบเข้าไป

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

การซ้อนเงาหลายชั้น

พร็อพเพอร์ตี box-shadow รับรายการที่คั่นด้วยจุลภาคได้ และเบราว์เซอร์จะวาดเงาแต่ละชั้นตามลำดับ โดยชั้นแรกอยู่บนสุด นี่คือเทคนิคเดียวที่มีประโยชน์ที่สุดสำหรับความลึกที่สมจริง วัตถุจริงไม่ได้ทอดเงาเดียว แต่ทอดเงาสัมผัส (contact shadow) ที่แคบและเข้มกว่าตรงใต้ขอบพอดี และเงาแวดล้อม (ambient shadow) ที่กว้างและจางกว่าซึ่งแผ่ออกไปไกลกว่า การซ้อนเงาความเบลอต่ำขนาดเล็กทับเงาความเบลอสูงขนาดใหญ่จะจำลองสิ่งนั้น และผลลัพธ์ก็ดูน่าเชื่อถือกว่าเงาเดียวใด ๆ มาก

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

ตัวอย่างใช้งานจริง: เงาการ์ดที่นุ่มนวล

นี่คือสูตรที่ดูดีบนพื้นผิวสว่างเกือบทุกแบบ เริ่มจากไม่มีออฟเซ็ตแนวนอนเพื่อให้เงาอยู่กึ่งกลาง ออฟเซ็ตแนวตั้งราว 8px ความเบลอราว ๆ 24px และการกระจายราวลบ 6px เพื่อให้มันซุกอยู่ใต้การ์ด ใช้สีที่เกือบดำแต่ลดความทึบลงเหลือราว 12 เปอร์เซ็นต์ เขียนเป็น rgba(0, 0, 0, 0.12) การกระจายติดลบช่วยกันไม่ให้ขอบที่นุ่มเลยออกไปพ้นมุม ความทึบที่ต่ำกันไม่ให้มันดูเหมือนรอยเปื้อน และออฟเซ็ตปานกลางบ่งบอกถึงแสงนุ่ม ๆ จากด้านบน หากต้องการผลลัพธ์ที่คมเป็นพิเศษ ให้ซ้อนเงาที่สองด้วยออฟเซ็ต 1px ความเบลอเกือบศูนย์ และสีดำราว 6 เปอร์เซ็นต์ เพื่อจำลองเส้นสัมผัสที่คมชัด

ข้อผิดพลาดที่พบบ่อยและวิธีหลีกเลี่ยง

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

คนยังสับสนระหว่าง box-shadow กับฟิลเตอร์ drop-shadow อีกด้วย box-shadow จะตามกล่องสี่เหลี่ยมขององค์ประกอบเสมอ รวมถึง border-radius ของมัน ดังนั้นไฟล์ PNG โปร่งใสที่อยู่ในกล่องก็ยังได้เงาทรงสี่เหลี่ยมอยู่ดี ส่วนฟิลเตอร์ drop-shadow จะลากตามพิกเซลที่ไม่โปร่งใสจริง ๆ ซึ่งเป็นสิ่งที่คุณต้องการสำหรับรูปทรงไม่สม่ำเสมอและภาพที่ตัดฉลุ ใช้ box-shadow สำหรับการ์ด ปุ่ม และแผง แต่หยิบฟิลเตอร์มาใช้เมื่อโครงร่างไม่ใช่สี่เหลี่ยม

ประสิทธิภาพและกับดักของความเบลอขนาดใหญ่

เงาถูกวาดโดยเบราว์เซอร์ และรัศมีความเบลอที่ใหญ่มากนั้นกินทรัพยากรจริง ๆ โดยเฉพาะเมื่อมันเคลื่อนไหวหรือปรากฏบนหลายองค์ประกอบพร้อมกัน การทำให้ความเบลอหรือการกระจายของเงาขนาดใหญ่เคลื่อนไหวอาจทำให้เกิดการวาดซ้ำทุกเฟรมและกระตุกบนอุปกรณ์รุ่นล่าง หากคุณต้องการให้เงาขยายตอน hover วิธีที่ลื่นไหลกว่าคือเรนเดอร์เงาที่ใหญ่กว่าไว้ล่วงหน้าบนพซูโดอิลิเมนต์ (pseudo-element) แล้วทำให้ความทึบของมันเคลื่อนไหวแทน เพราะความทึบประมวลผลร่วม (composite) ได้ราคาถูก คงค่าความเบลอให้สมเหตุสมผล หลีกเลี่ยงการมีโหนดที่มีเงาหลายร้อยอันบนหน้าจอพร้อมกัน แล้วอินเทอร์เฟซของคุณก็จะลื่นไหลต่อไป