از ویژگی 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.
سلام قالب من هم مثل سایت شما که وقتی روش hover میکنیم یه باکس شدو زیرش میکشه اما تو قالب من باکس شدو تو موزیلا درسته اما تو کروم چن پیکسل بالا تره وقتی هم کروم رو درست میکنم موزیلا خراب میشه.اگه میشه جواب رو به ایمیلم بفرستید
خیلی ممنون
سلام دوست عزیز افزونه CSS AUTO PREFIX رو نصب کنید در ادیتوری که کد میزنید
با سلام
برای سایه، آیا فرقی میکنه که مثلا رنگ سایه را #ccc بدیم و یا rgba(0,0,0,0.15) ؟
آیا یکی از این دو حالت، برتری ای دارند؟
با تشکر
سلام. جایی ندیدم که این دو تا رو از نظر کارایی با هم مقایسه کنه. نمی دونم راستش.
سلام ، من rgba رو امتحان کردم کار نکرد ، به نظرم #ccc بهتر باشه
با سلام ، خیلی خوب آموزش دادین ، تشکر
سلام
وقتی این نمونه نقاشی که با box-shadow درسته شده باز میکنم لپ تاب یکم کند میشه این عادیه؟
https://codepen.io/tag/box-shadow/#
+ تو دوره صفحه آرایی ی اشاره ای به منابعی که transform یا transition ازسیستم استفاده میکنه کرده بودین اگه دراین باره مطالبی هست تو سایت لینکشو لطف میکنید بدید
سلام چرا سایه ای که میخوام اعمال نمیشه همین کد دستور هم نوشتم
سلام، نمونه کدتون رو بزارید، یا دمو توی سایت codepen.io درست کنید و لینک بدید.
Box-shadow: 1px 1px 4px
سلام این هست کدی ک مینویسم اما اجرا نمیشه اصلا # میزنم واسه انتخاب رنگ بالا نمیاد
آقا دمت گرم عالی بود .کلی استفاده کردم
هنوز تو هضم این ابره مونده بودم که شما از آدم برفی و سایت img2css رونمایی کردین!
ممنون کمک کرد بهم
متشکرم من مفهوم spread را نمی دانستم که از نوشته شما متوجه شدم یعنی اندازه سایه.
ممنون از کمک مفیدتان
سلام .کدها رو تو براکت می نویسم اجراش زمین تا اسمان فرق می کنه. مثال 7 تا باکس رو منظورم هستش.
سلام، نباید بزارید توی براکت، سینتکس سایه بدون براکت هستش.
بسیار خلاصه و مفید.ممنون ازتون
سلام
دمت گرم خیلی خوب توضیح دادی
سلام معمولا ی چیز رو که نمیدونم سرچ میکنم و یاد میگیرمو بیخیال میشم، ولی گفتم چون این مطلب رو خوب توضیح دادی واست حتما کامنت بذارم دمت گرم.
خیلی خوب توضیح دادید مرسی