آشنایی با خاصیت box-shadow در CSS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-22 15:17:17

خاصیت box-shadow یکی از خاصیت های جذاب برای زیباسازی عناصر طراحی سایت در استایل / CSS به شمار می رود که می تواند طراحی بی روح و خسته کننده را به یک طراحی جذاب و کاربرپسند تبدیل کند. انواع سایه ها و نوع و حالت آن در سبک های طراحی مختلف مثلا متریال یا فلت یا مدرن و ... متفاوت است اما خاصیت و دستور اولیه در همه یکسان است.

به طور خام و پیش فرض این خاصیت به همراه مقادیر مجاز اینگونه است:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

 

در ساده ترین حالت ممکن، یک سایه می تواند به این صورت باشد:

#talkina {
  box-shadow: 5px 10px;
}

 

شما می توانید با استفاده از قابلیت Inspect Element مرورگرتان، برای تولید سایه های جذاب تر استفاده کنید. به طور مثال یک سایه در طراحی متریال به این صورت کدنویسی می شود:

#talkina {
    border: 1px solid #f8f8f8;
    border-radius: 10px;
    padding: 10px;
    margin: 50px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

برای دیدن نمونه و پیش نمایش زنده کلیک کنید.