تا اینجا با Border و border-radius آشنا شدیم و توانستیم ظاهر کلی عناصر را کنترل کنیم. اما اگر بخواهیم یک کارت، دکمه، تصویر یا بخش خاصی از صفحه از پس‌زمینه جدا به نظر برسد، فقط Border کافی نیست.

یکی از مهم‌ترین ابزارهای CSS برای ایجاد عمق بصری، سایه یا Shadow است.

با استفاده از Shadow می‌توانیم یک کارت ساده را به یک کامپوننت مدرن تبدیل کنیم، برای دکمه‌ها حالت برجسته ایجاد کنیم، برای عنوان‌ها جلوه بصری بسازیم و حتی با ترکیب چند سایه، طراحی‌های پیچیده‌تری ایجاد کنیم.

در CSS دو ویژگی اصلی برای این کار داریم:

box-shadow

برای ایجاد سایه روی محدوده و جعبه یک عنصر و:

text-shadow

برای ایجاد سایه روی متن استفاده می‌شود. box-shadow می‌تواند چند سایه را به صورت هم‌زمان دریافت کند و text-shadow نیز از چند سایه پشتیبانی می‌کند.

در این مقاله ابتدا box-shadow را به‌صورت کامل بررسی می‌کنیم، سپس سراغ text-shadow می‌رویم و در پایان یک کارت سرویس مدرن طراحی خواهیم کرد.

Box Shadow چیست؟

ویژگی:

box-shadow

برای ایجاد سایه در اطراف جعبه یک عنصر استفاده می‌شود.

ساده‌ترین مثال:

.card {
    box-shadow: 5px 5px 10px #999;
}

در اینجا کارت یک سایه خواهد داشت که به سمت پایین و راست آن قرار می‌گیرد.

به صورت کلی، box-shadow می‌تواند شامل موارد زیر باشد:

X Offset
Y Offset
Blur
Spread
Color
Inset

چهار مقدار عددی اصلی به ترتیب برای جابه‌جایی افقی، جابه‌جایی عمودی، میزان محوشدگی و Spread استفاده می‌شوند. inset نیز سایه را به داخل عنصر منتقل می‌کند.

ساختار Box Shadow

یک نمونه کامل:

.card {
    box-shadow: 10px 15px 20px 5px rgb(0 0 0 / 20%);
}

ساختار را می‌توان این‌گونه تصور کرد:

box-shadow:
    X
    Y
    Blur
    Spread
    Color;

بنابراین:

box-shadow: 10px 15px 20px 5px rgb(0 0 0 / 20%);

یعنی:

10px  → جابه‌جایی افقی
15px  → جابه‌جایی عمودی
20px  → میزان Blur
5px   → Spread
20%    → میزان شفافیت رنگ

X Offset

اولین مقدار مربوط به جابه‌جایی افقی سایه است.

مثلاً:

.card {
    box-shadow: 20px 0 10px rgb(0 0 0 / 20%);
}

سایه به سمت راست حرکت می‌کند.

اگر مقدار منفی باشد:

.card {
    box-shadow: -20px 0 10px rgb(0 0 0 / 20%);
}

سایه به سمت چپ حرکت خواهد کرد.

به صورت ساده:

مثبت → راست
منفی → چپ

Y Offset

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

مثلاً:

.card {
    box-shadow: 0 20px 10px rgb(0 0 0 / 20%);
}

سایه به سمت پایین می‌رود.

اگر مقدار منفی باشد:

.card {
    box-shadow: 0 -20px 10px rgb(0 0 0 / 20%);
}

سایه به سمت بالا حرکت می‌کند.

بنابراین:

X مثبت → راست
X منفی → چپ

Y مثبت → پایین
Y منفی → بالا

Blur چیست؟

سومین مقدار مربوط به میزان محوشدگی سایه است.

مثلاً:

.card {
    box-shadow: 0 10px 5px #999;
}

سایه نسبتاً مشخص است.

اما:

.card {
    box-shadow: 0 10px 30px #999;
}

سایه نرم‌تر و پخش‌تر می‌شود.

به صورت کلی:

Blur کم   → سایه واضح‌تر
Blur زیاد → سایه نرم‌تر

مثلاً:

.shadow-small {
    box-shadow: 0 5px 5px rgb(0 0 0 / 20%);
}

.shadow-large {
    box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
}

Spread چیست؟

چهارمین مقدار، spread-radius است.

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

مثلاً:

.card {
    box-shadow: 0 10px 20px 5px rgb(0 0 0 / 20%);
}

در اینجا:

0px  → X
10px → Y
20px → Blur
5px  → Spread

