شرح خاصية Text-Shadow في برمجة CSS ,Css3

خاصية Text-Shadow في برمجة Css او Css3 هي عبارة عن خاصية تساهم في جعل ظل للكتابة الموجودة في عنصر Html معين .

لتوضيح

{
    text-shadow:10px 10px 10px #000 ;
    text-shadow:Horizontal shadow|Vertical Shadow|blur|color;
    /*
    Horizontal shadow:تحكم في الظل عرضيا او افقيا
    Vertical Shadow:تحكم في الظل عموديا
    blur:مستوى جعل اللون ضبابي
    color:اللون
    */
}

اكيد لا بد من ان نقوم بتطبيق هذه الخاصية في مجموعة من الأمثلة وبما ان هذه الخاصية بسيطة جدا سنقوم بأمثلة قليلة حولها فقط.

المثال الأول

تابع من فضلك المثال ابتداء من الأكواد البرمجية الى النتيجة اسفله

  <span id="shape1">SHAPE-1</span><br/><br/>
  <span id="shape2">SHAPE-2</span><br/><br/>
  <span id="shape3">SHAPE-2</span>

#shape1{
    text-align: center;
    font-size: 30px;
    text-shadow:5px 5px 3px #000;
}
#shape2{
    text-align: center;
    font-size: 30px;
    text-shadow:-5px -5px 3px #000;
}
#shape3{
    text-align: center;
    font-size: 30px;
    text-shadow:0 0 3px red;
}

SHAPE-1

SHAPE-2

SHAPE-3

المثال الثاني

يمكن كذلك بإستعمال هذه الخاصية تزيين النص بظلال ذات ألوان مختلفة وكذلك يمكنك استعمال لونين او اكثر في نفس الوقت وهذا ما سوف نقوم به في هذا المثال.

<span>LastShape</span>

span{
    text-align: center;
    font-size: 30px;
    text-shadow: 0 -2px 0px red, 0 2px 0px green;
}

LastShape

وهنا يكون قد انتهى الشرح واتمنى ان يكون قد افادكم والسلام عليكم.