ساخت افکت تایپ متن نئونی با CSS

افکت تایپ متن نئونی (Neon Typing Effect) ترکیبی از ظاهر درخشان نئون و انیمیشن تایپ است که در طراحی وب معاصر بسیار جذاب و چشم‌گیر به‌نظر می‌رسد. این مقاله قدم‌به‌قدم نشان می‌دهد چگونه با CSS خالص (بدون JavaScript) یک متن با جلوه نئونی و افکت تایپینگ بسازید، همراه با نکات بهینه‌سازی، دسترسی و نمونه‌های عملی.

چرا افکت نئونی + تایپ کاربردی است؟

• جلب توجه در هدر یا صفحه فرود (landing page)
• ایجاد حس مدرن و فانتزی برای برندها و پروژه‌های خلاقانه
• قابل پیاده‌سازی کم‌حجم بدون کتابخانه‌های خارجی

مفهوم فنی به‌اختصار

برای ساخت این افکت از ترکیب چند تکنیک استفاده می‌کنیم: text-shadow یا filter: drop-shadow برای نور نئون، یک انیمیشن typing که با تغییر عرض (width) و خاصیت overflow: hidden یا با استفاده از ch سی‌آر (characters) عمل می‌کند، و یک caret چشمک‌زن با اشتراک‌گذاری یک pseudo-element مثل ::after.

نمونه پایه: HTML

<div class="neon-container">
  <h1 class="neon-typing"><span>Neon Typing Effect</span></h1>
</div>

این کد ساختار ساده است: یک container و یک عنصر متن داخل span برای کنترل دقیق‌تر عرض و افکت تایپینگ.

نمونه پایه: CSS

body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: monospace;
  color: #fff;
}

.neon-container .neon-typing {
  font-size: 3rem;
  letter-spacing: 2px;
}

.neon-typing span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: .12em solid rgba(255,255,255,0.75); /* caret */  box-shadow:
    0 0 6px rgba(0,255,255,0.8),
    0 0 12px rgba(0,255,255,0.6),
    0 0 30px rgba(0,190,255,0.5);
  color: #bff;
  animation:
    typing 3s steps(20, end),
    blink-caret .7s step-end infinite;
}

/* typing animation: change width from 0 to full */@keyframes typing {
  from { width: 0; }
  to { width: 18ch; } /* adjust to text length */}

/* caret blink */@keyframes blink-caret {
  50% { border-color: transparent; }
}

این CSS دو انیمیشن را اعمال می‌کند: typing که عرض متن را از صفر به مقدار مورد نظر افزایش می‌دهد و از تابع steps() استفاده می‌کند تا حس تایپ واقعی ایجاد شود. همچنین با box-shadow چندین سایه‌ی رنگی برای ایجاد درخشندگی نئون به متن اضافه کردیم.

توضیحات کاربردی و نکات

• برای دقت تایپ، مقدار steps(n, end) باید تقریبا برابر با تعداد کاراکترها باشد.
• به‌جای مقدار ثابت width: 18ch می‌توانید از CSS variable یا تعیین دقیق تعداد کاراکترها استفاده کنید.
• برای رنگ‌های نئون رایج از رنگ‌های آبی-فیروزه‌ای، صورتی یا سبز نئونی استفاده کنید.

نسخه پیشرفته با تنظیم طول پویا و متون چندخطی

::root {
  --text-length: 18ch;
  --neon-color: #00f6ff;
}

.neon-typing span {
  width: 0;
  max-width: var(--text-length);
  animation: typing 3s steps(18, end) forwards;
  color: var(--neon-color);
  text-shadow:
    0 0 6px var(--neon-color),
    0 0 12px rgba(0,0,0,0.2),
    0 0 30px rgba(0,246,255,0.4);
}

در این نمونه از CSS variables استفاده شده تا به‌راحت طول و رنگ متن قابل تغییر باشد. پراپرتی forwards باعث می‌شود پس از اتمام انیمیشن حالت نهایی حفظ شود.

دسترس‌پذیری و بهینه‌سازی

برای کاربران با حساسیت به حرکت یا اسکرین ریدرها باید امکاناتی در نظر بگیریم:

• استفاده از @media (prefers-reduced-motion: reduce) برای غیرفعال کردن انیمیشن‌ها.
• قرار دادن متن کامل در DOM (نه با JS) تا اسکرین ریدرها متن را بخوانند.
• رعایت کنتراست رنگی و خوانایی در نور پس‌زمینه.

قطعه‌کد: کاهش حرکت (accessibility)

@media (prefers-reduced-motion: reduce) {
  .neon-typing span {
    animation: none;
    width: auto;
    border-right: none;
  }
}

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

مثال: افزودن افکت موجی نئون و چند لایه نور

.neon-typing span {
  position: relative;
  color: #e6ffff;
  text-shadow:
    0 0 6px rgba(0,255,255,0.85),
    0 0 12px rgba(0,200,255,0.6),
    0 0 30px rgba(0,150,255,0.45),
    0 0 60px rgba(0,100,255,0.2);
}

/* soft pulse */@keyframes pulse {
  0% { filter: drop-shadow(0 0 6px rgba(0,255,255,0.8)); }
  50% { filter: drop-shadow(0 0 16px rgba(0,255,255,1)); }
  100% { filter: drop-shadow(0 0 6px rgba(0,255,255,0.8)); }
}

.neon-typing span {
  animation: typing 3s steps(18,end) forwards, pulse 2.5s ease-in-out infinite;
}

در این مثال با ترکیب text-shadow و filter: drop-shadow یک افکت پالس نرم به نور نئون اضافه شده که باعث می‌شود متن زنده‌تر و عمق‌دارتر به‌نظر برسد.

جدول خلاصه پراپرتی‌های کلیدی

نکات حرفه‌ای و ترکیبات پیشنهادی

• برای متن‌های با پس‌زمینه تصویر، از یک لایه تار (backdrop) یا outline استفاده کنید تا نور نئون واضح بماند.
• در صورت نیاز به چند زبان یا جهت متن متفاوت، از ch دقیق استفاده کنید چون اندازه کاراکتر در فونت‌های پروپورشنال متفاوت است.
• قابلیت تغییر رنگ نئون با CSS variables به شما اجازه A/B تست سریع می‌دهد.
• برای انیمیشن‌های طولانی‌تر یا تکرار، از will-change: width, filter فقط در مواقع ضروری استفاده کنید تا بار GPU کنترل شود.

با رعایت این موارد می‌توانید افکت تایپ متن نئونی زیبا، قابل‌دسترس و بهینه تولید کنید که برای هدینگ‌ها، معرفی برند و محتواهای خلاقانه بسیار مناسب است.

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

ارسال