انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 13
دورة لغة CSS

ظل النصوص في لغة CSSCSS Text Shadow

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,394
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

CSS Text shadow ظل النصوص في لغة CSS

تضيف text-shadow ظلًا للنص، وتحدد إزاحته وتمويهه ولونه.

  • none هي القيمة الابتدائية وتعني عدم وجود ظل.
  • الطول الأول إزاحة أفقية: الموجب إلى اليمين والسالب إلى اليسار.
  • الطول الثاني إزاحة رأسية: الموجب إلى الأسفل والسالب إلى الأعلى. الطولان مطلوبان للظل.
  • الطول الثالث الاختياري نصف قطر التمويه؛ قيمته الافتراضية0 ولا يقبل قيمة سالبة.
  • اللون اختياري، ويمكن أن يأتي قبل الأطوال أو بعدها. عند إغفاله تكون القيمة currentColor وفق المواصفة، وليست الأسود دائمًا.

text-shadow syntax

طريقة كتابة خاصية text-shadow في لغة CSS.

CSS 
text-shadow:value;

text-shadow values

مثال صالح يجمع الإزاحة الأفقية2px والرأسية3px والتمويه4px واللون الأحمر.

CSS 
text-shadow: 2px 3px 4px red;

CSS Text vertical and horizontal shadow ظل النصوص أفقي ورأسي في لغة CSS

يمكن تعريف ظل بطولين فقط: الأول للإزاحة الأفقية والثاني للرأسية. عند إغفال التمويه يكون0، وعند إغفال اللون يستخدم currentColor.

CSS Text vertical and horizontal shadow

في 2px 2px يكون الظل يمين النص2px وأسفله2px.

HTML 
h1
{
  text-shadow: 2px 2px;
}
جرّب بنفسك

CSS Text vertical and horizontal shadow depth

القيمة7px للإزاحة نحو اليمين، و15px للإزاحة نحو الأسفل.

HTML 
h1
{
  text-shadow: 7px 15px;
}
جرّب بنفسك

CSS Text shadow color لون الظل في لغة CSS

اللون اختياري، لكن عدم كتابته لا يعني الأسود دائمًا؛ تستخدم المواصفة currentColor، أي لون النص الحالي. اكتب لون الظل صراحة عندما تريد نتيجة لونية محددة.

CSS Text shadow wuth color

خاصية text-shadow مع القيمة color في لغة CSS.

HTML 
h1 
{
  text-shadow: 2px 2px red;
}
جرّب بنفسك

CSS Text vertical and horizontal shadow minus

ظل النص مع خاصية text-shadow بقيميتين فقط وهي vertical and horizontal مع تحريك الظل بعيداً عن النص بقيمة سالبة.

HTML 
h1
{
  text-shadow: -5px -5px red;
}
جرّب بنفسك

CSS Text shadow with blur خاصية text-shadow مع قيمة blur في لغة CSS

نصف قطر التمويه اختياري وقيمته الابتدائية0. زيادة blur توسع التمويه وتلين حواف الظل؛ ليست تحكمًا مباشرًا في درجة سواد اللون. لا يقبل نصف قطر سالبًا.

CSS Text shadow with blur

خاصية text-shadow مع القيمة blur في لغة CSS.

HTML 
h1 
{
  text-shadow: 2px 2px 5px red;
}
جرّب بنفسك

CSS Text shadow color with blur

خاصية text-shadow مع قيمة blur وقيمة color في لغة CSS.

HTML 
h1
{
  text-shadow: -5px -5px 15px red;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات6

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 6 مفهومةأول بطاقة، أول خطوة
01 Shadow ظل
للمراجعة
02 Text نص
للمراجعة
03 Property خاصية
للمراجعة
04 Color Name اسم اللون
للمراجعة
05 Color لون
للمراجعة
06 Blur ضباب
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 Hex Hex
Hexadecimal
أرقام سداسية عشرية
للمراجعة
03 RGB RGB
Red، Green، Blue
أحمر , أخضر , أزرق
للمراجعة
04 Px Px
Pixel
وحدة قياس الPixel
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

1أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي1 أسئلة تنتظرك
01

ماهي الخاصية التي تستخدم لأنشاء ظل للنصوص ؟

____