سایه جعبه (Box Shadow)
«سایه جعبه (Box Shadow)» یعنی هاله دور المان. در CSS با ویژگی box-shadow ساخته می شود. این ویژگی جابه جایی افقی، عمودی، محوی، گسترش، رنگ و حالت درون سایه را می گیرد.
سایه جعبه با box-shadow
ساده ترین حالت فقط افقی و عمودی است. مثل افتادن سایه کاغذ روی میز.
1) افقی و عمودی
در نبود رنگ، رنگِ متن فعلی استفاده می شود.
div {
box-shadow: 10px 10px;
}
2) افزودن رنگ سایه
با پارامتر رنگ، هاله مشخص تر می شود.
div {
box-shadow: 10px 10px lightblue;
}
3) محوی (Blur)
عدد بزرگ تر، سایه نرم تر و پخش تر می شود.
div {
box-shadow: 10px 10px 5px lightblue;
}
4) شعاع گسترش (Spread)
مقدار مثبت سایه را بزرگ تر می کند؛ مقدار منفی کوچک تر.
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
5) درون سایه (inset)
به جای بیرونِ جعبه، سایه داخل کادر می نشیند.
div {
box-shadow: 10px 10px 5px lightblue inset;
}
6) چند سایه همزمان
با کاما چند هاله بساز. مثل نورهای رنگیِ صحنه.
div {
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
ساخت کارت با سایه جعبه
می توان کارت های کاغذی نما ساخت. شبیه کارت نمره مدرسه.
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تمرینی بساز. - افقی و عمودی را تنظیم کن.
- بلر و رنگ را اضافه کن.
- در صورت نیاز spread یا inset بده.
- برای جلوه بیشتر چند سایه امتحان کن.
برای متن ها، صفحه افکت سایه را ببین. همچنین پس زمینه جذاب با گرادیان خطی می سازد.
جمع بندی سریع
- ترتیب: x، y، blur، spread، رنگ.
- کاما یعنی چند سایه همزمان.
- inset سایه را داخل کادر می آورد.
- spread اندازه سایه را کم وزیاد می کند.