CSS Text Shadow

-

في هذا الدرس بنتعلم كيف ممكن إضافة ضل Shadow الى النص 


نبدأ بإنشاء ملف HTML باسم  TextShadow وبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    <style>
        h1 {
            text-shadow: 2px 2px;
           }
    </style>
<body>
<html>  
    <h1>مرحبا بكم </h1>
  </div>                  
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)
 
طيب نفهم الكود:
الكود التالي:
        h1 {
            text-shadow: 2px 2px;
           }

سيتم تطبيق shadow بحج 2px بكلا الاتجاهين horizontal  و vertical  للنصوص الخاصة ب <h1>

 طريقة الكتابة: 
text-shadow: none;
OR
text-shadow: offset-x offset-y [blur-radius] [color];



طيب تمام نفهم Parameters  واستخداماتها :

offset-x
قيمة موجبة أو سالبة تطبق على المسافة الأفقية  horizontal distance. إذا كانت offset-x قيمة سالبة، فسيتم وضع الظل على يسار النص.(قيمة اجبارية لا يمكن تطبيق shadow دون هذه القيمة)

offset-y
قيمة موجبة أو سالبة تطبيق على المسافة العمودية vertical distance. إذا كانت offset-y قيمة سالبة ، فسيتم وضع الظل فوق النص. (قيمة اجبارية لا يمكن تطبيق shadow دون هذه القيمة)

blur-radius
تستخدم للتحكم بتمويه الظل blur. ولا يمكن أن تكون قيمة سالبة. كلما كانت القيمة اكبر، زاد التمويه. (قيمة اختيارية)

Color
لون ظل النص (قيمة اختيارية)

امثلة :

تطبيق shadow دون [blur-radius]
div { text-shadow: 2px 3px #F5F5F5; }

تم تحديد جميع Parameters هنا

div { text-shadow: 2px 3px 5px #F5F5F5; }

لن يتم تطبيق أي shadow على النص 
div { text-shadow: none; }