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

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

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

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

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

 

Box Shadow

 

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


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

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

 

أول الغضب جنون وآخره ندم
عقول كل قوم على قدر زمانهم

 

  • السلام عليكم ورحمة الله و بركاته

    بارك الله فيك أخي ع الخاصية الرائعة 😛

    تحياتي ,, 😉

  • mohob

    تسلم يالذيب

    والله اعجبتني .. بجد

    8)

  • شكرا لك كثيراً

    استفسار عن مكان وضع الكود

    في رعاية الله

    أستأذنك بوضع عنوان مدونتي وإن رغبت احذف الرابط رعاك الله

    اتشرف بزيارتك لمدونتي

    وأنتظر زيارتكم

  • اذا كانت لديك معلومات عن خصائص css بشكل عام فيمكنك استخدامه في المكان الذي تريد الصندوق الظهور فيه ، والبعض ييستخدمه في ملف style.css