ماسک گذاری گرادیانی در CSS (Masking - Gradients)
در «ماسک گذاری گرادیانی» می توانید از گرادیان ها (Gradient) به عنوان تصویر ماسک استفاده کنید. بدین ترتیب بخش هایی از عنصر به صورت تدریجی پنهان یا نمایان می شوند و جلوه های ظریفی ایجاد می گردد.
لایه ماسک گرادیانی در CSS
گرادیان های CSS را می توان به عنوان mask-image به کار برد. مرورگر نواحی تیره را شفاف تر و نواحی روشن تر را نمایان تر نمایش می دهد.
Linear Gradient به عنوان ماسک
نمونه ای از ماسک خطی که از بالا (سیاه) به پایین (شفاف) می رود:
.mask1 { -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black, transparent); }همچنین می توان از ماسک خطی روی پس زمینه متنی/تصویری استفاده کرد:
.mask1 { max-width: 600px; height: 400px; background: url(img_5terre.jpg) no-repeat; -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black, transparent); }Radial Gradient (دایره)
گرادیان شعاعی دایره ای به عنوان ماسک:
.mask2 { -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); }Radial Gradient (بیضی)
گرادیان شعاعی بیضی شکل به عنوان ماسک:
.mask3 { -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%); }Conic Gradient به عنوان ماسک
گرادیان مخروطی (Conic) نیز قابل استفاده است:
.mask3 { -webkit-mask-image: conic-gradient(black 0deg, transparent 360deg); mask-image: conic-gradient(black 0deg, transparent 360deg); }نکته: برای کنترل بهتر قاب تصویر از object-fit و برای جابه جایی محتوا از object-position کمک بگیرید.
خواص مرتبط با ماسک گذاری
mask-image: تعیین منبع ماسک (گرادیان، PNG، SVG).mask-repeat: نحوه تکرار ماسک.mask-position: موقعیت شروع ماسک.mask-size: اندازه ماسک نسبت به عنصر.
هشدار: برای سازگاری، مقادیر را هم با -webkit- و هم بدون پیشوند تعریف کنید.
منابع و ادامه مطالعه
ماسک گذاری با PNG • اشکال تصویر • ماسک گذاری گرادیانی
MDN: mask-image و MDN: linear-gradient() جزئیات و نکات سازگاری مرورگرها را توضیح می دهند.