اگر Spread را افزایش دهیم، محدوده سایه بزرگ‌تر می‌شود.

مثلاً:

.card {
    box-shadow: 0 0 20px 10px rgb(0 0 0 / 15%);
}

Spread می‌تواند حتی منفی باشد:

.card {
    box-shadow: 0 10px 20px -5px rgb(0 0 0 / 25%);
}

در این حالت سایه جمع‌تر خواهد شد.

رنگ Shadow

رنگ سایه را می‌توان با روش‌های مختلف تعیین کرد.

مثلاً:

.card {
    box-shadow: 0 10px 20px black;
}

اما در طراحی مدرن معمولاً استفاده از رنگ کاملاً مشکی مناسب نیست.

بهتر است از رنگ نیمه‌شفاف استفاده کنیم:

.card {
    box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}

این روش معمولاً ظاهر طبیعی‌تری ایجاد می‌کند.

سایه‌های مدرن

یکی از الگوهای بسیار رایج:

.card {
    box-shadow:
        0 10px 30px rgb(0 0 0 / 8%);
}

یا:

.card {
    box-shadow:
        0 20px 40px rgb(0 0 0 / 10%);
}

برای یک کارت معمولی می‌توانیم از:

.card {
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
}

استفاده کنیم.

ترکیب این سه ویژگی:

Border
Border Radius
Box Shadow

یکی از الگوهای رایج در طراحی Cardهای مدرن است.

Box Shadow و Border Radius

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

مثلاً:

.card {
    border-radius: 20px;

    box-shadow:
        0 15px 35px rgb(0 0 0 / 12%);
}

اگر Radius را حذف کنیم:

.card {
    box-shadow:
        0 15px 35px rgb(0 0 0 / 12%);
}

سایه گوشه‌های تیزتری خواهد داشت.

Box Shadow روی دکمه

Shadow فقط برای کارت نیست.

مثلاً:

.button {
    padding: 12px 24px;

    border: none;
    border-radius: 999px;

    background: #ff7a00;
    color: white;

    box-shadow:
        0 8px 20px rgb(255 122 0 / 30%);
}

حالا دکمه دارای یک هاله رنگی خواهد بود.

Shadow در حالت Hover

یکی از کاربردهای مهم Shadow در تعاملات کاربر است.

.card {
    transition: 0.3s;
    box-shadow:
        0 5px 20px rgb(0 0 0 / 8%);
}

.card:hover {
    box-shadow:
        0 15px 40px rgb(0 0 0 / 15%);
}

در حالت عادی:

سایه کم

و هنگام Hover:

سایه بیشتر

در نتیجه عنصر از نظر بصری به سمت کاربر نزدیک‌تر به نظر می‌رسد.

Shadow بدون جابه‌جایی

اگر بخواهیم سایه از تمام جهات پخش شود:

.card {
    box-shadow:
        0 0 20px rgb(0 0 0 / 15%);
}

اینجا:

X = 0
Y = 0
Blur = 20px

بنابراین سایه تقریباً در تمام اطراف عنصر دیده می‌شود.

ایجاد Border با Box Shadow

جالب است بدانید می‌توان با Shadow افکتی شبیه Border ایجاد کرد:

.box {
    box-shadow:
        0 0 0 2px #ff7a00;
}

در این حالت:

X = 0
Y = 0
Blur = 0
Spread = 2px

و یک محدوده رنگی اطراف عنصر ایجاد می‌شود.

MDN نیز نشان می‌دهد که Shadow با Offset و Blur صفر می‌تواند برای ایجاد افکت مشابه Outline یا Border استفاده شود.

Inset Shadow

یکی از قابلیت‌های مهم box-shadow، کلمه کلیدی:

inset

است.

بدون inset:

.card {
    box-shadow:
        0 10px 20px rgb(0 0 0 / 20%);
}

سایه بیرون عنصر قرار می‌گیرد.

اما:

.card {
    box-shadow:
        inset 0 10px 20px rgb(0 0 0 / 20%);
}

سایه به داخل عنصر منتقل می‌شود.

کاربرد Inset

می‌توانیم برای ایجاد حس فرورفتگی استفاده کنیم:

.input {
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 12px;

    box-shadow:
        inset 0 2px 6px rgb(0 0 0 / 8%);
}

یا برای یک دکمه:

.button:active {
    box-shadow:
        inset 0 3px 8px rgb(0 0 0 / 25%);
}

در این حالت هنگام فشرده‌شدن دکمه، حس فرو رفتن آن ایجاد می‌شود.

چند Shadow هم‌زمان

یکی از قابلیت‌های قدرتمند box-shadow امکان استفاده از چند سایه است.

برای این کار Shadowها را با کاما جدا می‌کنیم:

.card {
    box-shadow:
        0 5px 15px rgb(0 0 0 / 10%),
        0 20px 40px rgb(0 0 0 / 8%);
}

در CSS می‌توان چند Shadow را با کاما مشخص کرد. ترتیب Shadowها نیز مهم است و اولین Shadow در لایه بالاتری نسبت به Shadowهای بعدی قرار می‌گیرد.

یک Shadow نرم و حرفه‌ای

می‌توانیم چند Shadow را برای ایجاد عمق بیشتر ترکیب کنیم:

.card {
    box-shadow:
        0 2px 5px rgb(0 0 0 / 5%),
        0 10px 25px rgb(0 0 0 / 8%),
        0 25px 50px rgb(0 0 0 / 5%);
}

این روش می‌تواند ظاهر بسیار نرم‌تری نسبت به یک Shadow بزرگ ایجاد کند.

البته نباید در استفاده از آن زیاده‌روی کنیم.

Text Shadow چیست؟

تا اینجا Shadow مربوط به جعبه عناصر بود.

اگر بخواهیم خود متن سایه داشته باشد، از:

text-shadow

استفاده می‌کنیم.

مثلاً:

h1 {
    text-shadow:
        2px 2px 5px rgb(0 0 0 / 30%);
}

text-shadow نیز از Offset افقی، Offset عمودی، Blur و رنگ پشتیبانی می‌کند.

ساختار Text Shadow

مثال:

h1 {
    text-shadow:
        3px 4px 6px rgb(0 0 0 / 30%);
}

ساختار:

text-shadow:
    X
    Y
    Blur
    Color;

مثلاً:

3px  → حرکت افقی
4px  → حرکت عمودی
6px  → Blur
30%  → شفافیت رنگ

Shadow متن بدون Blur

می‌توانیم Blur را صفر قرار دهیم:

.title {
    text-shadow:
        3px 3px 0 #999;
}

در این حالت یک نسخه جابه‌جا شده از متن ایجاد می‌شود.

این تکنیک برای طراحی‌های گرافیکی و Typography خاص می‌تواند کاربرد داشته باشد.

Text Shadow ساده

مثلاً:

.hero-title {
    color: white;

    text-shadow:
        0 3px 10px rgb(0 0 0 / 35%);
}

این حالت برای متن روی تصویر بسیار کاربردی است.

اگر متن روی Background شلوغ قرار گرفته باشد، Shadow می‌تواند خوانایی آن را بهتر کند؛ البته باید کنتراست نهایی را بررسی کنیم و از Shadow بیش از حد استفاده نکنیم.

Text Shadow رنگی

Shadow الزاماً مشکی نیست.

مثلاً:

.title {
    color: white;

    text-shadow:
        0 0 20px #ff7a00;
}

این حالت یک Glow نارنجی ایجاد می‌کند.

مثلاً:

.title {
    color: white;

    text-shadow:
        0 0 10px #00c853,
        0 0 30px #00c853;
}

چند Shadow می‌توانند یکدیگر را تقویت کنند.

ایجاد Glow برای متن

یک نمونه:

.glow {
    color: white;

    text-shadow:
        0 0 5px #fff,
        0 0 10px #ff7a00,
        0 0 20px #ff7a00,
        0 0 40px #ff7a00;
}

این تکنیک می‌تواند برای:

• Hero Section

• Landing Page

• Banner

• صفحات بازی

• طراحی‌های Cyberpunk

• عناوین گرافیکی

استفاده شود.

اما برای متن‌های معمولی سایت، استفاده زیاد از Glow معمولاً باعث شلوغی طراحی می‌شود.

چند Text Shadow

همانند box-shadow می‌توانیم چند Shadow داشته باشیم:

h1 {
    text-shadow:
        1px 1px 2px black,
        0 0 10px orange,
        0 0 20px orange;
}

Shadowها با کاما از هم جدا می‌شوند.

تفاوت Box Shadow و Text Shadow

تفاوت اصلی بسیار ساده است:

Box Shadow

روی محدوده عنصر اعمال می‌شود:

.card {
    box-shadow:
        0 10px 30px rgb(0 0 0 / 10%);
}

Text Shadow

روی خود متن اعمال می‌شود:

h1 {
    text-shadow:
        0 3px 10px rgb(0 0 0 / 30%);
}

بنابراین:

box-shadow
     ↓
Box / Element

text-shadow
     ↓
Text

اگر یک کارت و متن داخل آن داشته باشیم، می‌توانیم هر دو را هم‌زمان استفاده کنیم.

ترکیب Box Shadow و Text Shadow

مثلاً:

.card {
    box-shadow:
        0 15px 40px rgb(0 0 0 / 10%);
}

.card h2 {
    text-shadow:
        0 2px 5px rgb(0 0 0 / 15%);
}

در این حالت:

• کارت عمق پیدا می‌کند.

• عنوان نیز Shadow ظریفی خواهد داشت.

Shadow و Transition

برای ایجاد Animation نرم هنگام Hover می‌توانیم Shadow را با transition ترکیب کنیم:

.card {
    transition:
        box-shadow 0.3s ease;
    
    box-shadow:
        0 5px 20px rgb(0 0 0 / 8%);
}

.card:hover {
    box-shadow:
        0 20px 50px rgb(0 0 0 / 15%);
}

در نتیجه Shadow به صورت ناگهانی تغییر نمی‌کند.

در طراحی‌های مدرن این تکنیک بسیار کاربردی است.

یک Hover حرفه‌ای‌تر

می‌توانیم کمی حرکت نیز اضافه کنیم:

.card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    box-shadow:
        0 5px 20px rgb(0 0 0 / 8%);
}

.card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgb(0 0 0 / 15%);
}

حالا هنگام Hover:

کارت کمی بالا می‌رود
        +
Shadow بزرگ‌تر می‌شود

این ترکیب باعث ایجاد حس عمق بسیار خوبی می‌شود.

پروژه عملی: طراحی کارت سرویس مدرن

حالا یک کارت کامل طراحی کنیم.

HTML

<div class="service-card">

    <div class="service-icon">
        ⚡
    </div>

    <h2>
        طراحی سایت
    </h2>

    <p>
        طراحی سایت مدرن، سریع و Responsive
        برای کسب‌وکار شما.
    </p>

    <div class="service-footer">

        <span class="price">
            از ۷۵۰ هزار تومان
        </span>

        <button>
            مشاهده
        </button>

    </div>

</div>

CSS پایه

.service-card {
    width: 340px;
    padding: 30px;

    background: white;

    border: 1px solid #eee;
    border-radius: 24px;
}

اضافه کردن Shadow

.service-card {
    width: 340px;
    padding: 30px;

    background: white;

    border: 1px solid #eee;
    border-radius: 24px;

    box-shadow:
        0 10px 30px rgb(0 0 0 / 8%);
}

طراحی آیکون

.service-icon {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background: #ff7a00;
    color: white;

    font-size: 28px;

    box-shadow:
        0 10px 25px rgb(255 122 0 / 25%);
}

طراحی عنوان

.service-card h2 {
    margin-top: 24px;

    color: #222;

    text-shadow:
        0 2px 4px rgb(0 0 0 / 8%);
}

طراحی متن

.service-card p {
    line-height: 1.8;
    color: #666;
}

طراحی Footer

.service-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 25px;
}

طراحی قیمت

.price {
    font-weight: bold;
    color: #222;
}

طراحی Button

.service-footer button {
    padding: 10px 18px;

    border: none;
    border-radius: 999px;

    background: #ff7a00;
    color: white;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgb(255 122 0 / 25%);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

Hover Button

.service-footer button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgb(255 122 0 / 35%);
}

Hover کارت

حالا خود کارت را نیز Interactive می‌کنیم:

.service-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    box-shadow:
        0 10px 30px rgb(0 0 0 / 8%);
}

.service-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px rgb(0 0 0 / 14%);
}

حالا کارت هنگام Hover:

↑ کمی بالا می‌رود

+
    
Shadow بزرگ‌تر و نرم‌تر می‌شود

و این دقیقاً همان نوع ترکیبی است که در رابط‌های کاربری مدرن زیاد مشاهده می‌کنیم.

یک نکته مهم درباره Shadow و Layout

یکی از نکات مهم این است که box-shadow به خودی خود اندازه Box Model عنصر را تغییر نمی‌دهد؛ یعنی Shadow فضای واقعی جدیدی مانند Margin یا Border به عنصر اضافه نمی‌کند.

بنابراین مثلاً:

.card {
    width: 300px;
    box-shadow:
        0 20px 40px rgb(0 0 0 / 15%);
}

عرض Box همچنان همان 300px است.

Shadow صرفاً در اطراف آن نمایش داده می‌شود.

اشتباهات رایج در استفاده از Shadow

اشتباه اول: Shadow خیلی تیره

مثلاً:

.card {
    box-shadow:
        0 20px 30px black;
}

این Shadow معمولاً بسیار سنگین است.

بهتر است از شفافیت استفاده کنیم:

.card {
    box-shadow:
        0 20px 30px rgb(0 0 0 / 12%);
}

اشتباه دوم: Blur بیش از حد

مثلاً:

.card {
    box-shadow:
        0 0 100px rgb(0 0 0 / 30%);
}

ممکن است باعث شود عناصر اطراف نیز تحت تأثیر قرار بگیرند.

Shadow باید متناسب با طراحی باشد.

اشتباه سوم: استفاده از Shadow برای همه عناصر

اگر تمام عناصر صفحه Shadow داشته باشند:

Card
Button
Title
Input
Icon
Footer
Header
...

صفحه خیلی سریع شلوغ می‌شود.

Shadow باید هدف داشته باشد.

اشتباه چهارم: استفاده بیش از حد از Text Shadow

این:

h1 {
    text-shadow:
        0 0 20px red,
        0 0 30px blue,
        0 0 40px green;
}

ممکن است برای یک طراحی گرافیکی جالب باشد، اما برای متن اصلی یک سایت معمولی احتمالاً انتخاب مناسبی نیست.

اشتباه پنجم: استفاده از Shadow برای خوانایی ضعیف

Shadow نباید جایگزین Contrast مناسب شود.

اگر متن روی تصویر خوانا نیست، ابتدا باید Background، Overlay، رنگ متن و اندازه Typography را بررسی کنیم و سپس Shadow را به عنوان یک ابزار کمکی در نظر بگیریم.

چه زمانی از Box Shadow استفاده کنیم؟

برای مواردی مانند:

• Card

• Button

• Modal

• Dropdown

• Navigation

• Input

• Image

• Floating Action Button

می‌توان از box-shadow استفاده کرد.

اما همیشه لازم نیست.

چه زمانی از Text Shadow استفاده کنیم؟

text-shadow بیشتر برای مواردی مانند:

• Hero Title

• متن روی تصویر

• طراحی‌های گرافیکی

• Glow

• Typography خاص

• Banner

مناسب است.

برای متن‌های معمولی سایت، Shadow بسیار ظریف یا حتی بدون Shadow معمولاً انتخاب بهتری است.

تمرین‌های مقاله

تمرین ۱

سه کارت بسازید:

Card 1 → Shadow کم
Card 2 → Shadow متوسط
Card 3 → Shadow زیاد

و تفاوت آنها را بررسی کنید.

تمرین ۲

یک Button بسازید که:

• Border Radius داشته باشد.

• Box Shadow داشته باشد.

• در Hover Shadow آن بیشتر شود.

• با Transition تغییر کند.

تمرین ۳

یک عنوان بسازید که:

text-shadow:
    0 3px 10px ...

داشته باشد.

سپس مقدار Blur را تغییر دهید و نتیجه را مقایسه کنید.

تمرین ۴

یک کارت طراحی کنید که دو Shadow داشته باشد:

box-shadow:
    ...,
    ...;

سعی کنید یکی Shadow نزدیک و دیگری Shadow دور باشد.

تمرین ۵

یک دکمه با inset طراحی کنید که در حالت :active احساس فشرده‌شدن داشته باشد.

راهنمایی:

button:active {
    box-shadow:
        inset 0 3px 8px rgb(0 0 0 / 20%);
}

جمع‌بندی

در این مقاله با Shadow در CSS آشنا شدیم و دیدیم که Shadow یکی از ابزارهای مهم برای ایجاد عمق بصری در رابط کاربری است.

با box-shadow می‌توانیم به کارت‌ها، دکمه‌ها، تصاویر و سایر عناصر سایه اضافه کنیم. یاد گرفتیم که ساختار اصلی Shadow از Offset افقی، Offset عمودی، Blur، Spread و Color تشکیل می‌شود و با استفاده از inset می‌توانیم Shadow را به داخل عنصر منتقل کنیم. همچنین دیدیم که امکان استفاده از چند Shadow به صورت هم‌زمان وجود دارد.

سپس با text-shadow آشنا شدیم و یاد گرفتیم چگونه به متن سایه، Glow و جلوه‌های گرافیکی اضافه کنیم. این ویژگی نیز از چند Shadow پشتیبانی می‌کند و Shadowها را می‌توان با کاما از یکدیگر جدا کرد.

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

در طراحی حرفه‌ای معمولاً Shadowهای ظریف، کنترل‌شده و هماهنگ با سایر عناصر، نتیجه بسیار بهتری نسبت به Shadowهای بزرگ و تیره ایجاد می‌کنند.