تعلم استعمال خاصية box-shadow في CSS بإحترافية

السلام عليكم ورحمة الله تعالى وبركاته

خاصية box-shadow هي خاصية في CSS تمكننا من وضع ظلال على عنصر معين من عناصر HTML .

لتوضيح

{
box-shadow:Horizoontal-Shadow|Vertical-Shadow|Blur|Color;
box-shadow:10px 10px 10px #000000;
}

المثال الأول

في هذا المثال سوف نطبق كل ماسبق

<div></div>

div{
	display:inline-block;
    width:200px;
    height:100px;
    background-color: #a9a9a9;
    box-shadow: 10px 10px 10px #000;
}

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

هذا المثال هو بمثابة عكس الظل الموجود في المثال الأول

<div></div>

div{
	display:inline-block;
    width:200px;
    height:100px;
    background-color: #a9a9a9;
    box-shadow: -10px -10px 10px #000;
}

شرح عناصر جديدة في خاصية box-shadow

{
    box-shadow:Horizontal-Shadow|Vertical-Shadow|Blur|Spread|Color|Inset;
    box-shadow:10px 10px 10px 10px #000000 inset;
    }

المثال الثالث

في هذا المثال سوف نحاول اظهار خاصية انتشار الظل في مثال يجعل الظل اكثر واقعية

<div></div>

div{
    display:inline-block;
    width:200px;
    height:100px;
    background-color: #a9a9a9;
    box-shadow: 5px 5px 10px 8px #000;
    }

خاصية الإنتشار تستعمل كثير اذا كان Horizontal shadow و Vertical Shadow يساوي 0 بحيث يمكنك حينها وضع ظل من جميع جوانب الصندوق Box ولا تنسى استعمال ايضا مشتت الظل blur لأنه مهم جدا لوضع لمسة الواقعية على الظل.

المثال الرابع

في هذا المثال سوف نطبق خاصية Inset لوضع الظل من داخل الصندوق Box .

<div></div>

div{
    display:inline-block;
    width:200px;
    height:100px;
    background-color: #a9a9a9;
    box-shadow: 10px 10px 10px #000 inset;
    }

المثال الخامس

في هذا المثال سنجمع بين خاصية Inset و خاصية الإنتشار Spread مع جعل Horizontal و ال Vertical يساوي 0.

<div></div>

div{
    display:inline-block;
    width:200px;
    height:100px;
    background-color: #a9a9a9;
    box-shadow: 0 0 10px 10px #000 inset;
    }