CSS Text Shadow: เพิ่มเงาให้ข้อความด้วย text-shadow

การเพิ่มเงาให้องค์ประกอบเป็นส่วนหนึ่งของการสร้าง header ดึงดูดสายตา เช่น header หลักให้มีเงา เพื่อโดดเด่นจากข้อความอื่น

นั่นคือที่มาของ CSS text-shadow property เพิ่มเอฟเฟกต์เงาให้ข้อความ บทเรียนนี้อธิบายพื้นฐาน text shadows และการใช้ text-shadow property พร้อมตัวอย่าง

CSS Text Shadow Property

เงาเป็นวิจिएแยกองค์ประกอบบนเว็บ ข้อความพร้อมเงาสีเขียวมองเห็นง่ายกว่าข้อความดำธรรมดา

text-shadow เพิ่มเงารอบข้อความ ใช้กับ headers, paragraphs, และ text-based elements อื่นๆ

Syntax พื้นฐาน:

text-shadow: offset-x offset-y blur-radius color;

Syntax คล้าย box-shadow (สำหรับ box elements) อ่านเพิ่มได้ที่ CSS box shadows guide

องค์ประกอบหลัก:

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

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

<html>
  <h1>Career Karma</h1>
</html>

<style>
  h1 { color: lightblue; }
</style>

1. Basic Text Shadow (เงาพื้นฐาน)

ต้องระบุแค่ offset-x และ offset-y

<style>
  h1 { text-shadow: 1px 1px; }
</style>

เงาเล็กน้อยใต้ข้อความ offset 1px ทั้ง 2 แกน สีดำเป็นค่าเริ่มต้น

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

ใช้ color attribute ระบุสีเงา เช่น สีชมพูอ่อน

<style>
  h1 { text-shadow: 1px 1px pink; }
</style>

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

เพิ่ม blur-radius สร้างเงาเบลอ

offset 3px ทั้งคู่ blur 2px สีชมพู

<style>
  h1 { text-shadow: 3px 3px 2px pink; }
</style>

เพิ่ม blur-radius ทำให้เงาเบลอมากขึ้น เช่น 5px, 10px

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

text-shadow รองรับหลายเงา คั่นด้วย comma

text-shadow: shadowOne, shadowTwo;

ระบุเงาได้เท่าไหร่ก็ได้ คั่นด้วย comma ค่า offset ต้องเพิ่มขึ้นเรื่อยๆ ไม่งั้นเงาจะทับกัน

เงาจะแสดงตามลำดับที่ระบุ shadowOne ก่อน shadowTwo

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

<style>
  h1 { text-shadow: 3px 3px 2px pink, 6px 6px 5px orange; }
</style>

สรุป

text-shadow property เพิ่มเงาให้ข้อความ HTML ใช้กับ text-based elements ได้ทั้ง headers และ paragraphs บทเรียนนี้ครอบคลุม: basic shadow, shadow colors, blurred shadow, multiple shadows ตอนนี้คุณพร้อมสร้าง CSS text shadows อย่างมืออาชีพ!