CSS Box Shadow: เพิ่มเงาให้กล่อง (Box Shadow) อย่างมืออาชีพ

เมื่อออกแบบองค์ประกอบ CSS อาจต้องการเอฟเฟกต์เงารอบกรอบ เช่น รูปภาพที่มีเงาใต้ภาพ

นั่นคือที่มาของ CSS box-shadow property เพิ่มเงารอบกรอบองค์ประกอบ거의ทุก HTML element รองรับ รวมถึง rounded corners

บทเรียนนี้อธิบาย box-shadow property พร้อมตัวอย่าง จนจบคุณจะสร้าง CSS shadows อย่างมืออาชีพ

CSS Box Shadow Property

Syntax:

box-shadow: offset-x offset-y blur-radius spread color;

องค์ประกอบ:

• offset-x — offset แนวนอน required
• offset-y — offset แนวตั้ง required
• blur-radius — blur effect รอบเงา optional
• spread — spread radius ของ blur optional
• color — สีเงา (default: black) optional

HTML Element พื้นฐานสำหรับตัวอย่าง

<html>
  <div> <p>This is a box.</p> </div>
</html>

<style>
  div {
    height: 100px; width: 200px;
    padding: 10px;
    background-color: lightblue;
  }
</style>

1. Horizontal และ Vertical Shadow (เงาพื้นฐาน)

ระบุ offset-x และ offset-y เท่านั้น

div { box-shadow: 10px 10px; }

2. Shadow Colors (กำหนดสีเงา)

เพิ่ม color attribute เช่น สีเทาอ่อน

div { box-shadow: 10px 10px lightgray; }

3. Shadow Blur Effect (เงาพร้อม Blur)

เพิ่ม blur-radius เช่น 3px

div { box-shadow: 10px 10px 3px lightgray; }

4. Spread Effect (การกระจายเงา)

เพิ่ม spread radius เช่น 5px

div { box-shadow: 10px 10px 5px 5px lightgray; }

ลำดับ attributes: offset-x, offset-y, blur, spread, color

5. Multiple Shadows (เงาหลายชั้น)

คั่นเงาแต่ละชั้นด้วย comma

box-shadow: shadow1, shadow2;

ค่า offset ต้องต่างกัน ไม่งั้นเงาจะทับกัน

ตัวอย่าง: เงาสีเทาและชมพู

div { box-shadow: 5px 5px lightgray, 10px 10px pink; }

6. Inset Shadows (เงาภายใน)

ใช้ keyword inset ทำให้เงาอยู่ด้านใน

div { box-shadow: 5px 5px lightgray inset; }

Box Shadow Attributes Reference Table

สรุป

CSS box-shadow property เพิ่มเอฟเฟกต์เงาให้ HTML elements บทเรียนนี้ครอบคลุม: basic shadow, colors, blur, spread, multiple shadows, inset shadows และตารางอ้างอิง attributes ตอนนี้คุณพร้อมสร้าง CSS shadows อย่างมืออาชีพ!