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



تستخدم الخاصية text-shadow لإنشاء الظلال للنصوص بينما تستخدم الخاصية box-shadow لإنشاء ظلال العناصر الأخرى كالصور و الجداول و الخلايا ...

I - النصوص

تأخد الخاصية text-shadow إفتراضيا 4 معطيات و هي مرتبة كالتالي
1 إنزياح الأفقي - 2 الإنزياح العمودي . 3 التلاشي . 4 اللون

إدا قمنا بتحديد جميع القيم الثلاثة الأولى إلى صفر ( 0 ) فلن نشاهد أي تأتير بغض النظر عن اللون

سنبدأ بالقيمة الأولى و هي الإنزياح الأفقي



هدا يعني أن الظل سينزاح أفقيا ب 12 بكسل نحو اليمين

النتيجة





لتوجيه الإنزياح نحو اليسار يكفي إدراج قيمة سالبة

مثال




القيمة التانية لا تختلف عن الأولى إد يمكن إدراجها سالبة أو موجبة
الموجبة تعني نزول الظل نحو الأسفل و السالبة تعني الصعود نحو الأعلى

مثال كامل



حدة الظل لا تبدو مناسبة للونه . لدا سنحتاج للتعديل على المدخل الثالث ( قيمة موجبة فقط )


مثال





طبعا كلما كانت قيمة المدخل الثالث أعلى كان التلاشي أكبر و العكس بالعكس





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




II - الخلايا / الصور


تختلف خاصية ظل الخلايا box-shadow عن النصوص بإمكانية إضافة معطى آخر لإعطاء حجم مغاير للعنصر الأصلي
يتم إدراج هدا المعطى قبل اللون و بالتالي يمكن أن تكون قيمة الخاصية box-shadow بإحدا هادين الشكلين





المثال الأول اللدي تم إهمال قيمة الحجم فيه سيكون حجم الظل فيه مساويا لحجم العنصر الأصلي



أما المثال الثاني فسيكون الظل أكبر قليلا




يمكن إدراج قيمة سالبة  لكن في هده الحالة قد يتوارى الظل خلف العنصر إلا إدا كان الأنزياح أكبر من الفرق بين حجم العنصر و ظله


aa-- --bb jjjjjjjjjjjjj