انتقل إلى محتوى الدرس

Softening Shadow Blur Radius تنعيم الظل بنصف قطر التمويه

تعلّم توظيف خاصية text-shadow في لغة CSS لضبط الإزاحة الأفقية والرأسية ونصف قطر التمويه وتلوين الظلال بالأسماء وأكواد Hex وتركيب الظلال المتراكبة للعناوين.
4 صفوف تعليمية
لغة CSS
5,512 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند الاكتفاء بقيمتي الإزاحة فقط، يظهر الظل بحواف حادة مطابقة لرسم الحرف لأن القيمة الافتراضية لنصف قطر التمويه blur-radius تساوي 0. وعند تمرير طول ثالث موجب مثل 4px أو 8px أو 14px، يطبّق المتصفح خوارزمية تمويه ضبابي (Gaussian Blur) تشتت حواف الظل بنعومة لتبدو كإضاءة أو عمق طبيعي هادئ.

وتذكّر قاعدة نحوية صارمة هنا: في حين تقبل الإزاحتان الأفقية والرأسية الأرقام السالبة بحرية، لا يقبل blur-radius أي قيمة سالبة مطلقاً؛ فكتابة رقم سالب في خانة التمويه تُبطل سطر الخاصية بالكامل ويتجاهله المتصفح.

الصف 2 شرح توضيحي

جرّب النماذج الثلاثة في المختبر التفاعلي التالي مع تبديل المظهر الفاتح والداكن لتقارن بين الظل الحاد الصفري، والهالة المموهة الناعمة، والظلال البنفسجية المتراكبة:

الصف 3 معاينة حية
الصف 4 ملاحظة هامة