ให้แสงเงา

พอดแคสต์ 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;
}

เงาตกกระทบ

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

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

ทดสอบความรู้เรื่องเงา