CSS Text Shadow
ظل النصوص في لغة CSS
ستتعلم في هذا الدرس إضافة ظل للنصوص وإضافة لون لهذا الظل عن طريق خاصية text-shadow في لغة CSS وستتعلم أيضاً وظيفة هذة الخاصية وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
ملاحظة
</>
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;
}
مهم
Cascading Style Sheets
صفحات الأنماط الانسيابيةHexadecimal
أرقام سداسية عشريةRed، Green، Blue
أحمر , أخضر , أزرقPixel
وحدة قياس الPixel
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
