CSS/text-shadow

الخاصية text-shadow في CSS تضيف تأثير الظلال على النص، وتقبل تحديد أكثر من ظل (يُفصَل بين قيمها بفاصلة)، وسيُطبَّق الظل على النص وعلى خطوط الزخرفة text-decoration التابعة للعنصر.

بطاقة الخاصية

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #FC0 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
text-shadow: 5px 10px;

/* القيم العامة */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

أمثلة

سنجرِّب مختلف القيم والحالات عبر استعمال خمسة عناصر <p>:

<p class="ex1">تجربة على استخدام الخاصية <code>text-shadow</code> لإضافة ظل على هذا النص.</p>
<p class="ex2">تجربة على استخدام الخاصية <code>text-shadow</code> لإضافة ظل على هذا النص.</p>
<p class="ex3">تجربة على استخدام الخاصية <code>text-shadow</code> لإضافة ظل على هذا النص.</p>
<p class="ex4">تجربة على استخدام الخاصية <code>text-shadow</code> لإضافة ظل على هذا النص.</p>
<p class="ex5">تجربة على استخدام الخاصية <code>text-shadow</code> لإضافة ظل على هذا النص.</p>

شيفرة CSS:

.ex1 { text-shadow: 2px 6px;}
.ex2 { text-shadow: 2px 6px salmon;}
.ex3 { text-shadow: 2px 6px 10px salmon;}
.ex4 { text-shadow: 2px 6px 10px salmon, -2px -6px 10px #069;}
.ex5 {
  text-shadow: 2px 6px salmon;
  text-decoration: line-through skyblue;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	2.0	3.5	10	9.5	1.1

البنية العامة

تقبل هذه الخاصية ضبط أكثر من ظل في آنٍ واحد وذلك بفصل القيم بفاصلة.

كل ظل يتألف من قيمتين طوليتين <length> أو ثلاث قيم، وتتبعها قيمة لونية <color> اختياريًا. أوّل قيمتين طوليتين <length> هما قيم الإزاحة على المحور X أي <offset-x> والمحور Y أي <offset-y>، أما القيمة الثالثة فهي اختيارية وهي نصف قطر تأثير الضبابية <blur-radius>.

<offset-x> أو <offset-y>

قيمتان طوليتان <length> تضبطان مدى إزاحة الظل عن النصف.<offset-x> تضبط الإزاحة الأفقية، وستؤدي القيم السالبة إلى إظهار الظل على الطرف الأيسر للنص. بينما <offset-y> تؤدي إلى ضبط الإزاحة الرأسية، والقيم السالبة ستؤدي إلى إظهار الظل فوق النص. وإذا كانت كلتا القيمتين 0 فسيكون الظل موجودًا خلف النص مباشرةً (لكن قد يكون له تأثير الضبابية blur إذا ضُبِطَت <blur-radius>).

<blur-radius>

هذه هي ثالث قيمة تقبلها الخاصية text-shadow، وكلما كبرت القيمة زاد تأثير الضبابية، وبالتالي سيصبح الظل أكبر وأكشف لونًا، ولا يُسمَح باستخدام قيم سالبة، والقيمة الافتراضية هي 0 (أي أنَّ حافة الظل «حادة»)، ولا توفِّر المواصفة خوارزمية دقيقة لحساب نصف قطر تأثير الضبابية، فالأمر متروك للمتصفحات.

<color>

لون الظل، راجع صفحة <color> لتفاصيل عن طرائق تحديد هذه القيمة. يجدر بالذكر أنَّه إذا لم تُحدَّد هذه القيمة فاللون المستخدم سيكون تابعًا للمتصفح، وتكون قيمته عادةً مساويةً للخاصية color (أي currentColor).

البنية الرسمية

text-shadow: none | <shadow-t>#;

حيث:

<shadow-t> = [ <length>{2,3} && <color>? ]

انظر أيضًا

• صفحة الخاصية box-shadow التي تصف تأثير الظلال على العنصر، ويمكن إضافة ظل أو أكثر باستخدام هذه الخاصية.
• صفحة الخاصية color التي تضبط القيمة اللونية للأمامية للمحتوى النصي للعنصر وللزخرفة النصية.
• صفحة الخاصية length التي تستعمل لتمثيل القيم الطولية.

مصادر ومواصفات

• مسودة CSS Transitions.
• مواصفة CSS Text Decoration Module Level 3.