CSS3: คุณรู้เกี่ยวกับเงาข้อความมากแค่ไหน?

เมื่อเร็วๆ นี้ ฉันต้องติดตั้ง Firefox 3.5 เพราะฉันต้องการติดตั้ง Firebug 1.4 ดังนั้นฉันจึงบังเอิญไปสัมผัสกับเงาข้อความที่สวยงามในพื้นหลัง WordPress และมันก็เป็นคุณสมบัติ ข้อความเงา ใน CSS เช่นกัน ดังนั้นวันนี้ฉันจึงรวบรวมข้อมูลบางส่วน ฉันหวังว่ามันจะเป็นแรงบันดาลใจให้กับทุกคน

ก่อนอื่น มาดูส่วนที่มีการใช้ข้อความเงาในแบ็กเอนด์ของ WordPress 2.8 (ลูกศรสีเขียว) คุณคิดอย่างไร ใช่ นี่คือคุณสมบัติ CSS3 ไม่ใช่รูปภาพ

ข้อความเงาคืออะไร?

text-shadow มีอยู่แล้วใน CSS2 และตอนนี้ CSS3 กำลังเตรียมที่จะเพิ่มเข้าไป และเนื่องจากมีเพียง Safari เท่านั้นที่รองรับคุณลักษณะนี้ เราจึงไม่ค่อยเห็นแอปพลิเคชันจริงจนกระทั่งเมื่อเร็ว ๆ นี้เมื่อการรองรับของ Firefox 3.5 ได้รับความสนใจจากผู้คน ในนั้น

text-shadow สามารถรองรับการเพิ่มเงาให้กับข้อความ เพื่อให้เราสามารถใช้แอตทริบิวต์ css3 เพื่อเพิ่มพื้นผิวของข้อความ ในระหว่างการออกแบบโดยไม่ต้องใช้รูปภาพใดๆ
เบราว์เซอร์ที่รองรับในปัจจุบัน ได้แก่ Firefox 3.1+, Safari 3+, Opera 9.5+ และเบราว์เซอร์สมัยใหม่อื่นๆ (ข้อมูลอาจมีความลำเอียง) แน่นอนว่าตระกูล IE ไม่สามารถรองรับได้

ต่อไป ดูที่ไวยากรณ์ของ text-shadow:

ข้อความ-เงา:สี ความยาว ความยาว ความยาว;

สี: สี; ความยาวตามลำดับหมายถึง " ความยาวทิศทางแกน X ความยาวทิศทางแกน Y เงารัศมีเบลอ " ตามลำดับ
ค่าบวกบนแกน X หมายถึงค่าทางขวา และค่าลบทางด้านซ้าย ในทำนองเดียวกัน ค่าลบบนแกน Y หมายถึงค่าใดค่าหนึ่งสามารถเป็นศูนย์ได้ หรือว่างเปล่า (จะถูกประมวลผลโดยค่าเริ่มต้น)

ตัวอย่างเช่น:

ข้อความเงา: -1px 2px 3px #ffb69a;

หมายความว่าเงาอยู่ที่ 1px ไปทางซ้ายในทิศทางของแกน X, ลงไป 2px ในทิศทางของแกน Y และรัศมีการเบลอของเงาคือ 3px และสีคือ #ffb69a

การทดลองและการสาธิตบางอย่าง

ฉันทำการทดลองเล็กน้อยและสร้าง หน้าสาธิต เพื่อให้ผู้ใช้ที่เบราว์เซอร์ ไม่รองรับ เงาข้อความ โปรดดู ภาพหน้าจอ ด้านล่าง (เพื่อนคนหนึ่งบอกว่า "Firebird" ดูเหมือน "ไก่") : :

หากคุณใช้ Firefox 3.1+, Safari และเบราว์เซอร์อื่นๆ โปรดคลิก Demo โดยตรง