ساخت افکت تلویزیونی با CSS

افکت تلویزیونی (TV effect) یکی از جلوه‌های بصری پرکاربرد در طراحی وب و انیمیشن‌های کوچک است. این افکت می‌تواند حس نوستالژیک، شبیه‌سازی نمایشگرهای قدیمی، VHS یا خط‌های اسکن را به عناصر صفحه اضافه کند. در این مقاله به صورت مرحله‌به‌مرحله و با مثال‌های عملی، روش‌های مختلف ساخت یک افکت تلویزیونی حرفه‌ای تنها با CSS (و در صورت نیاز کمی HTML/JS) را توضیح می‌دهیم.

مفاهیم اصلی قبل از طراحی

• Scanlines: خطوط باریک افقی که روی تصویر نمایشگر قدیمی دیده می‌شوند.
• Chromatic Aberration: جداشدن رنگ‌ها در لبه‌ها که حس نارسایی اپتیکی ایجاد می‌کند.
• Noise / Static: نویز تصادفی که می‌تواند با تصاویر پس‌زمینه یا گرادیانت شبیه‌سازی شود.
• Vignette و Blur: تمرکز روی مرکز و تارشدگی لبه‌ها برای واقع‌نمایی بیشتر.

ساختار پایه HTML برای یک عنصر تلویزیونی

<div class="tv">
  <div class="screen">
    <img src="your-image.jpg" alt="content">
  </div>
</div>

در این ساختار، .tv ظرف کلی و .screen شامل محتوا (تصویر، ویدئو یا هر عنصر دلخواه) است. از اینجا با CSS افکت‌ها را اضافه می‌کنیم.

نمونه CSS اولیه — اسکن‌لاین و وینیت

.tv {
  --w: 400px;
  width: var(--w);
  margin: 20px auto;
  background: #000;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  overflow: hidden;
}

.screen {
  position: relative;
  width: 100%;
  height: calc(var(--w) * 0.6);
  background: #111;
  overflow: hidden;
  border-radius: 4px;
}

.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.1);
}

/* scanlines */.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.12) 51%);
  background-size: 100% 4px;
  pointer-events: none;
}

/* vignette */.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

این کد خطوط اسکن و وینت را با استفاده از دو pseudo-element ایجاد می‌کند. اسکن‌لاین با یک گرادیانت خطی تکرار‌شونده ساخته شده و وینیت با یک گرادیانت شعاعی برای تیره‌تر کردن لبه‌ها افزوده شده است.

افزودن نویز و استاتیک با CSS

.noise {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 2px);
  mix-blend-mode: overlay;
  animation: noise 0.8s steps(10) infinite;
  pointer-events: none;
}

@keyframes noise {
  0% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-2px); opacity: 0.9; }
  100% { transform: translateY(0); opacity: 0.8; }
}

بخش .noise نویز سطحی را شبیه‌سازی می‌کند؛ از repeating-linear-gradient برای ایجاد پیکسل‌های ریز و از mix-blend-mode برای ترکیب با تصویر استفاده می‌شود. animation با steps می‌تواند حس «جهش‌های سریع» نویز را القا کند.

کروماتیک آبرِیشن (Chromatic Aberration) با pseudo-elements

.screen img {
  position: relative;
  z-index: 1;
}

.screen::before,
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: 0;
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.screen::before { transform: translateX(-2px); background-position: left; }
.screen::after  { transform: translateX(2px);  background-position: right; }

با دو pseudo-element و جابجایی‌های کوچک در محور X و ترکیب blend، تفکیک رنگی لبه‌ها شبیه‌سازی می‌شود. این تکنیک برای نمایش خطای اپتیکی قدیمی بسیار مناسب است.

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

<div class="tv">
  <div class="screen">
    <img src="your-image.jpg" alt="content">
    <div class="noise"></div>
  </div>
</div>

/* include all previous CSS pieces, and add prefers-reduced-motion */@media (prefers-reduced-motion: reduce) {
  .noise, .screen::before, .screen::after { animation: none; transform: none; }
}

این مثال کامل تمام لایه‌ها را کنار هم می‌گذارد و در انتها از media query prefers-reduced-motion برای احترام به کاربران حساس به حرکت استفاده می‌کند؛ یک بهینه‌سازی مهم برای دسترسی (accessibility).

جدول ویژگی‌ها و مقادیر پیشنهادی

بهینه‌سازی و نکات حرفه‌ای

• از CSS variables برای تنظیم سریع مقادیر (مثل شدت نویز، عرض scanline) استفاده کنید تا بتوانید تم‌های مختلف را سریع بسازید.
• برای تصاویر متحرک یا ویدئو، از ترکیب blend-mode و opacity کمتر استفاده کنید تا عملکرد بهتر باشد.
• در موبایل ممکن است انیمیشن‌ها سنگین باشند؛ با media queries یا lazy-loading افکت‌ها را کنترل کنید.
• همیشه از prefers-reduced-motion و کنتراست مناسب برای دسترس‌پذیری استفاده کنید.

مثال پیشرفته: استفاده از SVG filter برای نویز واقعی‌تر

<svg width="0" height="0">
  <filter id="grain">
    <feTurbulence baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
    <feColorMatrix type="saturate" values="0" />
    <feBlend mode="overlay" />
  </filter>
</svg>

.screen .noise {
  filter: url(#grain);
  opacity: 0.08;
}

feTurbulence در SVG امکان تولید نویز تصادفی و پیوسته را فراهم می‌کند که واقعی‌تر از گرادیانت است. با استفاده از فیلتر SVG و اعمال آن روی یک لایه نیمه‌شفاف می‌توانید نویز پویاتر و طبیعی‌تری بسازید.

موارد استفاده و ایده‌های خلاقانه

• افکت‌های ورود/بارگذاری صفحه با حس تلویزیون قدیمی.
• طراحی بخش‌های مربوط به رسانه، پروفایل هنرمندان یا پروژه‌های نوستالژیک.
• پخش ویدئو با ظاهر VHS یا شبیه‌سازی محیط فیلم‌برداری قدیمی.

جمع‌بندی

ساخت افکت تلویزیونی با CSS ترکیبی از لایه‌بندی با pseudo-elements، گرادیانت‌های تکرار‌شونده، انیمیشن‌های کوتاه و در صورت نیاز فیلترهای SVG است. با رعایت اصول دسترس‌پذیری و بهینه‌سازی عملکرد، می‌توانید یک افکت زیبا و قابل‌اطمینان بسازید که در پروژه‌های وب متنوع قابل استفاده باشد.

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

ارسال