text-shadow

سایه‌ای پشت حروف: text-shadow

در فصل ۹ به‌طور کامل با Box Shadow (سایه دور جعبه‌ها) آشنا می‌شیم. اما CSS یه Property مشابه و مستقل هم داره که مخصوص خود متنه: text-shadow. این درس رو کامل به همین Property اختصاص می‌دیم، چون هم Syntax خاص خودش رو داره و هم کاربردهای بصری جالبی ممکنه.

text-shadow چیست؟

Property به اسم text-shadow امکان افزودن یک یا چند سایه پشت حروف یک متن رو فراهم می‌کنه؛ دقیقاً مثل اینکه یک نور از یک زاویه خاص به حروف بتابه و پشت‌شون یک سایه بندازه.

Syntax پایه

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

text-shadow: افست‌افقی افست‌عمودی شعاع‌محو رنگ;

این Property چهار مقدار می‌گیره که هرکدوم نقش مشخصی دارن:

مقدار	نقش
افست افقی (Horizontal Offset)	سایه چقدر به چپ یا راست جابه‌جا شود؛ مقدار مثبت به راست، منفی به چپ
افست عمودی (Vertical Offset)	سایه چقدر به بالا یا پایین جابه‌جا شود؛ مقدار مثبت به پایین، منفی به بالا
شعاع محو (Blur Radius)	میزان محو و پخش‌شدگی لبه‌های سایه (اختیاری)
رنگ (Color)	رنگ خود سایه (اختیاری)

یک مثال ساده بدون Blur

.simple-shadow {
  text-shadow: 3px 3px black;
}

در این مثال، چون فقط دو مقدار اول (افست افقی و عمودی) رو نوشتیم، شعاع محو به‌طور پیش‌فرض صفر در نظر گرفته می‌شه؛ یعنی یه سایه کاملاً واضح و بدون هیچ محو شدگی، دقیقاً ۳ پیکسل به راست و ۳ پیکسل به پایین از متن اصلی فاصله داره.

افزودن شعاع محو برای جلوه نرم‌تر

.soft-shadow {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

با اضافه کردن مقدار سوم (شعاع محو)، لبه‌های سایه به‌جای یک خط تیز و واضح، به‌آرومی محو و پخش می‌شن؛ هرچه این عدد بزرگ‌تر باشه، سایه نرم‌تر و پخش‌شده‌تر به‌نظر می‌رسه.

مقدار افست منفی: جابه‌جایی سایه به سمت مخالف

.top-left-shadow {
  text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.3);
}

در این مثال، مقادیر منفی افست باعث می‌شن سایه به‌جای پایین و راست، به سمت بالا و چپ متن جابه‌جا بشه.

کاربرد رایج: بهبود خوانایی متن روی تصویر

.hero-title {
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

<div style="background-image: url('landscape.jpg');">
  <h1 class="hero-title">عنوان روی تصویر</h1>
</div>

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

چند سایه هم‌زمان روی یک متن

.multi-shadow {
  text-shadow:
    1px 1px 0 red,
    2px 2px 0 orange,
    3px 3px 0 gold;
}

دقیقاً مثل چیزی که در Box Shadow هم می‌بینیم (و در فصل بعدی کامل بررسیش می‌کنیم)، می‌شه چند سایه رو با کاما از هم جدا کرد و همه رو هم‌زمان روی یک متن اعمال کرد. هر سایه به‌ترتیبی که نوشته شده، روی سایه‌های قبلی قرار می‌گیره؛ این تکنیک برای ساخت جلوه‌های تزئینی خاص (مثل افکت سه‌بعدی یا رنگین‌کمانی) استفاده می‌شه.

یک جلوه معروف: افکت متن حکاکی‌شده (Emboss)

.embossed {
  color: #ccc;
  text-shadow: 1px 1px 1px white, -1px -1px 1px rgba(0, 0, 0, 0.3);
}

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

تفاوت text-shadow با box-shadow

مهمه که این دو Property رو با هم قاطی نکنیم: text-shadow فقط دور شکل واقعی حروف سایه می‌ندازه (یعنی سایه دقیقاً از فرم هر حرف پیروی می‌کنه)؛ در حالی که box-shadow، که در فصل بعدی کامل می‌بینیم، دور کل جعبه مستطیلی یک عنصر سایه ایجاد می‌کنه، بدون توجه به شکل محتوای داخلش.

نکات مربوط به Accessibility

هرچند text-shadow می‌تونه گاهی خوانایی متن رو بهبود بده (مثل مثال متن روی تصویر که دیدیم)، ولی استفاده نادرست ازش (مثلاً سایه‌های خیلی پررنگ یا رنگ‌های نامناسب) می‌تونه برعکس، خوانایی رو بدتر کنه. همیشه باید بعد از افزودن یک سایه، کنتراست نهایی بین متن و پس‌زمینه رو به‌طور بصری بررسی کرد.

نکات مهم

• text-shadow چهار مقدار می‌پذیرد: افست افقی، افست عمودی، شعاع محو (اختیاری) و رنگ (اختیاری).
• مقادیر منفی افست، سایه را به سمت مخالف (بالا یا چپ) جابه‌جا می‌کنند.
• می‌توان چند سایه را با کاما از هم جدا کرد و هم‌زمان روی یک متن اعمال کرد.

اشتباهات رایج

• قاطی کردن ترتیب مقادیر Syntax؛ افست افقی و عمودی همیشه باید قبل از شعاع محو و رنگ بیایند.
• استفاده از سایه‌های خیلی پررنگ یا نامناسب، که به‌جای بهبود خوانایی، آن را کاهش می‌دهد.
• قاطی کردن text-shadow با box-shadow؛ اولی فقط دور شکل حروف، دومی دور کل جعبه مستطیلی عمل می‌کند.

جمع‌بندی

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