CSS Masking

ماسکینگ در CSS چیست؟

ماسکینگ در CSS قابلیتی است که به شما اجازه می‌دهد قسمت‌های مختلف یک عنصر را با استفاده از یک تصویر یا شکل ماسک کنترل کنید، به‌طوری که فقط بخش‌های خاصی از عنصر قابل مشاهده باشند و بقیه مخفی شوند. این ویژگی مشابه بریدن (clipping) است، اما انعطاف‌پذیری بیشتری دارد چون می‌توانید از گرادیانت‌ها، تصاویر یا فایل‌های SVG که دارای شفافیت هستند استفاده کنید.

—

 خصوصیات اصلی ماسکینگ

* `mask-image`: تصویری که به عنوان ماسک استفاده می‌شود را تعریف می‌کند.
* `mask-mode`: نحوه اعمال ماسک را مشخص می‌کند.
* `mask-position`: موقعیت شروع تصویر ماسک را تعیین می‌کند.
* `mask-repeat`: نحوه تکرار تصویر ماسک را تنظیم می‌کند.
* `mask-size`: اندازه تصویر ماسک را تعریف می‌کند.
* `mask-composite`: نحوه تعامل چند لایه ماسک را تعیین می‌کند.
* `mask-origin`: منطقه موقعیت‌یابی ماسک را مشخص می‌کند.
* `mask-clip`: محدوده‌ای که ماسک روی آن اعمال می‌شود را تعیین می‌کند.
* `mask`: مخفف همه‌ی خصوصیات ماسک است.

—

مثال ساده

“`css
.box {
width: 300px;
height: 300px;
background: url(‘your-image.jpg’) no-repeat center/cover;
mask-image: url(‘mask-shape.png’);
mask-size: contain;
mask-repeat: no-repeat;
}
“`

در این مثال، تصویری که در کلاس `.box` است فقط در قسمت‌های غیرشفاف تصویر `mask-shape.png` نمایش داده می‌شود.

—

ماسکینگ با گرادیانت‌ها

می‌توانید از گرادیانت‌های CSS هم برای ماسک استفاده کنید، برای مثال:

“`css
.fade-mask {
width: 300px;
height: 300px;
background: url(‘your-image.jpg’) no-repeat center/cover;
mask-image: linear-gradient(to bottom, transparent, black);
}
“`

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

—

 پشتیبانی مرورگرها

* ماسکینگ در اکثر مرورگرهای مدرن پشتیبانی می‌شود ولی در نسخه‌های قدیمی‌تر ممکن است نیاز به پیشوندهای خاصی باشد.
* مرورگرهای Chrome، Firefox، Edge و Safari به خوبی از ماسکینگ پشتیبانی می‌کنند.
* برای نسخه‌های قدیمی Safari از پیشوند `-webkit-mask-*` استفاده کنید.

—

کاربردها

* افکت‌های خلاقانه برای نمایش تصویر.
* ماسک کردن متن یا اشکال پیچیده.
* ایجاد افکت محو شدن تدریجی.
* ساخت انیمیشن‌ها و افکت‌های سفارشی برای لودینگ یا هاور.