الكثير لا يعلم كيفية استخدام خاصية text-shadow من خلال CSS, نظراً لأن تلك الميزة لم تتوفر من خلال المتصفحات على نظام Windows و كانت أكثر و أوسع انتشار في نظام Mac OS X Leopard إلا منذ فترة بسيطة عندما ظهرت متصفحات تدعم تلك الخاصية في بيئة عملها مثل Firefox 3.1 . خاصية text-shadow تقوم بإضافة ظل للنصوص التي تُستخدم فيها و قد توفرت لأول مرة في CSS2 و لم تدعمها كل المتصفحات إلا أن اتجاه المتصفحات الآن لدعم CSS3 سيضيف الكثير من المميزات التي تتوفر فيها . الهدف الأساسي هو إعطاء شكل جميل للنصوص , و الطريقة القديمة للقيام بذلك هو تكوين النص في هيئة صورة باستخدام أي برنامج يضيف مثل تلك التأثيرات (Photoshop) , و كانت بالتالي تأخذ حجماً أكبر في تحميل الصفحة بالإضافة إلى عدم مقدرة محركات البحث على قراءة النصوص بالصور . في الوقت الحالي فجميع المتصفحات باستثناء انترنت اكسبلورر تدعم خاصية text-shadow , و محاولات مايكروسوفت لتكوين قواعد خاصة بها لمثل تلك التأثيرات لا تعطي الشكل الأفضل مثل ظهورها على متصفحات أخرى كـ Safari و Firefox 3.1

.

كيفية استخدام text-shadow

يتم إضافة التأثير لملف CSS بالشكل التالي ( مع اختلاف ما يتم التطبيق عليه ) :

p { text-shadow: 1px 1px 1px #000; }

أول قيمتين يتم من خلالهما تحديد طول الظل الذي يظهر . فأول قيمة تحدد المسافة الأفقية و ثاني قيمة تحدد المسافة الرأسية . القيمة الثالثة تحدد مدى إخفاء معالم الظل (Blur) و القيمة الأخيرة تحدد لون الظل .

أمثلة على text-shadow

text-shadow: 2px -2px 3px #000;

color: #fff;
background: #666;
text-shadow: 0px 2px 4px #000;

color: #fff;
background: #ccc;
text-shadow: 0px 5px 5px #000;

يمكن أيضاً استخدام text-shadow بطرق أخرى متعددة مثل الظل المتعدد Multiple Shadow و هي تمكنك من تكوين أشكال معينة بواسطة ظل النصوص بتدرجات ألوان مختلفة .