หมายเหตุ เอกสารฉบับนี้เป็นเอกสารแปลจากต้นฉบับภาษาอังกฤษอาจมีข้อบกพร่องหรือไม่ทันสมัย
เอกสารต้นฉบับเป็นของ W3C และถือเป็นเอกสารอย่างเป็นทางการ ท่านสามารถอ่านประกอบเพื่อความถูกต้อง
Original Document Text Shadows

เว็บสไตล์ชีท
CSS ทิป & ทริค

(หน้านี้มีการใช้ CSS สไตล์ชีท)

เงาตกทอด

เงาฟุ้งเบลอ

การใช้เงาเพื่อช่วย
เพิ่มคอนทราสท์

เงาหลายชั้น

สร้างเส้นขอบ
ให้ตัวอักษร

เงาแสงนีออน

เงาตกทอด


ใน CSS 3 มี property ชื่อ 'text-shadow' เพื่อใช้เพิ่มเงาตกทอดแก่ตััวอักษร ดังนี้:


h3 {text-shadow: 0.1em 0.1em #333}


จากตัวอย่างข้างต้นเป็นการเพิ่มเงาเทาเข้ม (#333) ค่าบวกหมายถึงด้านขวา (0.1em) และค่าบวกหมายถึงด้านล่าง (0.1em) ของตัวอักษร ซึ่งจะให้ผลดังนี้:


The noak and the barcicle

(สิงหาคม 2005 เบราเซอร์ยังไม่่รองรับการใช้งาน 'text-shadow' ทั้งหมด ยกเว้น Safari และ Konqueror.)

เงาฟุ้งเบลอ

สำหรับ property 'text-shadow' นอกจากท่านสามารถกำหนดค่าสี (เช่น #333 ตามตัวอย่างข้างต้น) และตำแหน่งของเงา (0.1em 0.1em ตามตัวอย่างข้างต้น) ท่านยังสามารถกำหนดค่าความฟุ้งเบลอของเงาได้อีกด้วย ซึ่งจะทำให้เงาที่ได้ไม่คมเหมือนปกติ

ค่าความฟุ้งเบลอได้โดยระบุค่าขนาดความฟุ้งเบลอของเงาในตำแหน่งที่สามของ property ท่านสามารถดูผลค่าความฟุ้งเบลอได้จากตัวอย่างด้านล่างนี้ ตัวอย่างแรกเรากำหนดขนาดความฟุ้งเบลอไว้ที่ (0.05em) ขณะที่อีกอันมีค่าเป็น (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the UK

In order to see more clearly

การใช้เงาเพื่อช่วยเพิ่มคอนทราสท์

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

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

ไม่มีเงา:

What is in it for me?

มีเงา:

With a shovel and some oranges

เงาหลายชั้น

การเพิ่มเงานั้น ท่านสามารถใส่เพิ่มได้หลายชั้น โดยเพิ่มค่าที่ต้องการต่อจากค่าเดิมคั่นด้วยคอมม่า แต่เมื่อใส่เงาหลายชั้น อาจทำให้ดูแปลกตาไป:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

I wish wish wish…

ขณะที่เมื่อจับคู่สีและตำแหน่งที่เหมาะสม เช่น ดำและเทาอ่อน ท่านสามารถสร้างเอฟเฟ็กที่นำไปใช้ประโยชน์ได้ เช่น:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

I, Augustus (you know who)

That's extra, of course

การใช้วิธีข้างต้น ท่านต้องระวัง กรณีที่เบราเซอร์ไม่รองรับ 'text-shadow' เพราะอาจทำให้ ผู้ชมไม่สามารถอ่านข้อความได้ เพราะสีตัวอักษรและฉากหลังใกล้เคียงกัน (#CCCCCC และ #D1D1D1)

สร้างเส้นขอบให้ตัวอักษร

การใส่เงาหลายชั้นยังสามารถประยุกต์ใช้เพื่อสร้างเส้นขอบให้ตัวอักษรได้อีกด้วย ดังตัวอย่างต่อไปนี้ เมื่อสร้างเงาขึ้นมาสี่ชั้นและกำหนดตำแหน่งเงาที่เหมาะสม ก็สามารถสร้างเส้นขอบ ได้ดังต่อไปนี้:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera

ขอบของตัวอักษรที่ได้อาจยังไม่สมบูรณ์นัก ในขณะนี้ (สิงหาคม 2005) ยังคงมีการอภิปรายว่าควรเพิ่ม property ใน CSS (ซึ่งอาจเป็นค่าใหม่ของ property 'text-decoration') เพื่อใช้สร้างขอบโดยเฉพาะหรือไม่

เงาแสงนีออน

ท่านสามารถทำให้ตัวอักษรเรืองแสงเหมือนหลอดนีออนได้ โดยการกำหนดให้ตำแหน่งของเงาเป็นศูนย์ และกำหนดค่าความเบลอของเงาเพิ่ม หากการเรืองแสงไม่มากพอ สามารถเพิ่มได้โดยสร้างเงาซ้อนเพิ่มโดยมีค่าเดิมหลายๆชั้น ดังตัวอย่าง:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
เขียนวันที่ 17 มกราคม 2001;
ปรับปรุงล่าสุด $วันที่: 2009/03/03 12:46:42 $ GMT