CSS

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

ستتعلم في هذا الدرس إضافة ظل للنصوص وإضافة لون لهذا الظل عن طريق خاصية text-shadow في لغة CSS وستتعلم أيضاً وظيفة هذة الخاصية وجميع القيم الخاصة بها.

التاريخ

09 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2364

المواضيع

24
الشروحات chevron_left CSS Text Shadow chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

تستخدم text-shadow لإضافة ظل للنصوص وضبط لون لهذا الظل والتحكم في حجم الظل ومكانة حول الظل في لغة CSS.


قيم خاصية text-shadow في لغة CSS:

  • none القيمة الأفتراضية لا يوجد shadow ظل.
  • horizontal shadow قيمة ضرورية, وهي قيمة الظل عمودياً,يكتب بداخلها قيم بكسل موجبة أو سالبة لأعلي ولأسفل.
  • vertical shadow قيمة ضرورية, وهي قيمة الظل افقياً,يكتب بداخلها قيم بكسل موجبة أو سالبة لأعلي ولأسفل.
  • blur radius قيمة اختيارية,وهي قيمة درجة وضوح الظل,والقيمة الأفتراضية بدونها هي صفر 0 أي ان الظل واضح جداً.
  • color قيمة إختيارية,وهي قيمة اللون ويكتب بأي طريقة color name أو hex color أو rgb والقيمة الأفتراضية هي اللون الأسود.


    وظيفية خاصية text-shadow في لغة CSS:

    • إضافة ظل للنصوص.

    text-shadow syntax

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

    text-shadow:value;
    text-shadow values

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

    text-shadow:h-shadow|v-shadow|blur-radius|color|none|initial|inherit;
    ملاحظة
    تُكتب قيم خاصية text-shadow بجانب بعضها لبعض بمسافات بدون فواصل في لغة CSS.

    </> CSS Text vertical and horizontal shadow
    ظل النصوص عمودي ورأسي في لغة CSS

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

    CSS Text vertical and horizontal shadow

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

    h1
    {
      text-shadow: 2px 2px;
    }
    CSS Text vertical and horizontal shadow depth

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

    h1
    {
      text-shadow: 7px 15px;
    }

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

    قيمة اللون ليست ضرورية مع خاصية text-shadow واللون الأفتراضي هو اللون الأسود واللون يعطي تصميماً افضل للظل.

    CSS Text shadow wuth color

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

    h1 
    {
      text-shadow: 2px 2px red;
    }
    CSS Text vertical and horizontal shadow minus

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

    h1
    {
      text-shadow: -5px -5px red;
    }

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

    قيمة blur ليست ضرورية مع خاصية text-shadow والقيمة الأفتراضية هي صفر وقيمة blur هي شدة وضوح الظل أما ظل خفيف أو ظل داكن.

    CSS Text shadow with blur

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

    h1 
    {
      text-shadow: 2px 2px 5px red;
    }
    CSS Text shadow color with blur

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

    h1
    {
      text-shadow: -5px -5px 15px red;
    }
    مهم
    يجب مراعاة ترتيب قيم خاصية text-shadow في لغة CSS لكي تعمل بطريقة صحيحة دون وجود أي خلل.
    مصطلحات الدرس
    Property
    Property

    خاصية

    Color Name
    Color Name

    اسم اللون

    Color
    Color

    لون

    Blur
    Blur

    ضباب

    اختصارات الدرس
    CSS
    CSS

    Cascading Style Sheets

    صفحات الأنماط الانسيابية
    Hex
    Hex

    Hexadecimal

    أرقام سداسية عشرية
    RGB
    RGB

    Red، Green، Blue

    أحمر , أخضر , أزرق
    Px
    Px

    Pixel

    وحدة قياس الPixel
    معلومات تهمك
    • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
    • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
    مشاركة
    0
    0
    0
    0
    عدد المشاركات
    هل هذه المعلومات نالت إعجابك ؟
    0
    0
    عدد التقييمات

    لديك استفسار ؟

    يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.