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