box-shadow

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


box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
box-shadow: 2px 3px 10px 5px #f0f;

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

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

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

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

مثال:


div {
  box-shadow: 10px 10px 5px -5px #666;
}

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


div {
  box-shadow: inset 0 0 5px 3px #666;
}

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


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

از این قابلیت که هر عنصر می تواند چند سایه بگیرد می توان استفاده کرد و کارهای جالبی انجام داد به عنوان مثال:

 

See the Pen Single element cloud by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

همینطور آدم برفی زیر:

 

See the Pen SnowMan by Mojtaba Seyedi (@seyedi) on CodePen.


 

حتی کار box-shadow به اینجا ختم نمی شود و فردی در سایت گیتهاب کدی نوشته است که هر عکسی را تبدیل به CSS خالص می کند و این کار توسط ویژگی سایه صورت می گیرد. حتما سری به سایتش بزنید. به قول خود طرف دلیل ساخت این برنامه نمایش قدرت CSS است!

اگر گوشه های عنصری بوسیله ویژگی border-radius گرد شده باشد سایه آن عنصر نیز به همان صورت رسم خواهد شد.

دموی زیر را حتما به طور کامل بررسی کنید:

 

See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu (@haibnu) on CodePen.

 

پشتیبانی مرورگر ها

سوالت رو توی پنل بحث و گفتگو مطرح کن.

5 دیدگاه برای “box-shadow

  1. سلام قالب من هم مثل سایت شما که وقتی روش hover میکنیم یه باکس شدو زیرش میکشه اما تو قالب من باکس شدو تو موزیلا درسته اما تو کروم چن پیکسل بالا تره وقتی هم کروم رو درست میکنم موزیلا خراب میشه.اگه میشه جواب رو به ایمیلم بفرستید
    خیلی ممنون

  2. با سلام
    برای سایه، آیا فرقی میکنه که مثلا رنگ سایه را #ccc بدیم و یا rgba(0,0,0,0.15) ؟
    آیا یکی از این دو حالت، برتری ای دارند؟
    با تشکر

  3. سلام
    وقتی این نمونه نقاشی که با box-shadow درسته شده باز میکنم لپ تاب یکم کند میشه این عادیه؟
    https://codepen.io/tag/box-shadow/#
    + تو دوره صفحه آرایی ی اشاره ای به منابعی که transform یا transition ازسیستم استفاده میکنه کرده بودین اگه دراین باره مطالبی هست تو سایت لینکشو لطف میکنید بدید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *