عرض مصدر CSS/text-shadow

<noinclude>{{DISPLAYTITLE:الخاصية <code>text-shadow</code>}}</noinclude>
الخاصية <code>text-shadow</code> في CSS تضيف تأثير الظلال على النص، وتقبل تحديد أكثر من ظل (يُفصَل بين قيمها بفاصلة)، وسيُطبَّق الظل على النص وعلى خطوط الزخرفة <code>[[CSS/text-decoration|text-decoration]]</code> التابعة للعنصر.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}

<syntaxhighlight lang="css">
/* 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;
</syntaxhighlight>

== أمثلة ==
سنجرِّب مختلف القيم والحالات عبر استعمال خمسة عناصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|2.0
|3.5
|10
|9.5
|1.1
|}

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

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

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

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
text-shadow: none | <shadow-t>#;

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<shadow-t> = [ <length>{2,3} && <color>? ]
</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/color|color]]</code> التي تضبط القيمة اللونية للأمامية للمحتوى النصي للعنصر وللزخرفة النصية.
* صفحة الخاصية <code>[[CSS/length|length]]</code> التي تستعمل لتمثيل القيم الطولية.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-shadow CSS Text Decoration Module Level 3]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Text Decoration|{{SUBPAGENAME}}]]