في هذا الدرس 5تصفّح المواضيع
عندما يستقر عنوان رئيسي فوق خلفية ملونة بارزة أو لافتة ترحيبية، قد يبدو النص المسطح باهت الحضور أو ضعيف التمايز عن محيطه. تمنحك خاصية text-shadow القدرة على رسم ظل واحد أو أكثر خلف انحناءات الحروف نفسها مباشرةً، مما يضفي إحساساً بالعمق والارتفاع البصري دون الحاجة إلى تصميم العناوين كصور ثابتة.
تتكون بنية الظل الكامل من أربع قيم مفصولة بمسافات وفق الصيغة القياسية text-shadow: offset-x offset-y blur-radius color;؛ حيث تُعد القيمتان الأوليان للإزاحة الأفقية offset-x والرأسية offset-y إلزاميتين دائماً، بينما يبقى نصف قطر التمويه blur-radius (وقيمته الافتراضية 0) ولون الظل color اختياريين، ويمكن إلغاء أي ظل موروث في أي وقت عبر text-shadow: none;.
تحدد القيمتان الأوليان موقع نسخة الظل على المحورين الأفقي والرأسي للشاشة قياساً بموضع النص الأصلي:
- الإزاحة الأفقية (
offset-x) — تدفع القيم الموجبة مثل3pxالظل باتجاه اليمين، بينما تسحبه القيم السالبة مثل-3pxباتجاه اليسار. - الإزاحة الرأسية (
offset-y) — تُنزل القيم الموجبة مثل3pxالظل إلى الأسفل، بينما ترفعه القيم السالبة مثل-2pxإلى الأعلى خلف قمم الحروف.
أما ضبط الإزاحتين معاً على 0 0 فيُبقي الظل متمركزاً خلف الحروف مباشرةً دون انحياز جانبي، وهي الحيلة المثالية لتوليد توهج محيط متساوٍ عند دمجها مع التمويه.
.drop-right {
color: #261f36;
text-shadow: 3px 3px #cbd5e1;
}
.lift-top-left {
color: #1e3a8a;
text-shadow: -3px -2px #bfdbfe;
}عند الاكتفاء بقيمتي الإزاحة فقط، يظهر الظل بحواف حادة مطابقة لرسم الحرف لأن القيمة الافتراضية لنصف قطر التمويه blur-radius تساوي 0. وعند تمرير طول ثالث موجب مثل 4px أو 8px أو 14px، يطبّق المتصفح خوارزمية تمويه ضبابي (Gaussian Blur) تشتت حواف الظل بنعومة لتبدو كإضاءة أو عمق طبيعي هادئ.
وتذكّر قاعدة نحوية صارمة هنا: في حين تقبل الإزاحتان الأفقية والرأسية الأرقام السالبة بحرية، لا يقبل blur-radius أي قيمة سالبة مطلقاً؛ فكتابة رقم سالب في خانة التمويه تُبطل سطر الخاصية بالكامل ويتجاهله المتصفح.
جرّب النماذج الثلاثة في المختبر التفاعلي التالي مع تبديل المظهر الفاتح والداكن لتقارن بين الظل الحاد الصفري، والهالة المموهة الناعمة، والظلال البنفسجية المتراكبة:
يقع كثير من المبتدئين في فخ اختيار اللون الأسود القاتم black فوق الخلفيات الفاتحة، فيبدو العنوان متسخاً وثقيلاً على العين. يكمن سر الأناقة البصرية في اختيار درجات لونية هادئة تنسجم مع لون الخلفية عبر الكلمات اللونية المسماة مثل silver و slategray، أو أكواد #rrggbb الست عشرية المعتمة مثل الرمادي المزرق الفاتح #cbd5e1 فوق البطاقات البيضاء والبنفسجي المضيء #c4b5fd فوق اللافتات الداكنة.
أما إذا أغفلت كتابة اللون تماماً مثل text-shadow: 2px 2px 4px;، فإن المتصفح يستعير تلقائياً لون النص المحسوب في خاصية color للعنصر نفسه؛ لذلك احرص دائماً على تحديد لون الظل صراحةً لتمييزه بوضوح عن جسم الحروف.
| مكوّن الظل | الإلزامية | القيمة الافتراضية | قبول السالب | الوظيفة البصرية |
|---|---|---|---|---|
offset-x | إلزامي | لا يوجد | مسموح (يتجه يساراً) | الإزاحة الأفقية للظل |
offset-y | إلزامي | لا يوجد | مسموح (يتجه للأعلى) | الإزاحة الرأسية للظل |
blur-radius | اختياري | 0 (حافة حادة) | ممنوع (يُبطل القاعدة) | تنعيم وتشتيت حواف الظل |
color | اختياري | نفس لون النص color | غير منطبق | تلوين الظل باسم لوني أو #rrggbb |
.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;
}لا تقيدك خاصية text-shadow بظل يتيم؛ بل يمكنك تركيب ظلين أو أكثر على العنصر نفسه بفصل كل ظل عن الذي يليه بفاصلة أجنبية , داخل التصريح ذاته، لابتكار بروز متدرج الأبعاد أو دمج حد قريب دقيق مع هالة خارجية ناعمة.
انتبه جيداً لقاعدة ترتيب الطبقات من الأمام إلى الخلف: يرسم المتصفح الظل الأول في القائمة أقرب ما يكون إلى النص (فوق الظلال التالية له)، بينما يُدفع الظل الأخير إلى أعمق نقطة في الخلفية. وفي العناوين العربية تحديداً، التزم بإزاحات معتدلة (1px إلى 3px) كي تبقى نقاط الإعجام وعلامات التشكيل واضحة المعالم.
.stepped-title {
color: #261f36;
text-shadow: 2px 2px 0 #ddd6fe, 4px 4px 0 #7750b2;
}
.dual-halo {
color: #ffffff;
background-color: #1e1b4b;
text-shadow: 0 2px 3px #312e81, 0 0 14px #c4b5fd;
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أصبحت الآن متمكناً من تصميم ظلال النصوص الحادة والمموهة بضبط الإزاحتين الأفقية والرأسية ونصف قطر التمويه الموجب وتلوينها بالكلمات المسماة وأكواد #rrggbb وتركيب عدة ظلال بالفاصلة. في الخطوة التالية ننتقل إلى درس اتجاه النصوص في لغة CSS لإدارة النصوص العربية والإنجليزية المختلطة باحتراف وأمان.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Glyph Shadow (text-shadow) ظل الحروف (text-shadow)
- خاصية بصرية في CSS ترسم ظلاً واحداً أو أكثر خلف أشكال الحروف مباشرة مع إمكانية تمويهه دون التأثير في أبعاد التخطيط.
- للمراجعة
- 02 Blur Radius نصف قطر التمويه
- الطول الثالث الاختياري غير السالب في خاصية text-shadow (وافتراضيه 0) المسؤول عن تنعيم حواف الظل الحادة وتحويلها إلى هالة متدرجة.
- للمراجعة
- 03 Shadow Offsets (offset-x / offset-y) إزاحتا الظل الأفقية والرأسية
- القيمتان الإلزاميتان في خاصية text-shadow لتحريك الظل أفقياً (يميناً أو يساراً) ورأسياً (لأسفل أو لأعلى).
- للمراجعة
- 04 Comma-Separated Shadow Stack تراكب الظلال بالفاصلة
- تعريف عدة ظلال مفصولة بفاصلة داخل خاصية text-shadow واحدة، حيث يُرسم الظل الأول في المقدمة والأخير في الخلفية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HEX HEX
- Hexadecimal Color Notation
- ترميز الألوان الست عشري مثل #rrggbb المستخدم بكفاءة لاختيار درجات لونية هادئة ومتناسقة لظلال النصوص.
- للمراجعة
- 02 GPU GPU
- Graphics Processing Unit
- وحدة معالجة الرسوميات التي تتولى دمج ورسم طبقات التمويه البصري لظلال العناوين على شاشة المتصفح.
- للمراجعة
- 03 CSS CSS
- Cascading Style Sheets
- معيار أوراق الأنماط المتتالية الذي يحدد قواعد كتابة ورسم خاصية text-shadow وترتيب طبقاتها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
نسّق عنصر <h1> فوق خلفية داكنة #1d172b بلون نص أبيض وظل متمركز text-shadow: 0 0 12px #38bdf8 ليحيط التوهج بالحروف بالتساوي.
-
ادمج ظلين حادين بفاصلة عبر text-shadow: 2px 2px 0 #ddd6fe, 4px 4px 0 #7750b2 وتحقق بصرياً أي اللونين يظهر أقرب إلى جسم الحروف.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.