(หน้านี้มีการใช้ CSS สไตล์ชีท)
h3 {text-shadow: 0.1em 0.1em #333}
สำหรับ 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}
เงาสามารถใส่เพื่อเพิ่มคอนทราสท์ระหว่างตัวหนังสือกับฉากหลังเพื่อช่วยให้ผู้ชมอ่านข้อความไดง่ายขึ้น เมื่อฉากหลังและหน้ากลมกลืนกัน ในตัวอย่างจะเห็นว่ามีอักษรสีขาวบนพื้นหลังสีนำ้เงินอ่อน ทำให้อ่านข้อความได้ยาก เมื่อใส่เงาเพิ่ม ท่านลองสังเกตความแตกต่างระหว่างก่อนและหลังเพิ่มเงาดู:
h3 {color: white} h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
ไม่มีเงา:
มีเงา:
การเพิ่มเงานั้น ท่านสามารถใส่เพิ่มได้หลายชั้น โดยเพิ่มค่าที่ต้องการต่อจากค่าเดิมคั่นด้วยคอมม่า แต่เมื่อใส่เงาหลายชั้น อาจทำให้ดูแปลกตาไป:
h3 {text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006}
ขณะที่เมื่อจับคู่สีและตำแหน่งที่เหมาะสม เช่น ดำและเทาอ่อน ท่านสามารถสร้างเอฟเฟ็กที่นำไปใช้ประโยชน์ได้ เช่น:
h3.a {text-shadow: -1px -1px white, 1px 1px #333} h3.b {text-shadow: 1px 1px white, -1px -1px #333}
การใช้วิธีข้างต้น ท่านต้องระวัง กรณีที่เบราเซอร์ไม่รองรับ 'text-shadow' เพราะอาจทำให้ ผู้ชมไม่สามารถอ่านข้อความได้ เพราะสีตัวอักษรและฉากหลังใกล้เคียงกัน (#CCCCCC และ #D1D1D1)
การใส่เงาหลายชั้นยังสามารถประยุกต์ใช้เพื่อสร้างเส้นขอบให้ตัวอักษรได้อีกด้วย ดังตัวอย่างต่อไปนี้ เมื่อสร้างเงาขึ้นมาสี่ชั้นและกำหนดตำแหน่งเงาที่เหมาะสม ก็สามารถสร้างเส้นขอบ ได้ดังต่อไปนี้:
h3 {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}
ขอบของตัวอักษรที่ได้อาจยังไม่สมบูรณ์นัก ในขณะนี้ (สิงหาคม 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}