بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الخاصية text-shadow : تستخدم لإبراز تأثير الظل مع النصوص ، وتأخذ ثلاث قيم رقمية ب px أو em أو % ، تمثل الأولى إتجاه الظل على المحور الأفقي x ، والثانية إتجاه الظل على المحور العمودي y ، والثالثة درجة انتشار الظل ، والتلاعب بالقيم يسمح بتحديد شكل الظهور الذي نريد . ويمكن تجاهل القيمة الثالثة فيحددها المتصفح افتراضيا ، وهناك أيضا قيمة رابعة نحدد بها لون الظل يمكن تجاهلها كذلك فيظهر الظل بلون النص.
وكعادتنا نمر إلى التطبيق كأفضل وسيلة للفهم الصحيح.
ليكن كود html التالي:
والتنسيق التالي:
والنتيجة:
عندما حددنا قيمة موجبة للمحور x الأفقي ذهب الظل في اتجاه الصفحة من اليسار إلى اليمين ، لو وضعنا القيمة سالبة لذهب في الإتجاه المعاكس ، نفس الشيء يقال عن الإتجاه y العمودي .
وفي المثال الأخير حددنا قيمة للإنتشار فقط بينما أعطينا القيمة 0 للمحورين x و y فاتجه الظل بنفس درجة الإنتشار في كل الإتجاهات.
الخاصية box-shadow : تستخدم لإبراز تأثير الظل خارج حدود العنصر ، تأخذ أربع قيم رقمية ، الأولى للمحور x ، والثانية للمحور y ، والثالثة درجة انتشار الظل ، والرابعة حجم الظل ، ويمكن تجاهل القيمة الرابعة فيحددها المتصفح افتراضيا ، وهناك أيضا قيمة رابعة تشير إلى لون الظل يمكن تجاهلها هي الأخرى فيظهر الظل افتراضيا باللون الأسود.
ليكن كود html التالي:
والتنسيق التالي:
والنتيجة:
وكما ترى الظل حول العنوان h3 بنسبة متساوية لأننا حددنا للمحورين x و y القيمة 0 ، بينما ظهر الظل في اتجاهين فقط مع العنصر div لأننا حددنا قيمة موجبة للمحورين x و y ولو حددنا قيمة سالبة لإحداها لظهر في الإتجاه المقابل .
ومع input من النوع text والنوع email تعمدت تبديل القيمتين مابين الإنتشار والحجم حتى يتضح الفرق بينهما.
وتذكيرا بما ذكرناه في الدرس الماضي عن الخصائص الجديدة التي جاءت بها css3 ينبغي استخدام البادئات لحل مشاكل المتصفحات مع خاصية الظل ، فنكتب:
text-shadow
moz-text-shadow-
webkit-text-shadow-
ms-text-shadow-
o-text-shadow-كما نكتب:
box-shadow
moz-box-shadow-
webkit-box-shadow-
ms-box-shadow-
o-box-shadow-موعدنا في الدرس القادم مع التدرج في الألوان ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.