CSS Box Shadow กำหนดเงาให้กับกล่องข้อความ

เป็นรูปแบบของการกำหนด code css stylesheet ให้กับกล่องข้อความเพื่อความสวยงามให้กับเว็บของเราได้ส่วนหนึ่ง แต่เป็นที่น่าเสียดายที่ IE มักจะไม่ค่อย support มากนักกับลูกเล่นของ CSS....

กำหนดเงาให้กับกล่องของข้อความ มี 2 รูปแบบ

รูปแบบที่ 1 แบบเงาขอบนอก CSS

.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}

จะมี Property อยู่ 4 ค่า เรียงตามลำดับ
1. เมื่อค่าเพิ่มขึ้นจะเป็นการขยับเงาไปทางด้านขวามากขึ้น
2. เมื่อค่าเพิ่มขึ้นจะเป็นการขยับเงาลงไปด้านล่างมากขึ้น
3. เมื่อค่าเพิ่มขึ้นจะทำให้ความฟุ้ง ความเบลอ ของเงามากขึ้น
4. เป็นสีของเงา

ตัวอย่าง

รูปแบบที่ 2 แบบเงาขอบใน CSS

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

ตัวนี้จะเพิ่มคำว่า inset เข้ามาครับ เป็นการกำหนดให้เงาฟุ้งเข้าด้านใน

ตัวอย่าง

หมายเหตุ ใช้ไม่ได้กับ IE นะครับ...