Box-shadow & Text-shadow: เพิ่มความลึกและมิติให้ UI
box-shadow ใส่เงาให้กล่อง (block element) text-shadow ใส่เงาให้ข้อความ ทั้งคู่รองรับหลายเงา (comma-separated) สร้างเอฟเฟกต์ซ้อนได้
Syntax
box-shadow: h-offset v-offset blur-radius spread-radius color inset;
text-shadow: h-offset v-offset blur-radius color;โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
h2 { color: rgb(28, 0, 128); text-shadow: red 2px 4px 2px; }
div {
color: white; text-align: center; width: 150px; height: 150px;
background-color: red; box-shadow: rgb(89, 0, 255) 8px 2px 8px;
}
</style>
</head>
</body>
<h1>Shadow Effect Example</h1>
<h2>Text shadows</h2>
<div>BOX SHADOW</div>
</html>Box-shadow หลายชั้น (Layered Shadows)
.card {
box-shadow:
0 1px 3px rgba(0,0,0,0.12), /* เงาเล็ก ใกล้ */
0 4px 6px rgba(0,0,0,0.1), /* เงาใหญ่ ไกล */
0 10px 20px rgba(0,0,0,0.08); /* เงากว้าง ไกลมาก */
}Inset Shadow (Inner Shadow)
.pressed { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }Text-shadow Tips
- หลายเงาสร้างเอฟเฟกต์ Glow, Outline, 3D text
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;– outline ข้อความ- ใช้
filter: drop-shadow()สำหรับเงาที่ตามรูปทรง transparent PNG
Performance
Box-shadow บนองค์ประกอบใหญ่/หลายตัว อาจทำให้ scroll ลั่น – ใช้ will-change: box-shadow หรือลด blur radius
