الظلال في CSS

أخر تحديث لهذه المقالة في: 24 نوفمبر 2020 الساعة: 09:28 م

Les ombres أو الظلال في CSS 

الظلال هي واحدة من الابتكارات الحديثة التي جاء بها CSS3.

مع ظهور الجيل الجديد من CSS، لم تعد هناك صعوبة في إضافة الظلال إلى صفحاتنا! 

يكفي كتابة سطر واحد من برمجة  CSS للتأثير على محتويات صفحتنا.

وسنعرج خلال شرحنا على نوعين من الظلال:

  • ظلال الصناديق.
  • ظلال النص.
box-shadow : ظلال الصناديق

تنطبق خاصية  box-shadow  على الكتلة بأكملها وتأخذ أربع قيم بالترتيب التالي:

  • التحول الأفقي للظل.
  • التحول العمودي للظل.
  • تخفيف التدرج.
  • لون الظل.

وهنا سأعطي مثال على ظل لفقرة أو نص  ، وسأختار اللون الرمادي لأنني هكذا أحب أن تكون الظلال العادية ، العرض 8 بكسل ، وبدون تخفيف .

نكتب القيم على هذا الشكل دون ان تغفلوا إضافة الحدود باللون الذي يحلو لكم :

هذه هي النتيجة:

ظل تحت الفقرة

إذا لم تحصل على  نتيجة مطابقة فهذا يعني أنك لم تدرج رمز الحدود ، إستعمل هذا الكود فهو يحتوي أيضاً على الحدود للنص:

 

و إذا أردت أن تخفف في الظل الموجود تحت الفقرة بأن تغير في القيمة الثالثة التي تساوي 0px . إجعلها مثلاً أقل من الإزاحة ( 8 )  ليكون التخفيف صغيراً،   أو نفس القيمة ( 8 ) ليساوس الإزاحة فيكون التخفيف عادي . أو عاليًا يعني أكبر من الإزاحة  . جرب كل الطرق  و ستلاحظ الفرق:

 

 

هنا أعطيتها القيمة 10 px:

الظلال في CSS

يمكننا أيضًا إضافة قيم  اختيارية أخرى  على سبيل المثال  inset  و في هذه الحالة ، سيتم وضع الظل داخل الكتلة ، لإعطاء تأثير منخفض:

 

 

قم بمحاولات أخرى للحصوص على نتائج مختلفة


text-shadow: ظل النَّص

من خلال text-shadow ، يمكنك إضافة الظل مباشرة على حروف النَّص ! و تعمل القيم بنفس الطريقة تمامًا التي رأيناها سابقاً في  box-shadow   الإزاحة ، التخفيف ، واللون.

 

 

تظهر النتيجة في الشكل التالي:

 

إلى هنا أتمنى أن يكون الدرس مفيداً بالنسبة لك. في أمان الله.

أرى أن هذه المواضيع قد تهمك:

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقًا

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

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 296 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 170