The CSS Podcast - 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;
}
พร็อพเพอร์ตี้ที่ส่งผลต่อ box-shadow
การเพิ่ม 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;
}
เงาตกกระทบ
หากต้องการสร้างเงาตกกระทบที่เป็นไปตามเส้นโค้งของรูปภาพ ให้ใช้ฟิลเตอร์ drop-shadow
ของ CSS
ระบบจะใช้เงานี้กับมาสก์อัลฟ่า ซึ่งมีประโยชน์มากในการเพิ่มเงาให้กับรูปภาพที่ตัดออก ดังตัวอย่างในบทนำของข้อบังคับนี้
.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
อนุญาตให้ใช้เงาขอบได้ครั้งละ 13 รายการในองค์ประกอบ