ظل النص خاصية جديدة من CSS

ربما جاءت هذه التدوينه متأخرة جداً فهذه الخاصية معروفة الآن بشكل كبير بين المطورين و لكن لنتحدث عنها أولاً على أى حال فهى مجرد تمهيد لما سيأتي بعدها من إمكانيات تسطيع تنفيذها بهذه الخاصية. فقد كنت أعد تدوينه ولكني وجدت بها العديد من الأمور التي قد تكون مجهولة للمبتدئين أو لمن لا يعلم بكثير من مميزات و خصائص الإصدار الجديد من الـ CSS
لذا سأحاول شرح الخاصية الجميلة ظل النص أو Text-Shadow و التي تضفي بريق جميل على نصوص المشروع الذي تقوم بتصميمه. كما سأتطرق لمدى توافقها مع المتصفحات و سأحاول أن أشمل هذه التدوينه بكل ما يتعلق بهذه الخاصية و أتمنى ألا أغفل شيئاً أثناء الحديث عنها.

من التاريخ

في الواقع هذه الخاصية ليست جديدة بمعنى الكلمة فأول ظهور لها كان عند ظهور CSS 2 عام 1998 ولكن لم يكن الـCSS 2 مدعوماً بشكل كامل وقتها في أغلب المتصفحات الموجودة وقتها (حتى الفيرفوكس ﻷن أول ظهور له كان في 2004) خصوصاً و هذه الفترة لم تشهد حرب التطوير و التحديث الحالية بين المتصفحات الموجودة على الساحة.
بدأ دعم هذه الخاصية في سفاري منذ الإصدار 1.1 عام 2003 لذا فإن أغلب مستخدمي الماك يعرفون هذه الخاصية كما يعرفون التأثيرات التي تتم بهذه الخاصية.

فائدة الخاصية

أنت مخطئ لو اعتقدت أن ظل النص يتم استخدامه فقط لعمل تأثير الظل للنص ولكنه بقليل من اللمسات الفنية يقوم بعمل الكثير من تأثيرات النصوص الجميلة و التي تعوضك عن عمل مثلها باستخدام الصور. ﻷن حجم سطر أوامر بملف الستايل (Style.css) و المسئول عن تحديد شكل و تنسيق الموقع اً اقل بكثير من حجم الصورة و بالتالي قمت بتحقيق سرعة تحميل الصفحة و هذه نقطة تحسب للتصميم أو عليه إذا كان الموقع يستغرق وقتاً طويلاً في التحميل.

دعم المتصفحات

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

Safari 3.1 (ماك / ويندوز)	نعم – تعدد الظلال غير مدعوم
Safari 4 (ماك / ويندوز)	نعم (دعم كامل)
Opera 9.5 (ماك / ويندوز / لينكس)	نعم (دعم كامل)
Firefox 2/3 (ماك / ويندوز / لينكس)	ﻻ
Firefox 3.1/3.5 (ماك / ويندوز / لينكس)	نعم (دعم كامل)
Google Chrome 1 (ويندوز)	ﻻ
Google Chrome 2 (ويندوز)	نعم (دعم كامل)
IE 7/8 (ويندوز)	ﻻ
Epiphany (لينكس)	نعم – منذ أبريل 2008
Safari على الـ iPhone	نعم – تعدد الظلال غير مدعوم
Nokia Symbian-Smartphones (Series 60) Smartphones	نعم
Opera Mini 4.1	نعم - blur radius غير مدعوم

بوجه عام أغلب المتصفحات العالمية تدعم هذه الخاصية و لكن للأسف لازال اللعين (الإكسبلورر) لا يدعمها فلن يظهر التأثير في الإكسبلورر و حسب تصريحات ميكروسوفت فحتى الإصدار التاسع منه لن يدعم خاصية ظل النص Text Shadow فحتى مع وجود بعض الحلول التي تعوض عن عدم وجود الخاصية في الإكسبلورر فإن النتائج للأسف مريعة و سيئة و غير مرضية !!

كيفية العمل و التنفيذ

بشكل إفتراضي فإن التأثير يتم عمله بالسطر التالي

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

وهم كالتالي من اليسار لليمين

• أول قيمة هى لإزاحة الظل رأسياً


• ثاني قيمة هى لإزاحة الظل أفقياً


• ثالث قيمة هى لتحديد تشتت الظل من حدته (كما بالفوتوشوب)


• رابع قيمة هى لتحديد لون الظل

و الإزاحة سواء عمودياً أو رأسياً ممكنة في جميع الإتجاهات

1. رأسياً: القيمة بالسالب تعني إزاحة ناحية اليسار و القيمة بالموجب تعني إزاحة ناحية اليمين.


2. أفقياً: القيمة بالسالب تعني إزاحة ناحية الأعلى و القيمة بالموجب تعني إزاحة ناحية الأسفل.

أمثلة على بعض التأثيرات الممكنة ...

بسيط و إفتراضي

p { color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;  }

والنتيجة ...

و الأمثلة التالية تدل على التغيير في قيمة الـBlur أو التشتت

عمل نص مشع

إستخدمت القيم التالية لعمل النص المشع

p { color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;  }

و طبعاً بتغيير الـBlur تزداد قيمة الإشعاع.


و بتغيير لون النص أو الخلفية تستطيع عمل تأثيرات أروع ...

نص متكرر

وتستطيع عمل نص متكرر كما فعلت مستخدماً القيم التالية

p { ccolor: #000;
background: #fff;
text-shadow: 0px 20px #000; }

الإستخدام المتعدد للألوان

تستطيع إنشاء أكثر من ظل بأكثر من لون و بالتالي تأثيرات أجمل بإستخدام الظل و تكون بتكرار الأمر و المثال القادم سيوضح الفكرة بشكل أكبر

p {color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; }

و بذلك أكون قد أنهيت تدوينة اليوم عن هذه الخاصية والتي يمكن أن تستخدم في تأثيرات أخرى عديدة و لكن لنترك هذا لتدوينة أخرى فأتمنى أن تكونوا قد إستفدتم من هذه التدوينة :wink: