تفاوت بین box-shadow و drop-shadow در CSS

سلام به رفیق و همراه همیشگی رایا وردپرسی خودم💗 – تفاوت بین box-shadow و drop-shadow در CSS

تو دسته‌بندی جدید سایت به نام ترفندها و نکات، قراره یه سری چیز میزای ریز و درشت و حسابی کاربردی از دنیای طراحی وب رو بهت بگم که گره‌های کارت رو باز می‌کنه و کمکت می‌کنه مثل یه متخصص واقعی عمل کنی. پس اگه میخوای دانش طراحی سایتت رو ببری بالا، حتماً مطالب این دسته‌بندی جدید رو هم مثل بقیه بخش‌های رایا وردپرس دنبال کن. قول می‌دم چیزی به اطلاعاتت اضافه شه که به کارت بیاد. 🙂 امیدوارم این بخش جدید هم برات کلی مفید و هیجان‌انگیز باشه!

خب، دیگه مقدمه‌چینی بسه، بریم سر وقت موضوع خفن امروز! ✨ تا حالا شده به سایت‌هایی نگاه کنی که المان‌هاش انگار از صفحه زدن بیرون یا یه عمق باحال دارن؟ یا شاید دیدی یه لوگو یا متن سایه داره که قشنگ شکل خودش رو دنبال کرده؟ آره، حدست درسته! پای سایه‌ها در میونه😁سایه‌ها یکی از اون ترفندهای جادویی CSS هستن که اگه درست ازشون استفاده کنی، می‌تونن ظاهر سایتت رو زمین تا آسمون عوض کنن و حسابی حرفه‌ای و چشم‌نوازش کنن.

توی دنیای CSS، دوتا بازیگر اصلی داریم که در بحث سایه کاربر دارن اما خیلی وقتا طراحا این دو تا رو با هم قاطی میکنن: box-shadow و drop-shadow. 🤔 شاید به نظر بیاد کارشون یکیه، اما این دوتا رفیق کلی تفاوت کلیدی و زیرپوستی دارن که دونستنشون برای هر وب دیزاینر یا فرانت‌اند کاری واجبه!

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

×

گوگل اعداد ابزارهای تست سرعت سایت رو نخورید. تجربه کاربری مهمه!

مطالعه

نگران نباش! قراره توی این مقاله جوری برات توضیح بدم که دیگه هیچ ابهامی نمونه و دقیقاً بدونی کی باید از کدوم استفاده کنی تا خفن‌ترین افکت‌ها رو بسازی و کارت رو حرفه‌ای‌تر از قبل کنی. آماده‌ای که بریم تو دل سایه‌ها؟ بزن بریم! 👇

🧐 box-shadow چیه؟

اگه تو دنیای CSS تازه‌کار نیستی، احتمالاً اسم box-shadow رو بارها شنیدی و ازش استفاده کردی. این خاصیت یکی از پایه‌های ثابت برای اضافه کردن سایه به المان‌های بلوکی (Block elements) مثل div یا دکمه‌ها (button)، عکس‌ها (img) و خلاصه هر چیزی که یه جعبه مستطیلی دورش داره، هست.

box-shadow دقیقاً چه داستانی داره؟ ماجراش خیلی روراسته! box-shadow میاد و دقیقاً دور تا دور جعبه‌ی (Box Model) المان مورد نظرت یه سایه اضافه می‌کنه. این جعبه همون محدوده مستطیلیه که المانت اشغال کرده و شامل Margin و Border و Padding میشه. مهم‌ترین نکته‌اش اینه که box-shadow به محتوای داخل جعبه یا شکل و شمایل عجیب غریبش کاری نداره! فقط مرزهای اون جعبه مستطیلی براش مهمه و سایه رو بر اساس اون میندازه. ساده و سرراست! 😎

ساختار box-shadow به صورت زیره:

×

گوگل اعداد ابزارهای تست سرعت سایت رو نخورید. تجربه کاربری مهمه!

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• offset-x: فاصله سایه از المان به صورت افقی (راست یا چپ)
• offset-y: فاصله سایه از المان به صورت عمودی (بالا یا پایین)
• blur-radius: چقدر سایه محو بشه
• spread-radius: سایه چقدر پخش بشه
• color: رنگ سایه (مثلاً مشکی، خاکستری یا هر چی دلت بخواد)

یه مثال ساده: فرض کن می‌خوای به یه المان جعبه سایه بدی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این کد یه سایه می‌سازه که 5 پیکسل به سمت راست و 5 پیکسل به سمت پایین می‌ره، 10 پیکسل محو می‌شه و رنگش سیاه با شفافیت 50٪ هست. ساده و شیک! 😎

🧐 drop-shadow چیه؟

حالا بریم سراغ drop-shadow. این یکی یه کم متفاوت‌تره و بیشتر تو بخش فیلترهای CSS استفاده می‌شه. بزرگ‌ترین فرقش اینه که می‌تونی به المان‌هایی که شکلشون مستطیلی نیست (مثل دایره، تصاویر با شفافیت یا متون) سایه بدی. یعنی سایه رو بر اساس شکل واقعی المان می‌سازه، نه فقط یه مستطیل ساده. ✂️✨ اینجاست که جادوی فیلترها شروع میشه!

drop-shadow دقیقاً چه داستانی داره؟ این فیلتر میاد و فقط پیکسل‌های قابل دیدن و غیرشفاف المانت رو پیدا می‌کنه و سایه رو می‌چسبونه به همون‌ها. فکر کن یه عکس لوگو داری که پس‌زمینه‌اش شفافه (مثلاً یه فایل PNG)، drop-shadow فقط به خود شکل لوگو سایه میده، نه به اون کادر مستطیلی بزرگ عکس! برای متن‌ها هم همینه، سایه رو دور تک‌تک حروف میندازه .

×

چرا نباید کد CSS رو در بخش سفارشی المنتور قرار بدیم؟

مطالعه

ساختار drop-shadow به صورت زیره:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• offset-x: فاصله افقی سایه
• offset-y: فاصله عمودی سایه
• blur-radius: میزان محو شدن سایه
• color: رنگ سایه

یه مثال ساده: فرض کن یه به متن داری مه میخای یه سایه دورش بندازی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

دیدی؟ drop-shadow اینجا خیلی بهتر از box-shadow عمل میکنه، چون box-shadow به جای اینکه به شکل حروف سایه بده، به کل کادر مستطیلی که متن توش قرار داره سایه میده و معمولاً ظاهر قشنگی پیدا نمیکنه.

ببین الان همین مثال بالا رو اگه برای متن box-shadow رو در نظر بگیرم میاد یه باکس مستطیلی سایه میده:

×

چرا نباید کد CSS رو در بخش سفارشی المنتور قرار بدیم؟

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

تفاوت‌های اصلی و کلیدی box-shadow و drop-shadow: نبرد سایه‌ها 😁

خب، حالا که هر دوتا رو شناختی، بیا یه جمع‌بندی خفن از فرق‌های اصلیشون داشته باشیم تا دیگه هیچوقت این دوتا رو با هم قاطی نکنی و بدونی کی باید از کدوم غول سایه‌ساز CSS استفاده کنی:

1. چی رو سایه می‌دن؟
   • box-shadow: فقط و فقط جعبه (Box Model) المان رو سایه می‌ده. شکل محتوا مهم نیست. 📦
   • drop-shadow: محتوای قابل دیدن و پیکسل‌های غیرشفاف المان رو سایه می‌ده. به شفافیت حساسه و شکل رو دنبال می‌کنه.
2. نحوه اعمال در CSS
   • box-shadow: یه خاصیت مجزا توی CSS هست که مستقیماً به المان میدیش.
   • drop-shadow: بخشی از فیلتر filter در CSS هست. 🛠️
3. چه پارامترهایی دارن؟
   • box-shadow: دستت حسابی بازه! offset-x, offset-y, blur, spread, color و inset رو داره. ✅
   • drop-shadow: یه کم محدودتره. فقط offset-x, offset-y, blur و color رو داره. خبری از spread و inset نیست. ❌
4. برای چی عالین؟
   • box-shadow: برای سایه دادن به کارت‌ها، پنل‌ها، دکمه‌ها، کادرهای متنی و خلاصه هر المان مستطیلی یا با گوشه‌های گرد که میخوای یه عمق کلی بهش بدی.
   • drop-shadow: برای سایه دادن به متن‌ها، لوگوهای شفاف (PNG, SVG)، المان‌هایی با شکل‌های پیچیده و هرجایی که میخوای سایه دقیقاً لبه‌های محتوا رو دنبال کنه.

✨ نتیجه‌گیری : کدوم رو انتخاب کنیم؟ بستگی داره چی بخوای بسازی!

رسیدیم به پایان این مقاله هیجان‌انگیز! 🎉 دیگه الان تو یه متخصص کوچولو تو زمینه سایه‌های CSS هستی و فرق box-shadow و drop-shadow رو مثل کف دستت می‌شناسی.

یادت باشه، این دوتا دشمن هم نیستن! هر کدومشون یه ابزار فوق‌العاده‌ان که برای یه کار خاص عالی هستن. box-shadow رفیق همیشگی جعبه‌هاست 📦 و کارش رو هم عالی بلده. drop-shadow هم جادوگر سایه برای متن‌ها و شکل‌های خاصه 👻. انتخاب اینکه کدوم رو استفاده کنی، کاملاً بستگی به این داره که چه افکتی رو میخوای روی چه المانی پیاده کنی.

حالا که مسلح به این دانش شدی، وقتشه بری و توی پروژه‌های خودت حسابی با این دوتا بازی کنی! پارامترهاشون رو کم و زیاد کن، رنگ‌های مختلف رو امتحان کن و ببین چه سایه‌های خلاقانه‌ای می‌تونی بسازی. مطمئن باش با استفاده درست از سایه‌ها، ظاهر سایتت رو چند لول میبری بالاتر! 🚀😊

×

گوگل اعداد ابزارهای تست سرعت سایت رو نخورید. تجربه کاربری مهمه!

مطالعه