الخاصية text-shadow

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

/* 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;

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

أمثلة

سنجرِّب مختلف القيم والحالات عبر استعمال خمسة عناصر <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>? ]

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

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