ویژگی 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);
}
پشتیبانی مرورگر ها
در حال حاضر برخی از ویژگی های ماسک کردن در هیچ مرورگری پشتیبانی نمی شود.
با عرض سلام و خسته نباشید 😃
سید جان عالی بود خسته نباشی و ممنون که فقط نشستی پشت (کامپیوتر) و انجامش دادی(اشاره به وبلاگ زیبات و مطالب انگیزشی فوقالعاده😅🌸)
آها راستی اومده بودم بگم من نفهمیدم
Mask-border چی هست و مطلبش هم نبود تو سایت متاسفانه،اما اینجا گفتی که ریسیت میشه ممنون میشم با قلم زیبات بهمون بیاموزی و یاد بدیش😁💖
(لطفاً یکم طنز بینظیر قلمت رو هم بیشتر و بیشترش کن😅🙏)
آفرین خوب بود 😅
سلام، آره هنوز مطلبش رو ننوشتیم، اسمش میگه که میشه مسک رو روی حاشیه عنصر اعمال کرد.
فعلا اینو بخونید تا برای نسل های بعد مطلبش رو توی سایت هم بزاریم:
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border
اینجا نمیشه خیلی شوخی کرد خونواده رفت و آمد میکنه، شوخی مال بلاگ شخصی فقط ;)