افکت‌ها را با ویژگی mask-image CSS روی تصاویر اعمال کنید

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

Rachel Andrew

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

سازگاری با مرورگر

اکثر مرورگرها فقط از ویژگی استاندارد پوشش CSS پشتیبانی می کنند. برای دستیابی به بهترین سازگاری مرورگر، علاوه بر ویژگی استاندارد، باید از پیشوند -webkit- استفاده کنید. ببینید آیا می توانم از ماسک های CSS استفاده کنم؟ برای اطلاعات کامل پشتیبانی مرورگر.

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

• 120
• 79
• 53
• 15.4

منبع

در حالی که پشتیبانی مرورگر با استفاده از ویژگی پیشوندی خوب است، هنگام استفاده از ماسک برای قابل مشاهده کردن متن بالای تصویر، مراقب باشید که اگر ماسک در دسترس نباشد چه اتفاقی می‌افتد. ممکن است ارزش استفاده از پرس و جوهای ویژگی برای شناسایی پشتیبانی از mask-image یا -webkit-mask-image و ارائه یک بازگشت قابل خواندن قبل از افزودن نسخه ماسک شده باشد.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

نقاب زدن با تصویر

ویژگی mask-image به روشی مشابه با ویژگی background-image کار می کند. از یک مقدار url() برای ارسال در یک تصویر استفاده کنید. تصویر ماسک شما باید یک ناحیه شفاف یا نیمه شفاف داشته باشد.

یک ناحیه کاملا شفاف باعث می شود که بخشی از تصویر زیر آن ناحیه نامرئی شود. با این حال، استفاده از ناحیه ای که نیمه شفاف است به بخشی از تصویر اصلی اجازه می دهد تا از طریق آن نشان داده شود. می توانید تفاوت در Glitch را در زیر مشاهده کنید. تصویر اول تصویر اصلی بادکنک های بدون ماسک است. تصویر دوم دارای ماسکی است که یک ستاره سفید روی پس‌زمینه کاملا شفاف دارد. تصویر سوم دارای یک ستاره سفید در پس زمینه با شفافیت گرادیان است.

در این مثال من از ویژگی mask-size با مقدار cover استفاده می کنم. این ویژگی مانند background-size کار می کند. می‌توانید از کلیدواژه‌های cover and contain استفاده کنید یا می‌توانید با استفاده از هر واحد طول معتبر یا یک درصد به پس‌زمینه اندازه بدهید.

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

پوشش با SVG

به جای استفاده از یک فایل تصویری به عنوان ماسک، می توانید از SVG استفاده کنید. چند راه وجود دارد که می توان به این امر دست یافت. اولین مورد این است که یک عنصر <mask> در SVG داشته باشید و به شناسه آن عنصر در ویژگی mask-image ارجاع دهید.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

مزیت این روش این است که ماسک را می توان بر روی هر عنصر HTML اعمال کرد، نه فقط یک تصویر. متأسفانه فایرفاکس تنها مرورگری است که از این روش پشتیبانی می کند.

با این حال، همه چیز از بین نمی رود، همانطور که برای رایج ترین سناریوی ماسک کردن یک تصویر، می توانیم تصویر را در SVG قرار دهیم.

پوشش با گرادیان

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

برای مثال، یک گرادیان خطی ساده که به عنوان ماسک استفاده می‌شود، می‌تواند تضمین کند که قسمت پایین تصویر در زیر یک عنوان خیلی تاریک نخواهد بود.

می‌توانید از هر یک از انواع گرادینت‌های پشتیبانی‌شده استفاده کنید و هر چقدر که دوست دارید خلاق باشید. این مثال بعدی از یک گرادیان شعاعی برای ایجاد یک ماسک دایره ای برای روشن کردن پشت عنوان استفاده می کند.

استفاده از چند ماسک

همانند تصاویر پس‌زمینه، می‌توانید چندین منبع ماسک را مشخص کنید و آنها را با هم ترکیب کنید تا به جلوه‌ای که می‌خواهید برسید. اگر بخواهید از یک الگوی تولید شده با گرادیان های CSS به عنوان ماسک خود استفاده کنید، این به ویژه مفید است. اینها معمولاً از چندین تصویر پس‌زمینه استفاده می‌کنند و بنابراین می‌توانند به راحتی به یک ماسک ترجمه شوند.

به عنوان مثال، من یک الگوی شطرنجی زیبا در این مقاله پیدا کردم. کد با استفاده از تصاویر پس زمینه به صورت زیر است:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

برای تبدیل این یا هر الگوی دیگری که برای تصاویر پس‌زمینه طراحی شده است، به ماسک، باید ویژگی‌های background-* را با ویژگی‌های mask مربوطه، از جمله موارد با پیشوند -webkit جایگزین کنید.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

با اعمال الگوهای گرادیان روی تصاویر می توان جلوه های بسیار خوبی ایجاد کرد. سعی کنید Glitch را مجدداً مخلوط کنید و برخی از تغییرات دیگر را آزمایش کنید.

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

عکس از جولیو ریالدو در Unsplash .