‏درخشش دلخواه داخل المنت‌ها با CSS mask

نویسنده می‌خواست یه المنت دلخواه روی صفحه رو برای چند لحظه برجسته کنه تا توجه کاربر بهش جلب بشه. راه ساده‌ش یه box-shadow از نوع inset هست که یه درخشش از لبه‌ها به داخل المنت می‌ندازه. با یه انیمیشن @keyframes هم می‌شه کاری کرد که این درخشش آروم ظاهر بشه، بزرگ بشه و بعد از چند ثانیه محو بشه.

مشکل اینجاست که box-shadow فقط یه رنگ ساده می‌گیره. نویسنده یه ظاهر آزادتر می‌خواست، مثلاً یه conic-gradient() رنگین‌کمونی یا حتی یه تصویر، ولی طوری که المنت زیرش هنوز دیده بشه. برای همین اول یه pseudo-element (یعنی ::after که CSS خودش به المنت اضافه می‌کنه) با position: absolute و inset: 0 می‌سازه که کل المنت رو می‌پوشونه و هر background دلخواهی می‌تونه داشته باشه.

حالا باید این پوشش رو طوری کرد که فقط از لبه‌ها بیاد داخل. راه‌حل mask هست: mask-image (یعنی گرادیان یا تصویری که تعیین می‌کنه کدوم قسمت لایه دیده بشه) با linear-gradientهایی که لبه‌ها رو سیاه یعنی دیده‌شدنی و وسط رو شفاف نگه می‌دارن. گرادیان اول لبه‌های چپ و راست رو نگه می‌داره و گرادیان دوم بالا و پایین رو:

mask-image:
  linear-gradient(to right, black 0%, transparent var(--inset),
    transparent calc(100% - var(--inset)), black 100%),
  linear-gradient(to bottom, black 0%, transparent var(--inset),
    transparent calc(100% - var(--inset)), black 100%);
mask-composite: add; /* union of both edge bands */

با mask-composite: add این دو تا ماسک با هم جمع می‌شن و نتیجه یه قاب درخشان دور تا دور المنته. متغیر --inset هم ضخامت این قاب رو تعیین می‌کنه. نویسنده می‌گه نکته‌ی جذاب اینه که پشت این ماسک هر چیزی می‌تونه باشه، از تصویر گرفته تا گرادیان، و خودش سراغ یه conic-gradient رنگین‌کمونی رفته.

نکات کلیدی:

• روش ساده: box-shadow با inset که فقط یه رنگ می‌گیره
• روش آزادتر: یه ::after با inset: 0 روی المنت با هر background دلخواه
• دو linear-gradient توی mask-image، یکی افقی و یکی عمودی، فقط لبه‌ها رو نگه می‌دارن
• mask-composite: add دو ماسک رو با هم ترکیب می‌کنه
• ضخامت درخشش با متغیر --inset تنظیم می‌شه، مثلاً 20px یا 30px