آموزش ماسک گذاری گرادینت(Gradient) در CSS

ما می توانیم از گرادینت های CSS در تصاویر لایه ی ماسک نیز استفاده کنیم. 

استفاده از لایه ی ماسک گرادینت خطی

ما در اینجا، از یک لایه ی ماسک گرادینت خطی برای تصویر خود استفاده کرده ایم. این گرادینت خطی، از بالا(به صورت سیاه) تا پایین(به صورت شفاف) ایجاد شده است. 

.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) - دایره ای

در اینجا، از یک گرادینت شعاعی(به شکل یک دایره) بعنوان لایه ی ماسک برای تصویر خود استفاده کرده ایم:

.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)

.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)

در اینجا، از یک گرادینت مخروطی، بعنوان لایه ی ماسک برای تصویر خود استفاده کرده ایم:

.mask3 {
  -webkit-mask-image: conic-gradient(black 0deg, transparent 360deg);
  mask-image: conic-gradient(black 0deg, transparent 360deg);
}

تمام ویژگی های ماسک گذاری در CSS

در جدول زیر، لیست تمام ویژگی های ماسک گذاری در CSS نشان داده شده است: