พอดแคสต์ CSS - 017: Shadows
สมมติว่าคุณได้รับการออกแบบที่จะส��้าง และในการออกแบบนั้น มีภาพเสื้อยืด และเงาตกกระทบ นักออกแบบจะบอกว่ารูปภาพผลิตภัณฑ์เป็นแบบไดนามิกและอัปเดตได้ผ่านระบบจัดการเนื้อหา เงาตกกระทบก็ต้องเป็นแบบไดนามิกด้วย แทนที่จะเป็นเสื้อยืด รูปภาพอาจเป็นหมวกหรือกางเกงขาสั้น หรือ��ินค้าอื่นๆ คุณจะทำอย่างนั้นด้วย CSS ได้อย่างไร
CSS มีพร็อพเพอร์ตี้
box-shadow
และ
text-shadow
แต่รูปภาพไม่ใช่ข้อความ คุณจึงใช้ text-shadow
ไม่ได้
หากใช้ box-shadow
เงาจะอยู่ที่กล่องรอบๆ ไม่ใช่รอบเสื้อยืด
แต่โชคดีที่มีตัวเลือกอื่น ซึ่งก็คือตัวกรอง drop-shadow()
ทำให้คุณสามารถทำสิ่งที่นักออกแบบขอได้อย่างแท้จริง
สำหรับการใส่เงาใน CSS มีตัวเลือกมากมายให้ใช้
โดยแต่ละตัวเลือกออกแบบมาเพื่อกรณีการใช้งานที่แตกต่างกัน
เงากล่อง
พร็อพเพอร์ตี้ box-shadow
มีไว้สำหรับการเพิ่มเงาลงในช่อง��ององค์ประกอบ HTML
โดยจะใช้ได้กับองค์ประกอบบล็อกและองค์ประกอบในบรรทัด
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
ลำดับของค่าสำหรับ box-shadow
มีดังนี้
- ออฟเซ็ตแนวนอน: จำนวนบวกที่ผลักออกมาจากด้านซ้าย ส่วนจำนวนลบจะดันตัวเลขออกจากด้านขวา
- ออฟเซ็ตแนวตั้ง: จำนวนบวกจะดันลงมาจากด้านบนสุด และตัวเลขค่าลบจะดันตัวเลขบวกขึ้นจากด้านล่าง
- รัศมีการเบลอ: ค่ายิ่งมากจะทำให้เงาเบลอมากขึ้น ส่วนค่าแสงน้อยๆ จะทำให้เงายิ่งคมชัด
- รัศมีการกระจาย (ไม่บังคับ): ยิ่งเงามากจะทำให้เงายิ่งใหญ่ขึ้น ส่วนจำนวนที่น้อยกว่าจะลดค่าลง ทำให้มีขนาดเท่ากับรัศมีการเบลอหากตั้งค่าเป็น 0
- สี: ค่าสีที่ถูกต้อง หากไม่ได้กำหนด ระบบจะใช้สีข้อความที่คำนวณ
หากต้องการทำให้เงากล่องเป็นเงาภายใน
แทนที่จะเป็นเงาด้านนอกที่เป็นค่าเริ่มต้น ให้เพิ่มคีย์เวิร์ด inset
ก่อนพร็อพเพอร์ตี้อื่นๆ
/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}
เงาหลายสี
คุณเพิ่มเงาได้มากเท่าที่ต้องการด้วย box-shadow
เพิ่มคอลเล็กชันชุดค่าที่คั่นด้วยเครื่องหมายจุลภาคเพื่อทำดังนี้
.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
พร็อพเพอร์ตี้ที่ส่งผลต่อเงากล่อง
การเพิ่ม border-radius
ในกล่องจะส่งผลต่อรูปร่างของเงากล่องด้วย
เพราะ CSS จะสร้างเงาตามรูปทรงของกล่องราวกับว่าแสงกำลังชี้ไปยังกล่อง
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
หากกล่องที่มี box-shadow
อยู่ในคอนเทนเนอร์ที่มี overflow: hidden
เงาจะไม่หลุดออกมาจากส่วนเกินดังกล่าวด้วย
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}
.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}
.my-parent {
overflow: hidden;
}
เงาข้อความ
พร็อพเพอร์ตี้ text-shadow
คล้ายกับพร็อพเพอร์ตี้ box-shadow
อย่างมาก
โดยจะทำงานบนโหนดข้อความเท่านั้น
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
ค่าสำหรับ text-shadow
เหมือนกับ box-shadow
และในลำดับเดียวกัน
ความแตกต่างเพียงอย่างเดียวคือ text-shadow
ไม่มีค่า spread
และไม่มีคีย์เวิร์ด inset
เมื่อเพิ่ม box-shadow
ระบบจะตัดคลิปเป็นรูปร่างของกล่อง แต่ text-shadow
ไม่มีการตัดคลิป
ซึ่งหมายความว่าหากข้อความของคุณเป็นแบบโปร่งแสงทั้งหมดหรือกึ่งโปร่งใส เงาจะสามารถมองเห็นได้ผ่านตัวนั้น
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
เงาหลายสี
คุณสามารถเพิ่มแสงเงาได้มากเท่าที่ต้องการด้วย text-shadow
เช่นเดียวกับ box-shadow
เพิ่มคอลเล็กชันชุดค่าที่คั่นด้วยเครื่องหมายจุลภาค
และคุณสามารถสร้างเอฟเฟกต์ข้อความเจ๋งๆ ได้ เช่น ข้อความ 3 มิติ
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
เงาตกกระทบ
หากต้องการสร้างเงาตกกระทบที่โค้งตามเส้นโค้งของรูปภาพ ให้ใช้ตัวกรอง CSS drop-shadow
เงานี้จะใช้กับมาสก์อัลฟ่า ซึ่งมีประโ��ชน์มากสำหรับการเพิ่มเงาลงในรูปภาพที่ถูกตัดออก
ดังเช่นในกรณีของช่วงอินโทรของโมดูลนี้
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
ตัวกรอง drop-shadow
มีค่าเหมือนกับ box-shadow
แต่ไม่อนุญาตให้ใช้คีย์เวิร์ด inset
และค่า spread
คุณสามารถเพิ่มเงาได้มากเท่าที่ต้องการ โดยการเพิ่มค่า drop-shadow
หลายๆ อินสแตนซ์ลงในพร็อพเพอร์ตี้ filter
เงาแต่ละเงาจะใช้เงาสุดท้ายเป็นจุดอ้างอิงการจัดตำแหน่ง
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับเงา
ค่าเงาค่าใดด้านล่างที่ไม่ซ้ำกันสำหรับ box-shadow
inset
inset
เป็นคีย์เวิร์ดซึ่งไม่ซ้ำกันสำหรับ box-shadow
เช่นกันแต่ละองค์ประกอบอนุญาตให้มีเงากล่องได้พร้อมกัน 13 กล่องเท่านั้น