طراحی افکت متنی سایه داخلی با CSS

سایه داخلی متن (inner text shadow) یکی از افکت‌های جذاب طراحی وب است که حس برجستگی یا فرو رفتگی را به حروف می‌دهد. در حالی که CSS به‌طور مستقیم ویژگی inset برای text-shadow ندارد، با ترکیب تکنیک‌های مختلف می‌توان افکت‌های نزدیکی به سایه داخلی واقعی را ساخت. در این مقاله روش‌های عملی، مثال‌های کد، مزایا و معایب هر روش و نکات مربوط به سازگاری مرورگرها را بررسی می‌کنیم.

چرا سایه داخلی متن مهم است؟

• افزایش خوانایی در پس‌زمینه‌های رنگی یا تصویری
• ایجاد حس عمق و طراحی واقع‌گرایانه
• تمایز عناصر تعاملی مانند دکمه‌ها و عنوان‌ها

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

• چندین text-shadow لایه‌ای
• استفاده از ::before/::after و mix-blend-mode
• فیلترهای SVG (feDropShadow / feComposite)
• استفاده از پس‌زمینه و -webkit-text-fill-color به همراه background-clip: text

1. تکنیک چندگانه text-shadow (ساده و سریع)

h1 {
  font-size: 72px;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 2px 3px rgba(0,0,0,0.5),
    0 4px 6px rgba(0,0,0,0.4);
}

این کد از چند text-shadow با اوفست و بلورهای متفاوت استفاده می‌کند تا حس عمق داخلی یا بیرونی ایجاد شود. مزیت: ساده و عملکرد بالا. محدودیت: این روش سایه را همیشه بیرونی جلوه می‌دهد و کنترل دقیق «inset» ندارد.

2. شبیه‌سازی inset با کپی متن و blend modes

<h1 class="inner">Shadow</h1>

.inner {
  position: relative;
  font-size: 96px;
  color: #ddd;
}
.inner::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  color: #000;
  filter: blur(6px);
  transform: translateY(2px);
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, #000);
}

توضیح: در این روش یک شبه‌عنصر (::after) حاوی متن مشابه ایجاد می‌شود، آن را محو و جابجا می‌کنیم و با mix-blend-mode آن را با متن بالایی ترکیب می‌کنیم. این تکنیک اجازه می‌دهد سایه ظاهری درون‌تر پیدا کند. نکته: برای پشتیبانی بهتر باید روی رنگ‌ها و blend mode آزمایش کنید و توجه داشته باشید که پشتیبانی از برخی blend modes در مرورگرهای قدیمی محدود است.

3. استفاده از فیلتر SVG برای سایه داخلی دقیق

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="inner-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feOffset dx="0" dy="2" result="offsetBlur"/>
    <feComposite in="offsetBlur" in2="SourceAlpha" operator="arithmetic"
      k2="-1" k3="1" result="innerShadow"/>
    <feColorMatrix in="innerShadow" type="matrix"
      values="0 0 0 0 0
              0 0 0 0 0
              0 0 0 0 0
              0 0 0 0.6"/>
    <feBlend in="SourceGraphic" in2="innerShadow" mode="normal"/>
  </filter>
</svg>

<h1 style="filter:url(#inner-shadow)">Inner SVG Shadow</h1>

توضیح: این فیلتر SVG ابتدا آلفای متن را بلر می‌کند، آن را جابجا می‌کند و سپس با استفاده از feComposite و تنظیم پارامترهای k2 و k3 سعی می‌کند قسمت‌های داخل را نگه‌داشته و بیرون را حذف کند (روش متداول برای ایجاد inset). در انتها با feColorMatrix شدت رنگ سایه را تنظیم می‌کنیم. این روش کیفیت بسیار خوبی دارد و کنترل دقیق فراهم می‌کند، اما پیچیده‌تر است و ممکن است در برخی محیط‌ها (PDF، برخی ایمیل‌ها) پشتیبانی نداشته باشد.

4. تکنیک background-clip و ماسک‌ها (برای افکت‌های خلاقانه)

.fancy {
  font-size: 96px;
  background: linear-gradient(180deg, #eee, #999);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.fancy::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 6px 12px rgba(0,0,0,0.6);
  -webkit-background-clip: text;
  mix-blend-mode: multiply;
  pointer-events: none;
}

توضیح: با کلیپ کردن پس‌زمینه روی متن و اضافه کردن یک شبه‌عنصر دارای inset box-shadow می‌توان افکت سایه داخلی ظریف‌تری ایجاد کرد. محدودیت: background-clip: text برای بعضی مرورگرها نیاز به پیشوند -webkit- دارد و برای متن‌های شفافی که باید انتخاب‌پذیر بمانند ممکن است مشکلاتی ایجاد شود.

مقایسه سریع روش‌ها

نکات عملی و بهینه‌سازی

• برای عملکرد بهتر از سایه‌های سنگین متعدد روی متن‌های طولانی یا لیست‌های بزرگ اجتناب کنید.
• در موبایل مقدار blur و اندازه سایه را کاهش دهید تا بار رندر کمتر شود.
• اگر از SVG استفاده می‌کنید، فایل فیلتر را در ابتدای صفحه یا در یک فایل SVG خارجی قرار دهید تا قابل reuse باشد.
• برای دسترسی، کنتراست متن را حفظ کنید؛ سایه داخلی نباید خوانایی را کاهش دهد.
• برای سازگاری از fallback ساده (مثلاً یک text-shadow کمینه) استفاده کنید تا در مرورگرهای قدیمی حداقل یک افکت مشاهده شود.

نمونه fallback

h1 {
  /* fallback */  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  /* advanced effect using SVG or pseudo-element placed after fallback */}

توضیح: ابتدا یک سایه ساده برای مرورگرهای قدیمی تعریف کنید و سپس تکنیک پیشرفته را اضافه نمایید تا کاربران قدیمی هم تجربه قابل قبولی داشته باشند.

جمع‌بندی و توصیه‌های نهایی

اگر به دنبال راه‌حل سریع و سازگار هستید، چندین لایه text-shadow گزینه‌ای مناسب است. برای کنترل دقیق‌تر و افکت‌های واقع‌گرایانه‌تر، فیلترهای SVG بهترین کیفیت را ارائه می‌دهند. برای جلوه‌های خلاقانه یا طراحی‌های مدرن می‌توان از شبه‌عناصر به همراه mix-blend-mode و background-clip: text استفاده کرد. همیشه عملکرد، دسترسی و سازگاری مرورگرها را در انتخاب روش مدنظر داشته باشید.

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

ارسال