آموزش Masking در CSS؛ مخفی کردن بخش‌هایی از تصاویر با mask-image

مقدمه

در مقاله قبلی با ویژگی clip-path در CSS آشنا شدیم و یاد گرفتیم چگونه بخشی از یک عنصر یا تصویر را برش دهیم. حالا وقت آن رسیده که به سراغ Masking برویم.

تفاوت اصلی Masking و Clipping در نحوه نمایش بخش‌های مختلف تصویر است. در clip-path یک قسمت از عنصر یا کاملاً نمایش داده می‌شود یا کاملاً مخفی می‌شود؛ اما در Masking می‌توان میزان دیده شدن بخش‌های مختلف تصویر را با سطوح مختلف شفافیت کنترل کرد.

در CSS عملیات Masking با استفاده از ویژگی mask-image انجام می‌شود. در این روش یک تصویر به عنوان ماسک تعریف می‌شود و مرورگر بر اساس رنگ‌ها و میزان شفافیت آن، مشخص می‌کند کدام بخش‌های عنصر نمایش داده شوند.

قانون کلی به این صورت است:

• رنگ مشکی کامل (black) → کاملاً قابل مشاهده
• رنگ شفاف (transparent) → کاملاً مخفی
• رنگ‌های نیمه شفاف → نمایش جزئی عنصر

از آنجایی که گرادینت‌های CSS نیز نوعی تصویر تولید می‌کنند، می‌توان از آن‌ها به عنوان ماسک استفاده کرد. همچنین تصاویر معمولی و ماسک‌های SVG نیز قابل استفاده هستند.

در ادامه سه روش اصلی استفاده از Masking را بررسی می‌کنیم.

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

ساده‌ترین روش استفاده از mask-image، استفاده از گرادینت‌های CSS است.

در مثال زیر یک گرادینت خطی از شفاف به مشکی ایجاد شده است:

.mask1 {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 25%,
    black 75%
  );

  mask-image: linear-gradient(
    to bottom,
    transparent 25%,
    black 75%
  );
}

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

افکت‌های خلاقانه با Radial Gradient

با استفاده از گرادینت‌های شعاعی می‌توان افکت‌های جذاب‌تری ایجاد کرد.

مثال اول

.mask2 {
  -webkit-mask-image: radial-gradient(
    circle at 50% 60%,
    black 50%,
    rgba(0, 0, 0, 0.6) 50%
  );

  mask-image: radial-gradient(
    circle at 50% 60%,
    black 50%,
    rgba(0, 0, 0, 0.6) 50%
  );
}

مثال دوم

.mask3 {
  -webkit-mask-image: radial-gradient(
    ellipse 90% 80% at 48% 78%,
    black 40%,
    transparent 50%
  );

  mask-image: radial-gradient(
    ellipse 90% 80% at 48% 78%,
    black 40%,
    transparent 50%
  );
}

با این تکنیک می‌توانید افکت‌هایی مانند نورپردازی، ویگنت (Vignette)، نمایش انتخابی بخش‌های تصویر و بسیاری جلوه‌های بصری دیگر ایجاد کنید.

استفاده از تصاویر به عنوان ماسک

علاوه بر گرادینت‌ها، می‌توان از تصاویر PNG یا سایر فرمت‌های تصویری نیز به عنوان ماسک استفاده کرد.

در مثال زیر یک تصویر طراحی‌شده در Sketch به عنوان ماسک استفاده شده است:

.mask4 {
  -webkit-mask-image: url("/path/to/image-mask.png");
  mask-image: url("/path/to/image-mask.png");

  -webkit-mask-size: 400px 600px;
  mask-size: 400px 600px;
}

در اینجا از mask-size نیز استفاده شده است.

دلیل این کار این است که تصویر ماسک اصلی ابعاد 1200×800 پیکسل دارد اما می‌خواهیم با نصف اندازه نمایش داده شود تا روی نمایشگرهای Retina همچنان کیفیت بالایی داشته باشد.

استفاده از SVG به عنوان ماسک

اگر با SVG کار می‌کنید، می‌توانید ماسک‌های بسیار قدرتمند و انعطاف‌پذیری ایجاد کنید.

برای این کار از عنصر <mask> در SVG استفاده می‌شود.

نکته مهم درباره ماسک‌های SVG این است که بر خلاف ماسک‌های CSS، از رنگ‌های سفید و مشکی استفاده می‌کنند.

در SVG:

• سفید → قابل مشاهده
• مشکی → مخفی
• خاکستری‌ها → نمایش نیمه شفاف

یعنی دقیقاً برعکس چیزی که معمولاً در ماسک‌های CSS با شفافیت مشاهده می‌کنیم.

مثال اول: ماسک مثلثی

ابتدا ماسک را در SVG تعریف می‌کنیم:

<svg width="0" height="0" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask">
      <rect
        fill="#000000"
        x="0"
        y="0"
        width="400"
        height="600">
      </rect>

      <polygon
        fill="#FFFFFF"
        points="200.5 152 349 449 52 449">
      </polygon>
    </mask>
  </defs>
</svg>

سپس آن را روی تصویر اعمال می‌کنیم:

.mask5 {
  -webkit-mask-image: url(#my-svg-mask);
  mask-image: url(#my-svg-mask);
}

در این حالت فقط بخش مثلثی تصویر نمایش داده می‌شود.

مثال دوم: ماسک حبابی (Bubbles)

در این روش همه چیز داخل خود SVG قرار دارد؛ هم ماسک و هم تصویر اصلی.

<svg width="400px" height="600px" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask2">
      <rect fill="#000000" x="0" y="0" width="400" height="600"></rect>

      <circle fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle>
      <circle fill="#FFFFFF" cx="296.59" cy="118.59" r="56.59"></circle>
      <circle fill="#FFFFFF" cx="53.46" cy="256.46" r="81.46"></circle>
      <circle fill="#FFFFFF" cx="239.58" cy="313.58" r="70.58"></circle>
      <circle fill="#FFFFFF" cx="366.59" cy="562.59" r="56.59"></circle>
      <circle fill="#FFFFFF" cx="93.20" cy="486.20" r="76.20"></circle>
    </mask>
  </defs>

  <image
    mask="url(#my-svg-mask2)"
    xlink:href="/images/css/masking/masking-example1.jpg"
    width="400"
    height="600">
  </image>
</svg>

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

جمع‌بندی

ویژگی mask-image یکی از قابلیت‌های قدرتمند CSS برای ایجاد افکت‌های بصری حرفه‌ای است. برخلاف clip-path که فقط امکان نمایش یا مخفی کردن کامل بخش‌هایی از یک عنصر را فراهم می‌کند، Masking اجازه می‌دهد میزان شفافیت هر قسمت را نیز کنترل کنید.

به طور کلی سه روش اصلی برای ایجاد ماسک در CSS وجود دارد:

• استفاده از گرادینت‌های CSS
• استفاده از تصاویر به عنوان ماسک
• استفاده از SVG Mask

اگر به دنبال ساخت افکت‌های مدرن، تصاویر خلاقانه و طراحی‌های متفاوت در رابط کاربری هستید، یادگیری Masking می‌تواند ابزار بسیار ارزشمندی در جعبه ابزار CSS شما باشد.