آموزش ایجاد سایه برای جعبه(box) در CSS

آموزش ویژگی box-shadow در CSS

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

مشخص کردن یک سایه افقی و یک سایه عمودی

در ساده ترین حالت، می توانیم تنها یک سایه ی افقی و یک سایه عمودی را مشخص کنیم. رنگ پیش فرض برای سایه، همان رنگ متن فعلی(current text-color) است.

div {
  box-shadow: 10px 10px;
}

مشخص کردن یک رنگ برای سایه

با استفاده از پارامتر color می توانیم رنگ سایه را مشخص کنیم:

div {
  box-shadow: 10px 10px lightblue;
}

اضافه کردن افکت محو شدگی(Blur) به سایه

پارامتر blur، شعاع محو شدگی را مشخص می کند. هرچه این عدد بیشتر باشد، محو شدگی سایه بیشتر خواهد بود.

div {
  box-shadow: 10px 10px 5px lightblue;
}

تنظیم شعاع گسترش سایه 

با استفاده از پارامتر spread(گستردگی) می توانیم شعاع گسترش را تعریف کنیم. هرچه عدد مورد نظر مثبت تر باشد، سایز سایه افزایش پیدا می کند و اگر عدد منفی باشد، باعث کاهش سایه می شود:

div {
  box-shadow: 10px 10px 5px 12px lightblue;
}

تنظیم پارامتر inset

پارامتر inset، سایه را از بیرون(outset) به درون می آورد:

div {
  box-shadow: 10px 10px 5px lightblue inset;
}

اضافه کردن چند سایه

یک عنصر می تواند چندین سایه داشته باشد:

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

ما می توانیم با استفاده از ویژگی box-shadow کارت های کاغذ مانند ایجاد کنیم:

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}