เมื่อเราเขียนเว็บไปนานๆ เว็บเราอาจจะดูแข็งๆไม่ค่อยมีมิติ คือ ไม่มีแสงมีเงาดูไม่สมจริงเหมือนเป็นแค่กระดาษอิเล็กทรอนิกส์แผ่นนึง วันนี้อยากจะมาแนะนำการใช้ Box-Shadow เพื่อกำหนดเงาให้กล่องจะได้มีมิติสวมงามขึ้น
อยากให้กล่องมีเงา มีมิติต้องกำหนด Box-Shadowการกำหนดเงาด้วย Box-Shadow ใน CSS คือการใส่เงาหรือเงาใต้กล่องของอิลิเมนต์ HTML ด้วย CSS โดยใช้คุณสมบัติ box-shadow ซึ่งสามารถกำหนดความกว้างของเงา (shadow width) ตามต้องการได้ โดยมีรูปแบบการใช้งานดังนี้:
selector { box-shadow: h-shadow v-shadow blur spread color inset; }
โดยที่:
h-shadow
: กำหนดตำแหน่งของเงาในแนวนอน (ค่าเริ่มต้นเป็น 0)v-shadow
: กำหนดตำแหน่งของเงาในแนวตั้ง (ค่าเริ่มต้นเป็น 0)blur
: กำหนดความเบลอของเงา (ค่าเริ่มต้นเป็น 0)spread
: กำหนดความกว้างของเงา (ค่าเริ่มต้นเป็น 0)color
: กำหนดสีของเงา (ค่าเริ่มต้นเป็น transparent)inset
: กำหนดเงาให้เป็นแบบ inset (ค่าเริ่มต้นเป็น outset)
ตัวอย่างการใช้งาน:
.box { box-shadow: 2px 2px 5px #999; }
โค้ดด้านบนจะกำหนดให้กล่องที่มีคลาส .box
มีเงาขนาด 2px ในแนวนอนและแนวตั้ง ความเบลอ 5px และสีเงาเป็นสีเทาอ่อน (#999)
สามารถกำหนดค่าเงาหลายๆ ส่วนได้โดยใช้ ,
เช่น:
.box { box-shadow: 2px 2px 5px #999, –2px –2px 5px #999; }
โค้ดด้านบนจะกำหนดให้กล่องมีเงาใน 2 มุม ด้านขวาล่างและด้านซ้ายบน โดยใช้สีเงาเดียวกันกับตัวอย่างก่อนหน้านี้
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana
นายช่างโยธา ศูนย์ก่อสร้างและบูรณะถนน 3 ส่วนก่อสร้างและบูรณะ 2 สำนักการโยธา