آموزش کار با Box Shadow در Css

با سلام خدمت دوستان عزیز :)

از ویژگی box-shadow برای اضافه کردن سایه به یک عنصر یا باکس استفاده می شود. تمام عناصر در یک صفحه می توانند سایه بگیرند.

Css :

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
box-shadow: 2px 3px 10px 5px #f0f;

اولین مقدار فاصله سایه با باکس را در راستای محور X مشخص می کند, که اگر این مقدار مثبت باشد سایه به سمت راست حرکت دارد و اگر منفی باشد سایه به سمت چپ حرکت می کند.

دومین مقدار فاصله سایه با باکس را در راستای محور Y تعیین می کند که مقدار مثبت باعث حرکت سایه به سمت پایین و مقدار منفی باعث حرکت به سمت بالا می شود.

و مقدار سوم میزان مات شدن یا محو شدن سایه را تعیین می کند, که این مقدار اختیاری می باشد و اگر تعیین نشود مرورگر مقدار پیشفرض آن که صفر است را به سایه اعمال می کند. وقتی این مقدار صفر باشد لبه سایه کاملا واضح و تیز می شود و هر چه این مقدار بیشتر شود لبه سایه مات تر و محوتر می شود.

مقدار چهارم هم یک مقدار اختیاری است که اندازه سایه را مشخص می کند. مقدار پیشفرض آن برابر صفر است به این معنی که سایه به اندازه خود باکس می باشد اگر مقدار آن مثبت باشد سایه از خود باکس بزرگتر می شود و اگر مقدار منفی بگیرد سایه از عنصر کوچک تر می شود.

مثال :

div {
box-shadow: 10px 10px 5px -5px #666;
}

با اضافه کردن کلمه کلیدی inset به ویژگی box-shadow می توان سایه داخلی برای یک عنصر بوجود آورد.

div {
box-shadow: inset 0 0 5px 3px #666;
}

ی توان به یک عنصر چندین سایه اضافه کرد, که در این صورت اولین سایه در بالا و بقیه به ترتیب زیر آن قرار می گیرند. فقط کافی است سایه ها به وسیله ویرگول از هم جدا شوند:

div {
width: 100px;
height: 100px;
margin: 60px auto;
background: #ccc;
border: 10px solid #fff;
box-shadow: inset 0 0 0 10px black, 0 0 0 10px purple, 0 0 0 20px pink, 0 0 0 30px red, 0 0 0 40px orange;
}

حتما با مثال جلو برید موفق باشید

instagram : @_xmwmalix_