تطوير المواقعووردبريس

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

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

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

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

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

 

Box Shadow

 

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

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


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

 

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

 

الاشتراك في النشرة البريدية
اشترك في المجموعة البريدية لتصلك آخر المقالات على البريد الالكتروني
سيتم ارسال بريد الكتروني لتأكيد الاشتراك

اقرأ المقالات

‫4 تعليقات

  1. شكرا لك كثيراً

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

    في رعاية الله

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

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

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

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

أنت توافق على نشر تعليقك وحفظ بياناتك.

زر الذهاب إلى الأعلى