Les ombres أو الظلال في CSS
الظلال هي واحدة من الابتكارات الحديثة التي جاء بها CSS3.
مع ظهور الجيل الجديد من CSS، لم تعد هناك صعوبة في إضافة الظلال إلى صفحاتنا!
يكفي كتابة سطر واحد من برمجة CSS للتأثير على محتويات صفحتنا.
وسنعرج خلال شرحنا على نوعين من الظلال:
- ظلال الصناديق.
- ظلال النص.
تنطبق خاصية box-shadow على الكتلة بأكملها وتأخذ أربع قيم بالترتيب التالي:
- التحول الأفقي للظل.
- التحول العمودي للظل.
- تخفيف التدرج.
- لون الظل.
وهنا سأعطي مثال على ظل لفقرة أو نص ، وسأختار اللون الرمادي لأنني هكذا أحب أن تكون الظلال العادية ، العرض 8 بكسل ، وبدون تخفيف .
نكتب القيم على هذا الشكل دون ان تغفلوا إضافة الحدود باللون الذي يحلو لكم :
|
1 2 3 4 |
p { box-shadow: 8px 8px 0px #535353; } |
هذه هي النتيجة:
ظل تحت الفقرة
إذا لم تحصل على نتيجة مطابقة فهذا يعني أنك لم تدرج رمز الحدود ، إستعمل هذا الكود فهو يحتوي أيضاً على الحدود للنص:
|
1 2 3 4 5 |
p { box-shadow: 8px 8px 0px #535353; border: 2px solid #535353; } |
و إذا أردت أن تخفف في الظل الموجود تحت الفقرة بأن تغير في القيمة الثالثة التي تساوي 0px . إجعلها مثلاً أقل من الإزاحة ( 8 ) ليكون التخفيف صغيراً، أو نفس القيمة ( 8 ) ليساوس الإزاحة فيكون التخفيف عادي . أو عاليًا يعني أكبر من الإزاحة . جرب كل الطرق و ستلاحظ الفرق:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
p { box-shadow: 8px 8px 5px #535353; } أو هذا p { box-shadow: 8px 8px 8px #535353; } أو هذا p { box-shadow: 8px 8px 12px #535353; } |
هنا أعطيتها القيمة 10 px:
الظلال في CSS
يمكننا أيضًا إضافة قيم اختيارية أخرى على سبيل المثال inset و في هذه الحالة ، سيتم وضع الظل داخل الكتلة ، لإعطاء تأثير منخفض:
|
1 2 3 4 |
p { box-shadow: 8px 8px 8px black inset; } |
قم بمحاولات أخرى للحصوص على نتائج مختلفة
text-shadow: ظل النَّص
من خلال text-shadow ، يمكنك إضافة الظل مباشرة على حروف النَّص ! و تعمل القيم بنفس الطريقة تمامًا التي رأيناها سابقاً في box-shadow الإزاحة ، التخفيف ، واللون.
|
1 2 3 4 |
p { text-shadow: 4px 4px 6px black; } |
تظهر النتيجة في الشكل التالي:
إلى هنا أتمنى أن يكون الدرس مفيداً بالنسبة لك. في أمان الله.
 أرى أن هذه المواضيع قد تهمك: |
<
p style=”border: 0px solid; color: #f9aaa7; background-color: #fff; font-size: 15px; margin-right: 30px; border-right: 15px solid #836E70; padding-right: 8px; padding-left: 8px; margin-left: 30px;”>شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.