مشاهده تصویر بزرگتر

ویژگی box-shadow در css

ویژگی box-shadow در css | ویژگی box-shadow | صفت box-shadow

ویژگی box-shadow در css | ویژگی box-shadow در css

در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی box – shadow در زبان CSS می پردازیم.

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

ویژگی box – shadow به عنوان یکی از خصوصیات جدید در CSS3 معرفی شده است.

از طریق این ویژگی جدید box – shadow تمام عناصر موجود در یک وبسایت می توانند سایه بگیرند.

مثال اول در مورد ویژگی باکس شدو در زبان CSS

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
div {box-shadow: 2px 3px 10px 5px #f0f; background: #ccc; margin: 15px auto; width: 100px; height: 100px;}

1 2	box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; div {box-shadow: 2px 3px 10px 5px #f0f; background: #ccc; margin: 15px auto; width: 100px; height: 100px;}

خروجی کد در مرورگر اینترنتی

همانطور که در کد بالا مشاهده می کنید ویژگی box – shadow چهار مقدار گرفته است که در ادامه به بررسی تک تک این ویژگی ها می پردازیم.

۱- اولین مقدار فاصله سایه با باکس را در راستای محور X مشخص می کند.

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

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

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

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

۴- و مقدار چهارم هم یک مقدار اختیاری است که اندازه سایه را مشخص می کند.

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

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

ویژگی box-shadow در css | ویژگی box-shadow در css | صفت box-shadow

مثال دوم در مورد ویژگی box – shadow در CSS

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

div {box-shadow: inset 0 0 5px 3px #666; background: #ccc; margin: 15px auto; width: 100px; height: 100px;}

1	div {box-shadow: inset 0 0 5px 3px #666; background: #ccc; margin: 15px auto; width: 100px; height: 100px;}

خروجی کد در مرورگر اینترنتی

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

مثال دوم در مورد ویژگی box – shadow در CSS

div {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; width: 100px; height: 100px; margin: 60px auto; background: #ccc; border: 10px solid #fff;}

1	div {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; width: 100px; height: 100px; margin: 60px auto; background: #ccc; border: 10px solid #fff;}