شرح صفوف ومحتوى الفقرة
يقع كثير من المبتدئين في فخ اختيار اللون الأسود القاتم black فوق الخلفيات الفاتحة، فيبدو العنوان متسخاً وثقيلاً على العين. يكمن سر الأناقة البصرية في اختيار درجات لونية هادئة تنسجم مع لون الخلفية عبر الكلمات اللونية المسماة مثل silver و slategray، أو أكواد #rrggbb الست عشرية المعتمة مثل الرمادي المزرق الفاتح #cbd5e1 فوق البطاقات البيضاء والبنفسجي المضيء #c4b5fd فوق اللافتات الداكنة.
أما إذا أغفلت كتابة اللون تماماً مثل text-shadow: 2px 2px 4px;، فإن المتصفح يستعير تلقائياً لون النص المحسوب في خاصية color للعنصر نفسه؛ لذلك احرص دائماً على تحديد لون الظل صراحةً لتمييزه بوضوح عن جسم الحروف.
| مكوّن الظل | الإلزامية | القيمة الافتراضية | قبول السالب | الوظيفة البصرية |
|---|---|---|---|---|
offset-x | إلزامي | لا يوجد | مسموح (يتجه يساراً) | الإزاحة الأفقية للظل |
offset-y | إلزامي | لا يوجد | مسموح (يتجه للأعلى) | الإزاحة الرأسية للظل |
blur-radius | اختياري | 0 (حافة حادة) | ممنوع (يُبطل القاعدة) | تنعيم وتشتيت حواف الظل |
color | اختياري | نفس لون النص color | غير منطبق | تلوين الظل باسم لوني أو #rrggbb |
CSS
.light-card-heading {
color: #261f36;
text-shadow: 0 3px 6px #cbd5e1;
}
.dark-banner-heading {
color: #ffffff;
background-color: #1d172b;
text-shadow: 0 0 12px #38bdf8;
}