ให้แสงเงา

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

CSS มีพร็อพเพอร์ตี้ box-shadow และ text-shadow แต่รูปภาพไม่ใช่ข้อความ คุณจึงใช้ text-shadow ไม่ได้ หากใช้ box-shadow เงาจะอยู่ในกล่องรอบๆไม่ใช่รอบเสื้อยืด

แต่โชคดีที่ยังมีอีกทางเลือกหนึ่งคือตัวกรอง drop-shadow() ซึ่งจะช่วยให้คุณทำในสิ่งที่นักออกแบบต้องการได้ การใช้เงาใน CSS มีตัวเลือกมากมาย ซึ่งแต่ละตัวเลือกออกแบบมาเพื่อการใช้งานที่แตกต่างกัน

เงาของกล่อง

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

พร็อพเพอร์ตี้ 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;
}

พร็อพเพอร์ตี้ที่ส่งผลต่อ 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;
}

เงาข้อความ

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

พร็อพเพอร์ตี้ 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 รายการในองค์ประกอบ

เท็จ
จริง