mask

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

ویژگی هایی که می توانند توسط ویژگی mask مقدار دهی شوند به شرح زیر می باشند:

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

فرض کنید فقط تصویر لایه ماسک را توسط این ویژگی تعریف کنیم:


.masked-element {
  mask: url(mask.png);
}

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


.masked-element {

  mask: url(mask.png);

  mask-mode: match-source; /* initial value */
  mask-position: 0% 0%;    /* initial value */
  mask-size: auto;         /* initial value */
  mask-repeat: repeat;     /* initial value */
  mask-origin: border-box; /* initial value */
  mask-clip: border-box;   /* initial value */
  mask-composite: add  ;   /* initial value */
}

همچنین این ویژگی مقدار mask-border را نیز به مقدار اولیه آن ریست می کند.

⚠ ترتیب نوشتن ویژگی ها می تواند متفاوت باشد اما نکته مهمی که باید توجه کنیم این است که mask-size حتما باید بعد از mask-position باشد و حتما باید یک اسلش بین آنها قرار بگیرد:


.masked-element {
  mask: url(mask.png) luminance 50% 50% / contain no-repeat border-box;
}

به عبارت دیگر هیچگاه نمی شود به تنهایی mask-size را توسط این ویژگی مقداردهی کرد باید حتما mask-position را هم قبل از آن مقداردهی کنیم.

⚠ همانطور که می دانید مقادیر mask-clip و mask-origin یکسان و مشابه می باشند. حال اگر در زمان مختصر نویسی مثلا فقط یک مقدار padding-box تعریف کنیم، مربوط به کدام یک از این ویژگی ها خواهد بود؟

اگر فقط یک مقدار تعریف شود آن مقدار برای هر دو ویژگی تنظیم می شود و اگر دو مقدار تعریف شود مقدار اول مربوط به mask-origin و مقدار دوم مربوط به mask-clip خواهد بود.

⚠ همانطور که گفته شد می توان توسط این ویژگی برای چند لایه ماسک مقدار تعریف کرد که هر لایه را با استفاده از ویرگول از لایه دیگر جدا می کنیم:


.masked-element {
  mask: url(my-mask.png) alpha center no-repeat exclude, linear-gradient(black, transparent);
}

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

در حال حاضر برخی از ویژگی های ماسک کردن در هیچ مرورگری پشتیبانی نمی شود.

2 دیدگاه برای “mask

  1. با عرض سلام و خسته نباشید 😃
    سید جان عالی بود خسته نباشی و ممنون که فقط نشستی پشت (کامپیوتر) و انجامش دادی(اشاره به وبلاگ زیبات و مطالب انگیزشی فوق‌العاده😅🌸)
    آها راستی اومده بودم بگم من نفهمیدم
    Mask-border چی هست و مطلبش هم نبود تو سایت متاسفانه،اما اینجا گفتی که ریسیت میشه ممنون میشم با قلم زیبات بهمون بیاموزی و یاد بدیش😁💖
    (لطفاً یکم طنز بینظیر قلمت رو هم بیشتر و بیشترش کن😅🙏)

    1. آفرین خوب بود 😅

      سلام، آره هنوز مطلبش رو ننوشتیم، اسمش میگه که میشه مسک رو روی حاشیه عنصر اعمال کرد.

      فعلا اینو بخونید تا برای نسل های بعد مطلبش رو توی سایت هم بزاریم:

      https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border

      اینجا نمیشه خیلی شوخی کرد خونواده رفت و آمد میکنه، شوخی مال بلاگ شخصی فقط ;)

سوال داری؟ برو به پنل پرسش و پاسخ

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