CSS : ظلال الصناديق Box Shadow

CSS : ظلال الصناديق Box Shadow

خاصية من خواص Cascading Style Sheets أو مايُعرف لدى الجميع بـ CSS وهي شبيهه بخاصية ظل النص Text Shadow ولكنها مختصة فقط بظل الصناديق (برواز ، مربعات .. أو ماشئت تسميته) .

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

شاهد المثال التالي :
[ إذا لم يظهر ظل للاطار أو الصندوق حول النص فعليك بتغيير متصفحك أو تحديثه ]

وهذا الكود الخاص بالمثال أعلاه :

حيث أن :
moz خاصة بمتصفح الفايرفوكس .
webkit خاصة بالمتصفحات الأخرى .
box-shadow لبعض المتصفحات في الوقت الحالي مثل الاوبرا ، وستشمل بقية المتصفحات مستقبلاً .
أما بالنسبة لوصف خصائصها فهي مثل خصائص text-shadow تماماً

فمن السهولة إنشاء العديد من الصناديق بظلال وألوان مختلفة .