mask-clip

ویژگی mask-clip تعیین می کند که لایه ماسک بر روی کدام نواحی عنصر تاثیر گذار باشد.

مقادیر ویژگی mask-clip

مقادیر این ویژگی مشابه background-clip می باشد با این تفاوت که ویژگی mask-clip سه مقدار بیشتر می پذیرد که آنها برای عناصر SVG مورد استفاده قرار می گیرند.


mask-clip: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip

چهار مقدار margin-box, border-box, padding-box و content-box بر روی عناصر HTML اعمال می شوند، و اگر برای عناصر SVG از آنها استفاده شود تبدیل به مقدار fill-box برای آن عنصر SVG خواهند شد.

سه مقدار fill-box, stroke-box و view-box بر روی عناصر SVG اعمال می شوند و اگر برای عناصر HTML از آنها استفاده شود تبدیل به مقدار اولیه ویژگی mask-clip برای آن عنصر HTML خواهند شد.

عنصر زیر دارای 20 پیکسل border و 20 پیکسل padding می باشد.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quas obcaecati eligendi. Provident maiores nisi, fugit impedit aliquam ipsa autem eveniet rerum, accusamus doloremque illum iure dolor dolore adipisci quibusdam.

لایه ماسکی بر روی این عنصر بصورت زیر اعمال می کنیم:


.el {
  mask-image: url(masklayer.png);
  mask-size: 100px auto;
}

در ادامه مقادیر زیر را با استفاده از این مثال بررسی می کنیم:

content-box

لایه ماسک بر ناحیه content-box (یعنی قسمتی که محتوا در آن قرار میگیرد و همان داخلی ترین ناحیه) تاثیر خواهد گذاشت.


.el {
  mask-clip: content-box;
}

نتیجه مثال بالا بصورت زیر خواهد بود:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quas obcaecati eligendi. Provident maiores nisi, fugit impedit aliquam ipsa autem eveniet rerum, accusamus doloremque illum iure dolor dolore adipisci quibusdam.

padding-box

تعیین مقدار padding-box برای ویژگی mask-clip باعث می شود تا لایه ماسک فقط بر روی ناحیه محدود به Padding تاثیر بگذارد:


.el {
  mask-clip: padding-box;
}

نتیجه مثال بالا بصورت زیر خواهد بود:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quas obcaecati eligendi. Provident maiores nisi, fugit impedit aliquam ipsa autem eveniet rerum, accusamus doloremque illum iure dolor dolore adipisci quibusdam.

همانطور که مشاهده می کنید این بار فقط ناحیه Padding و ناحیه های داخلی تر نسبت به آن ماسک شدند.

border-box

border-box مقدار پیش فرض و اولیه ویژگی می باشد.

تعیین مقدار border-box برای ویژگی mask-clip باعث می شود تا لایه ماسک فقط بر روی ناحیه محدود به Border تاثیر بگذارد:


.el {
  mask-clip: border-box;
}

نتیجه مثال بالا بصورت زیر خواهد بود:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quas obcaecati eligendi. Provident maiores nisi, fugit impedit aliquam ipsa autem eveniet rerum, accusamus doloremque illum iure dolor dolore adipisci quibusdam.

margin-box

تعیین مقدار margin-box برای ویژگی mask-clip باعث می شود تا لایه ماسک فقط بر روی ناحیه محدود به margin و ناحیه های داخلی نسبت به آن تاثیر بگذارد:


.el {
  mask-clip: margin-box;
}

fill-box

این مقدار برای عناصر SVG تعیین می شود و باعث می شود تا لایه ماسک فقط بر روی خود شیء تاثیر بگذارد و نه حاشیه و خطوط بیرونی آن.

stroke-box

این مقدار برای عناصر SVG تعیین می شود و باعث می شود تا لایه ماسک بر روی خود شی و Stroke یا خط بیرونی شیء تاثیر گذار باشد.

view-box

این مقدار نیز برای عناصر SVG تعیین می شود و ناحیه ماسک کردن به نزدیک ترین viewport محدود می شود.

اگر مقادیر viewBox برای عنصر تعیین شده باشند در نتیجه ناحیه ماسک کردن به همان مختصات تعیین شده توسط viewBox محدود می شود.

no-clip

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

تعیین این ویژگی برای چند لایه

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


.el {
    mask-image: url(myMask.png), url(secondMask.png);
    mask-clip: content-box, border-box;
}

دمو

دموی زیر را بررسی کنید و مقادیر آن را برای ویژگی mask-clip تغییر دهید:

 

See the Pen mask-clip by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *