‏افکتِ ماسکِ گرادیانِ شعاعیِ متحرک روی متن با CSS

به گفتهٔ نویسنده (Cassidy)، اون یه افکتِ متنیِ باحال رو تو بلاگِ Nikhil دیده، جایی که یه «Hello!»ی بزرگ با یه‌سری حلقه که کلمه رو ماسک می‌کنن یه ظاهرِ جذاب پیدا کرده، و تصمیم گرفته همون رو بازسازی کنه.

نویسنده می‌گه غیرمنتظره‌ترین چالش، پیدا کردنِ فونتِ مناسب بوده: فونت باید یه حرفِ «o»ی کاملاً دایره‌ای می‌داشت تا «راه‌راه‌ها» خوب روش بشینن. برای همین از فونتِ Fredoka استفاده کرده که هم اون «o»ی گرد رو داشت و هم یه sans serifِ گرد و خوش‌فرم بود.

هستهٔ کار propertyِ maskه که اجازه می‌ده المان‌ها رو ماسک/کلیپ کنی. نویسنده توضیح می‌ده که این‌جا منظور از ماسک، «آلفا-ماسک»ه: نواحیِ شفاف بخش‌هایی که نمی‌خوای رو پنهون می‌کنن و نواحیِ مات همون‌ها رو نشون می‌دن. خطِ اصلیِ ماجرا این ماسک با repeating-radial-gradientه:

mask: repeating-radial-gradient(
	circle at 198.2px 69.6px,
	black,
	var(--stripes),
	black,
	0,
	transparent,
	calc(var(--stripes) * 2),
	transparent 0
);

نویسنده می‌گه یه circle با یه نقطهٔ مبدأِ خیلی مشخص هست که مختصاتش رو دستی و کم‌کم تنظیم کرده تا گرادیان دقیقاً دورِ حرفِ «o» بشینه؛ کاری که خودش اعتراف می‌کنه خسته‌کننده بوده، چون هر بار فونت یا سایز یا خودِ کلمه عوض شه باید دوباره انجامش بدی. متغیرِ --stripes هم اولش 2pxه، یعنی هر دو پیکسل یه راه‌راهِ سفید یا شفاف تکرار می‌شه.

نکتهٔ فنیِ اصلی این‌جاست: نویسنده --stripes رو به‌جای یه متغیرِ معمولیِ CSS، به‌صورتِ @property تعریف کرده، چون می‌خواسته افکت رو انیمیت کنه. انیمیت کردنِ گرادیان‌ها معمولاً سخته، چون CSS گرادیان‌ها رو به‌جای مسیرهای رنگ، مثلِ تصویر می‌بینه و گذار بینِ حالت‌ها براش سخته. اما CSS Properties and Values API (بخشی از Houdini، که از ۲۰۲۴ به‌طور گسترده در دسترسه) اجازه می‌ده propertyهای سفارشی رو به‌صورتِ مقادیرِ قابل‌انیمیت ثبت کنی؛ برای همین با آنکامنت کردنِ انیمیشن، گرادیان روون میاد و می‌ره.

نویسنده در آخر از دردسرهای سازگاریِ مرورگر هم می‌گه: Firefox و Safari تو نقطه‌های مختلف با این دمو لج کردن؛ مثلاً استفاده از واحدِ rem تو گرادیان Firefox رو عصبانی می‌کرد و کار کردنِ انیمیشن رو Safari بعد از کلی ور رفتن با سایز یه معجزه بوده. اون می‌گه مطمئنه راهِ تمیزتری برای نوشتنِ این کد هست، ولی فعلاً همین «به‌قدر کافی خوبه».

نکات کلیدی:

• افکت با propertyِ mask و repeating-radial-gradient و منطقِ آلفا-ماسک ساخته می‌شه
• انتخابِ فونت با «o»ی کاملاً گرد (Fredoka) کلیدی بود
• نقطهٔ مبدأِ دایره دستی تنظیم می‌شه و با تغییرِ فونت/سایز/کلمه باید دوباره تنظیم شه
• برای انیمیت کردن، --stripes به‌صورتِ @property تعریف شده چون گرادیان‌ها سختِ انیمیت شدنن
• Firefox و Safari تو سازگاری دردسر داشتن (مثلاً واحدِ rem تو گرادیان)