افکت متنی سایه ای با CSS

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

سینتکس پایه text-shadow

قالب کلی: offset-x offset-y blur-radius color. می‌توان چند سایه را با کاما جدا کرد.

مثال پایه

h1 {
  font-size: 48px;
  color: #222;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

در این مثال یک سایه ساده با جابجایی 2px در هر جهت و محو شدگی 4px به متن اضافه می‌شود. رنگ rgba باعث می‌شود سایه نیمه‌شفاف باشد.

افکت نئون با سایه‌های چندگانه

.neon {
  font-size: 64px;
  color: #fff;
  text-shadow:
    0 0 2px #fff,
    0 0 6px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 30px rgba(0,255,255,0.2);
}

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

متون سه‌بعدی (Extrusion)

.extrude {
  font-size: 72px;
  color: #111;
  text-shadow:
    1px 1px 0 #bbb,
    2px 2px 0 #aaa,
    3px 3px 0 #999,
    4px 4px 0 #888,
    5px 5px 0 #777;
}

ایجاد چند سایه با افست‌های افزایشی باعث می‌شود متن یک حجم اکسترود شده به نظر برسد. این روش ساده و مؤثر است اما اگر تعداد زیاد شود ممکن است کدنویسی سنگین شود.

بهینه‌سازی: استفاده از filter برای درخشش

.neon-optimized {
  font-size: 64px;
  color: #0ff;
  text-shadow: 0 0 2px #0ff;
  filter: drop-shadow(0 0 10px #0ff);
}

به‌جای تعریف ده‌ها سایه متوالی می‌توان از ترکیب یک سایه نزدیک و filter: drop-shadow برای ایجاد یک درخشش خارجی استفاده کرد. این روش می‌تواند خواناتر و در برخی مرورگرها کاراتر باشد.

ترکیب با متن گرادیانی

.gradient-text {
  font-size: 56px;
  background: linear-gradient(90deg, #ff7a18, #af002d 50%, #319197);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

با استفاده از background-clip و color: transparent می‌توان متن گرادیانی ساخت. در این حالت افزودن یک text-shadow نرم به خوانایی کمک می‌کند و باعث می‌شود متن از پس‌زمینه متمایز شود.

انیمیشن سایه متن

@keyframes glow {
  0% {
    text-shadow:
      0 0 4px rgba(0,150,255,0.6),
      0 0 8px rgba(0,150,255,0.4);
  }
  50% {
    text-shadow:
      0 0 8px rgba(0,150,255,0.9),
      0 0 16px rgba(0,150,255,0.6);
  }
  100% {
    text-shadow:
      0 0 4px rgba(0,150,255,0.6),
      0 0 8px rgba(0,150,255,0.4);
  }
}
.animated {
  animation: glow 2s infinite;
}

می‌توان با keyframes میزان درخشش را متحرک کرد. توجه داشته باشید که انیمیشن‌های پرمحاسبه روی عناصر زیاد یا متن‌های طولانی ممکن است مصرف پردازنده را افزایش دهند.

نکات دسترسی و عملکرد

• خوانایی: سایه‌ها نباید خوانایی متن را کاهش دهند. برای متن‌های مهم (مانند عناوین بزرگ) از کنتراست کافی بین متن و پس‌زمینه مطمئن شوید.
• عملکرد: استفاده از سایه‌های بسیار متعدد یا انیمیشن‌های پیچیده روی عناصر زیادی می‌تواند باعث کاهش فریم و افزایش مصرف باتری شود.
• قابلیت دسترسی: برای کاربران صفحه‌خوان یا بزرگ‌نمایی، اطمینان حاصل کنید که متن همچنان قابل انتخاب و پیمایش است؛ text-shadow روی محتوای واقعی تأثیر ساختاری ندارد اما می‌تواند خوانایی دیداری را تغییر دهد.

تطابق مرورگر

نمونه اشتباه رایج و تصحیح آن

گاهی طراحان برای ایجاد درخشش نئونی از ده‌ها مقدار text-shadow استفاده می‌کنند که هم طولانی است و هم نگهداری دشوار. مثال زیر نمونه ناپسند و قابل بهینه‌سازی است:

.bad-neon {
  text-shadow:
    0 0 2px #0ff, 0 0 4px #0ff, 0 0 6px #0ff,
    0 0 8px #0ff, 0 0 10px #0ff, 0 0 12px #0ff,
    0 0 14px #0ff, 0 0 16px #0ff;
}

این کد طولانی و نامرتب است. بهتر است یکی دو سایه نزدیک و یک filter: drop-shadow استفاده شود که خواناتر و در بسیاری موارد به اندازه کافی خوب است.

.better-neon {
  color: #07f;
  text-shadow: 0 0 3px #07f;
  filter: drop-shadow(0 0 10px #07f);
}

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

خلاصه و نکات نهایی

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

با ترکیب سینتکس‌های بالا و رعایت نکات دسترسی و عملکرد، می‌توانید افکت‌های متنی جذاب و کاربردی برای وب‌سایت‌های خود بسازید.

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

ارسال