Drop Shadow Filter (IE Legacy)
Drop Shadow เป็นฟิลเตอร์เก่าของ Internet Explorer สร้างเงาของออบเจกต์ที่ตำแหน่ง X, Y ที่กำหนดพร้อมสี
พารามิเตอร์
| พารามิเตอร์ | คำอธิบาย |
|---|---|
| color | สีเงาในรูปแบบ #RRGGBB |
| offX | อフセตแนวนอน (px) บวก=ขวา, ลบ=ซ้าย |
| offY | ออฟเซตแนวตั้ง (px) บวก=ล่าง, ลบ=บน |
| positive | true=เงาที่พิกเซลไม่โปร่งใส, false=เงาที่พิกเซลโปร่งใส (default: true) |
ตัวอย่างการใช้งาน
<html>
<head></head>
<body>
<img src="/css/images/logo.png" alt="CSS Logo"
style="filter: chroma(color=#000000) dropshadow(color=#FF0000, offX=2, offY=2, positive=1)">
<p>Text Example:</p>
<div style="
width: 357px; height: 50px;
font-size: 30pt; font-family: Arial Black;
color: red;
filter: dropshadow(color=#000000, offX=2, offY=2, positive=1)
">CSS Tutorials</div>
</body>
</html>⚠️ สำคัญ: เฉพาะ Internet Explorer
เป็น Microsoft proprietary filter ไม่ใช่มาตรฐาน W3C
ทางเลือกมาตรฐาน (Modern CSS)
/ CSS box-shadow (สำหรับกล่อง) /
.box-shadow {
box-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* X Y blur color */
box-shadow: 2px 2px 0 #FF0000; /* เงาแข็ง ไม่เบลอ */
}
/* CSS drop-shadow() filter (สำหรับรูปร่างจริงของภาพ) */
.drop-shadow {
filter: drop-shadow(2px 2px 0 #FF0000); /* X Y blur color */
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}
/* หลายเงา */
.multi-shadow {
box-shadow:
2px 2px 0 #FF0000,
4px 4px 0 #00FF00,
6px 6px 0 #0000FF;
}ความแตกต่าง box-shadow vs drop-shadow()
- box-shadow: เงาของกล่อง (box model) เป็นสี่เหลี่ยม
- drop-shadow(): เงาตามรูปร่างจริงของภาพ (transparent areas ไม่มีเงา)
