Html and Css & Jsآموزش: “این یه تکنیک جالب برای استفاده از box-shadow در CSS هست! 🎨 تکنیک لایه…”

این یه تکنیک جالب برای استفاده از box-shadow در CSS هست!

🎨 تکنیک لایه‌بندی Box Shadow
؛box-shadow در CSS می‌تونه لایه‌بندی بشه! یعنی می‌تونی چندین سایه روی هم قرار بدی تا جلوه‌های زیباتری بسازی.

چرا این تکنیک باحاله؟
• سایه واقعی‌تر - با لایه‌های مختلف
• مرز مجازی - بدون استفاده از border
• انعطاف‌پذیری - کنترل کامل روی ظاهر

📝 مثال کد

.box {
  width: 200px;
  height: 100px;
  background: #3498db;
  border-radius: 10px;
  
  /* لایه ۱: سایه اصلی */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2);
  
  /* لایه ۲: سایه دوم (پخش بیشتر) */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* لایه ۳: مرز مجازی */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(255, 255, 255, 0.5);
}

🔍 توضیح لایه‌ها
لایه ۱: سایه اصلی

0 4px 8px rgba(0, 0, 0, 0.2)

• 0: افقی (بدون جابجایی)
• 4px: عمودی (پایین)
• 8px: پخش (blur)
• rgba(0, 0, 0, 0.2): رنگ مشکی با شفافیت ۲۰%

لایه ۲: سایه دوم

0 8px 16px rgba(0, 0, 0, 0.1)

• پخش بیشتر برای عمق بیشتر
• شفافیت کمتر برای نرم‌تر شدن

لایه ۳: مرز مجازی

0 0 0 2px rgba(255, 255, 255, 0.5)

• 0 0 0: بدون جابجایی و blur
• 2px: ضخامت مرز
• rgba(255, 255, 255, 0.5): رنگ سفید با شفافیت ۵۰%

🎯 کاربردهای این تکنیک
۱. کارت‌های طراحی

.card {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

۲. دکمه‌های سه‌بعدی

.button {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

۳. کادر با مرز نرم

.container {
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

✅ مزایا :
• کنترل کامل روی ظاهر
• بدون اضافه کردن عناصر اضافی
• سازگاری بالا با مرورگرها

⚠️ ملاحظات
• بیشتر از ۳-۴ لایه ممکنه کند بشه
• موبایل - ممکنه تاثیر روی performance داشته باشه
• تست در مرورگرهای مختلف

🎨 ایده‌های خلاقانه
۱. سایه رنگی

.box {
  box-shadow: 
    0 0 0 2px #3498db,
    0 4px 8px rgba(52, 152, 219, 0.3);
}

۲. سایه چند رنگ

.box {
  box-shadow: 
    0 0 0 2px #e74c3c,
    0 0 0 4px #3498db,
    0 4px 8px rgba(0, 0, 0, 0.2);
}

۳. سایه داخلی (inset)

.box {
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

🔗 منابع بیشتر برای یادگیری
• MDN: box-shadow
• CSS-Tricks: Box Shadow
• CodePen: جستجوی "layered box shadow"

💎 @Htmlcss_channels | #HTML #css #JavaScript