تظليل النصوص (Text Shadow) يضيف تأثير الظل خلف النصوص مما يعطي مظهرًا جذابًا وأنيقًا. باستخدام CSS يمكنك تخصيص حجم، لون، وانتشار الظل.
1. الصيغة الأساسية لـ Text Shadow
الصيغة العامة لخاصية text-shadow:
text-shadow: offset-x offset-y blur-radius color;
- offset-x : مدى تحريك الظل أفقيًا (يمين أو يسار).
- offset-y : مدى تحريك الظل عموديًا (أعلى أو أسفل).
- blur-radius : تحديد مدى انتشار الظل (كلما زادت القيمة، أصبح الظل أكثر نعومة).
- color : لون الظل.
2. مثال بسيط على تظليل نص
text-shadow: 2px 2px 5px gray;
- 2px تحريك لليمين.
- 2px تحريك لأسفل.
- 5px لانتشار الظل (نعومته).
- اللون رمادي.
3. ظلال متعددة للنص
يمكنك إضافة أكثر من ظل واحد للنص بفصل كل ظل بفاصلة ,.
مثال:
text-shadow: 1px 1px 2px black, 2px 2px 5px red;
- الظل الأول بلون أسود، والثاني بلون أحمر.
4. جعل الظل يبدو طبيعيًا
عند اختيار قيم مناسبة للانتشار (blur-radius) ولون خافت، سيظهر الظل بشكل طبيعي وخفيف، مما يجعل النص أكثر وضوحًا وجمالاً دون أن يكون مزعجًا.
مثال:
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
(باستخدام لون شفاف عبر rgba).
مثال عملي كامل
h1 {
font-size: 40px;
color: #333;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
}
الواجب العملي
- أنشئ عنوان (
<h1>) وأضف له ظل خفيف بلون رمادي. - جرّب إنشاء أكثر من ظل لنفس النص ولاحظ التأثير.
- جرّب تغيير اتجاه حركة الظل عبر تعديل قيم
offset-xوoffset-y. - جرّب استخدام ألوان شفافة (
rgba) مع الظلال للحصول على تأثيرات ناعمة.