ให้แสงเงา

พอดแคสต์ 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 มีดังนี้

1. ออฟเซ็ตแนวนอน: จำนวนบวกที่ผลักออกมาจากด้านซ้าย ส่วนจำนวนลบจะดันตัวเลขออกจากด้านขวา
2. ออฟเซ็ตแนวตั้ง: จำนวนบวกจะดันลงมาจากด้านบนสุด และตัวเลขค่าลบจะดันตัวเลขบวกขึ้นจากด้านล่าง
3. รัศมีการเบลอ: ค่ายิ่งมากจะทำให้เงาเบลอมากขึ้น ส่วนค่าแสงน้อยๆ จะทำให้เงายิ่งคมชัด
4. รัศมีการกระจาย (ไม่บังคับ): ยิ่งเงามากจะทำให้เงายิ่งใหญ่ขึ้น ส่วนจำนวนที่น้อยกว่าจะลดค่าลง ทำให้มีขนาดเท่ากับรัศมีการเบลอหากตั้งค่าเป็น 0
5. สี: ค่าสีที่ถูกต้อง หากไม่ได้กำหนด ระบบจะใช้สีข้อความที่คำนวณ

หากต้องการทำให้เงากล่องเป็นเงาภายใน แทนที่จะเป็นเงาด้านนอกที่เป็นค่าเริ่มต้น ให้เพิ่มคีย์เวิร์ด 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 เงาแต่ละเงาจะใช้เงาสุดท้ายเป็นจุดอ้างอิงการจัดตำแหน่ง

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับเงา