الظلال في CSS

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

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

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

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

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

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

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

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

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

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

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

ظل تحت الفقرة

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

 

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

 

 

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

الظلال في CSS

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

 

 

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


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

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

 

 

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

 

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

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

<

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

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

246 عدد المشاهدات لهذا المحتوى
Scroll to Top