Tuesday, 16 July 2024

อยากให้กล่องมีเงา มีมิติต้องกำหนด Box-Shadow

04 May 2018
88
luminox watches

เมื่อเราเขียนเว็บไปนานๆ เว็บเราอาจจะดูแข็งๆไม่ค่อยมีมิติ คือ ไม่มีแสงมีเงาดูไม่สมจริงเหมือนเป็นแค่กระดาษอิเล็กทรอนิกส์แผ่นนึง วันนี้อยากจะมาแนะนำการใช้ Box-Shadow เพื่อกำหนดเงาให้กล่องจะได้มีมิติสวมงามขึ้น

อยากให้กล่องมีเงา มีมิติต้องกำหนด Box-Shadow

อยากให้กล่องมีเงา มีมิติต้องกำหนด 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, –2px2px 5px #999; }

 

โค้ดด้านบนจะกำหนดให้กล่องมีเงาใน 2 มุม ด้านขวาล่างและด้านซ้ายบน โดยใช้สีเงาเดียวกันกับตัวอย่างก่อนหน้านี้

Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana