تصویر نویسنده

۳۰ شهریور ۱۳۹۹

0

چگونه از ماسک کردن در CSS استفاده کنیم

آموزش

وقتی با استفاده از خاصیت clip-path عنصری را برش می دهید، منطقه بریده شده نامرئی می شود. اگر می خواهید بخشی از تصویر را مات کنید یا جلوه دیگری روی آن اعمال کنید، باید از ماسک کردن استفاده کنید.

این پست نحوه استفاده از ویژگی mask-image در CSS را توضیح می دهد، که به شما امکان می دهد تصویری را برای استفاده به عنوان لایه ماسک تعیین کنید.

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

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

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

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

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

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

ماسک کردن با یک تصویر

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

یک منطقه کاملاً روشن باعث می شود که بخشی از تصویر که در زیرش است، قابل مشاهده نباشد.

استفاده از منطقه ای که نیمه روشن باشد، به بخشی از تصویر اصلی امکان دیده شدن می دهد. شما می توانید تفاوت این دو را در زیر مشاهده کنید.

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

See the Pen RwaeMVY by pouya (@pouyavatani) on CodePen.

در این مثال من از ویژگی mask-size با مقدار پوشش نیز استفاده می کنم. این ویژگی همانند background-size کار می کند. می توانید از keywords cover و 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);
}
مثالی از ماسک کردن SVG

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

با این وجود همه چیز از دست نرفته است، زیرا در رایج ترین سناریوی ماسک کردن تصویر، می توانیم تصویر را در SVG بگنجانیم.

See the Pen mask-image-svg-image by pouya (@pouyavatani) on CodePen.

ماسک کردن با یک گرادیان

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

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

See the Pen mask linear gradient by pouya (@pouyavatani) on CodePen.

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

See the Pen mask radial gradient by pouya (@pouyavatani) on CodePen.

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

همانند تصاویر پس زمینه، می توانید چندین منبع ماسک را تعیین کرده و با ترکیب آنها، جلوه مورد نظر خود را بدست آورید.

این امر به ویژه اگر می خواهید از الگویی که با گرادیان های 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;

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

-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 را دوباره مخلوط کرده و سایر تغییرات را آزمایش کنید.

See the Pen mask-checkers by pouya (@pouyavatani) on CodePen.

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

منبع : web.dev

۰ ۰ vote
Article Rating