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

Box Shadow چیه و چطور برای عناصر سایه بسازیم؟

با box-shadow می‌تونی به دور کادر یه عنصر، یک یا چند سایه اضافه کنی؛ مثلاً برای کارت محصول، دکمه یا پنل. ساختار معمولش اینه:

box-shadow: offset-x offset-y blur-radius spread-radius color;

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

دو مقدار اول یعنی X و Y لازمن. اگه Blur و Spread رو ننویسی، مقدارشون صفر حساب می‌شه. رنگ سایه رو هم می‌تونی در جای دیگه‌ای از دستور بنویسی؛ این فقط یه الگوی رایجه.

مثال:

.box {
        width: 200px;
        height: 100px;
        background-color: #eaf3fc;
        box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.3);
    }

Blur و Spread چه فرقی دارن؟

blur-radius لبه سایه رو نرم می‌کنه، ولی spread-radius اندازه محدوده سایه رو تغییر می‌ده. مثلاً اگه Blur رو صفر و Spread رو ۶ پیکسل بذاری، یه حاشیه سایه‌مانند با لبه تیز می‌بینی.

/* سایه نرم */
    .soft { box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .18); }
    
    /* سایه با گسترش مثبت */
    .wide { box-shadow: 0 0 0 6px rgba(0, 0, 0, .18); }
    
    /* سایه با گسترش منفی */
    .tight { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .18); }

برای دیدن جزئیات بیشتر، مستندات box-shadow در MDN رو ببین.

با ابزار آنلاین، سایه دلخواهت رو بساز

اسلایدرها رو جابه‌جا کن تا تغییر سایه رو همون لحظه ببینی. می‌تونی سایه داخلی بسازی، چند لایه سایه روی هم بذاری و رنگ و تیرگی هر لایه رو جدا تنظیم کنی. در آخر هم کد CSS رو کپی کن و توی پروژه خودت استفاده کن.

چطور به نوشته‌ها سایه بدیم؟ (Text Shadow)

اگه بخوای خود حروف یه نوشته سایه داشته باشن، از text-shadow استفاده کن. این ویژگی برخلاف Box Shadow به کادر عنصر کاری نداره. شکل نوشتنش اینه:

text-shadow: offset-x offset-y blur-radius color;

• offset-x و offset-y: فاصله سایه نوشته در جهت افقی و عمودی.
• blur-radius: میزان محوشدن سایه نوشته؛ مقدار منفی نمی‌پذیره.
• color: رنگ سایه نوشته.

مثال:

.text {
        font-size: 24px;
        color: black;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }

چطور چند سایه روی یه نوشته بذاریم؟

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

.glow-title {
        color: #ffffff;
        text-shadow: 0 0 4px #2563eb, 0 0 12px #1d4ed8;
    }

مرجع: آموزش و مشخصات text-shadow در MDN.

سایه داخلی (Inset) چه کاری می‌کنه؟

فرض کن می‌خوای یه کادر به‌جای برجسته‌بودن، کمی فرورفته به نظر بیاد. کافیه کلمه inset رو به box-shadow اضافه کنی.

مثال:

.box {
        width: 200px;
        height: 100px;
        background-color: lightgray;
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

چطور چند سایه روی یه عنصر بذاریم؟

می‌تونی چند سایه رو با کاما از هم جدا کنی. سایه اول در ترتیب رسم، بالاتر از سایه‌های بعدی قرار می‌گیره.

مثال:

.box {
        width: 200px;
        height: 100px;
        background-color: white;
        box-shadow: 5px 5px 10px gray, -5px -5px 10px lightgray;
    }

اینجا دو سایه از دو جهت مختلف داریم. برای ساخت نمونه‌های چندلایه، دکمه «افزودن سایه» توی ابزار رو امتحان کن.

تغییر سایه وقتی ماوس روی دکمه می‌ره

می‌تونی کاری کنی وقتی ماوس روی دکمه می‌ره، سایه‌اش تغییر کنه. برای کسی که با کیبورد کار می‌کنه هم بهتره حالت فوکوس مشخص باشه.

مثال:

.button {
        width: 100px;
        height: 50px;
        background-color: #2086c8;
        color: white;
        box-shadow: 3px 3px 5px black;
        transition: box-shadow 0.3s;
    }
    
    .button:hover {
        box-shadow: 6px 6px 10px black;
    }
    
    .button:focus-visible {
        outline: 3px solid #f59e0b;
        outline-offset: 3px;
    }
    
    @media (prefers-reduced-motion: reduce) {
        .button { transition: none; }
    }

Box Shadow و Drop Shadow چه فرقی دارن؟

box-shadow بر اساس شکل کادر عنصر سایه می‌سازه؛ اما filter: drop-shadow() می‌تونه دور بخش‌های غیرشفاف یه تصویر PNG یا SVG سایه بندازه. اگه مثلاً لوگوت پس‌زمینه شفاف داره، این تفاوت خیلی به کار میاد. Drop Shadow هم Spread و Inset نداره.

.logo {
        filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.3));
    }

برای توضیح بیشتر، مستندات drop-shadow در MDN رو ببین.

این اشتباه‌ها رو موقع سایه‌دادن انجام نده

• استفاده از Blur منفی: Blur مقدار منفی نمی‌پذیره.
• اشتباه‌گرفتن Spread و Blur: Spread محدوده سایه رو تغییر می‌ده؛ Blur لبه‌اش رو نرم می‌کنه.
• سایه بسیار تیره برای همه کارت‌ها: سایه خیلی تیره ممکنه باعث بشه همه کارت‌ها بیش از حد برجسته به نظر برسن.
• نادیده‌گرفتن پس‌زمینه: یه سایه ثابت روی زمینه روشن و تیره لزوماً یه ظاهر یکسان نداره.
• فرض اینکه سایه در چیدمان فضا می‌گیرد: سایه فضایی توی چیدمان نمی‌گیره؛ اگر والد overflow: hidden داشته باشه ممکنه بریده بشه.
• استفاده از Text Shadow به‌جای کنتراست مناسب: نوشته باید حتی بدون سایه هم خوانا باشه.

یه مثال واقعی: کارت محصول با سایه نرم

فرض کن می‌خوای یه کارت محصول روی پس‌زمینه سایت بهتر دیده بشه، ولی ظاهرش شلوغ نشه. این نمونه رو ببین: سایه ملایم زیر کارت، بدون Border ضخیم، مرزش رو از پس‌زمینه جدا می‌کنه. ماوس رو روی کارت ببر تا سایه کمی پررنگ‌تر بشه.

کد اصلی این سایه رو می‌تونی داخل ابزار بالا هم بسازی. دو لایه سایه با تیرگی کم انتخاب کن تا کارت از پس‌زمینه جدا بشه، بدون اینکه ظاهرش سنگین بشه.

.product-card {
      border-radius: 18px;
      box-shadow: 0 10px 30px -8px rgba(25,60,100,.19),
                  0 3px 9px rgba(25,60,100,.06);
      transition: box-shadow .25s ease;
    }
    .product-card:hover {
      box-shadow: 0 22px 44px -13px rgba(25,60,100,.30),
                  0 5px 14px rgba(25,60,100,.08);
    }

جمع‌بندی

برای سایه کارت و دکمه از box-shadow استفاده کن، برای نوشته از text-shadow و برای تصویرهای شفاف از drop-shadow(). حالا با ابزار بالا چند حالت بساز، کدش رو کپی کن و نتیجه رو توی یه پروژه واقعی امتحان کن.