الفرق بين المراجعتين لصفحة: «CSS/text-shadow»

مراجعة 10:42، 27 يوليو 2018

الخاصية 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>? ]

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>text-shadow</code>}}</noinclude>
-الخاصية <code>text-shadow</code> في CSS تضيف تأثير الظلال على النص، وتقبل تحديد أكثر من ظل (يُفصَل بين قيمها بفاصلة)، وسيُطبَّق الظل على النص وعلى خطوط الزخرفة <code>[[CSS/text-decoration|text-decoration]]</code> التابعة للعنصر.<syntaxhighlight lang="css">
+الخاصية <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;
@@ سطر 20: / سطر 42: @@
 text-shadow: initial;
 text-shadow: unset;
 </syntaxhighlight>
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>none</code>
-|-
-! scope="row" |تُطبَّق على
-|جميع العناصر.
-|-
-! scope="row" |قابلة للوراثة
-|نعم
-|-
-!قابلة للتحريك
-|نعم
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت.
-|}
 == أمثلة ==
@@ سطر 78: / سطر 82: @@
 كل ظل يتألف من قيمتين طوليتين <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><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>[[CSS/length|<length>]]</code> تضبطان مدى إزاحة الظل عن النصف.<code><offset-x></code> تضبط الإزاحة الأفقية، وستؤدي القيم السالبة إلى إظهار الظل على الطرف الأيسر للنص. بينما <code><offset-y></code> تؤدي إلى ضبط الإزاحة الرأسية، والقيم السالبة ستؤدي إلى إظهار الظل فوق النص. وإذا كانت كلتا القيمتين <code>0</code> فسيكون الظل موجودًا خلف النص مباشرةً (لكن قد يكون له تأثير الضبابية blur إذا ضُبِطَت  <code><blur-radius></code>).
-=== القيمة <code><blur-radius></code> ===
+=== <code><blur-radius></code> ===
 هذه هي ثالث قيمة تقبلها الخاصية text<code>-shadow</code>، وكلما كبرت القيمة زاد تأثير الضبابية، وبالتالي سيصبح الظل أكبر وأكشف لونًا، ولا يُسمَح باستخدام قيم سالبة، والقيمة الافتراضية هي <code>0</code> (أي أنَّ حافة الظل «حادة»)، ولا توفِّر المواصفة خوارزمية دقيقة لحساب نصف قطر تأثير الضبابية، فالأمر متروك للمتصفحات.
-=== القيمة <code>[[CSS/color value|<color>]]</code> ===
+===  <code>[[CSS/color value|<color>]]</code> ===
-لون الظل، راجع صفحة القيمة <code>[[CSS/color|<color>]]</code> لتفاصيل عن طرائق تحديد هذه القيمة. يجدر بالذكر أنَّه إذا لم تُحدَّد هذه القيمة فاللون المستخدم سيكون تابعًا للمتصفح، وتكون قيمته عادةً مساويةً لقيمة الخاصية <code>[[CSS/color|color]]</code> (أي <code>currentColor</code>).
+لون الظل، راجع صفحة <code>[[CSS/color|<color>]]</code> لتفاصيل عن طرائق تحديد هذه القيمة. يجدر بالذكر أنَّه إذا لم تُحدَّد هذه القيمة فاللون المستخدم سيكون تابعًا للمتصفح، وتكون قيمته عادةً مساويةً  للخاصية <code>[[CSS/color|color]]</code> (أي <code>currentColor</code>).
 === البنية الرسمية ===