css: ظل النص

السلام عليكم …

سألني عدد من الاخوان عن طريقة وضع ظل للنص في عناوين المواضيع ومن ضمنهم أحد الأصدقاء فقمت بطرح الموضوع مبدئياً مع اضافة كود مختص في المتصفح الاكسبلورر بالرغم من أنني أرى عدم فائدته وجدواه ولكن للفائدة العامة .

في البداية لم أتطرق لطرح أي موضوع عن صفحات الانماط الانسابية أو (المتعاقبة) CSS وهي اختصار لـ Cascading Style Sheets بسبب كثرتها على الانترنت وتطرق العديد من المواقع لها فالباحث عنها سيجد أكثر من موقع يقوم بشرحها له وكانت بدايتي بهذا الموضوع البسيط وإن شاء الله يكون مفيد للجميع .

لنبدأ بالمثال التالي [ وإن لم يظهر لك ظل النص فجرب استخدام متصفح حديث غير الاكسبلورر اذا كان لديك وقد لا يظهر الظل أيضاً في اكسبلورر 8 ]

Text Shadow

قد يعتقد البعض أن المثال السابق عبارة عن صورة وهو في الحقيقة نص ويمكنك التأكد من ذلك بتحديده بالفأرة (الماوس) .

لكي تتمكن من فعل ذلك عليك استخدام خاصية text-shadow بثلاثة قيم متحركة الأولى (x-offset) لتحريك الظل يمين ويسار ، والثانية (y-offset) لتحريك الظل يمين ويسار ، والثالثة (blur) البقعة أو الصبغة وفي الأخير سيتوجب عليك اضافة لون الظل

1

text-shadow: 5px 3px 2px #555555;

وهذين كودين الاكسبلورر

1
2

filter: glow(color=#ffff00,strength=3);
filter: dropshadow(color=#ffff00,offX=5,offY=5);

قم بتجربة أحدهما لترى بنفسك !!
ويمكنك الرجوع لهذا الموقع لرؤية المثال والمزيد من المعلومات عن كود الاكسبلورر
http://www.howtocreate.co.uk/textshadow.html

يمكنك أيضاً القراءة في ظل النص خاصية جديدة في css | مدونة احمد حموده