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