Gradient bilan niqoblash
CSS gradient maska qatlamlari
CSS gradientlari niqob qatlami tasviri sifatida ham ishlatilishi mumkin.
Chiziqli gradient maska qatlami
Bu yerda rasmingiz uchun chiziqli gradient maska qatlamidan foydalanamiz. Bu chiziqli gradient yuqoridan (qora) pastga (shaffof) yo‘naladi:
Misol
Chiziqli gradientdan niqob qatlami sifatida foydalanish:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
O‘zingiz sinab ko‘ring »
Bu yerda rasmingiz uchun maska qatlami sifatida chiziqli gradient bilan birga matn masking‘dan foydalanamiz:
Cinque Terre — Italiyaning shimoli-g‘arbida, Liguriya mintaqasidagi qirg‘oq hududi. La Spezia viloyatining g‘arbida joylashgan bo‘lib, beshta qishloqni o‘z ichiga oladi: Monterosso al Mare, Vernazza, Corniglia, Manarola va Riomaggiore.
Cinque Terre — Italiyaning shimoli-g‘arbida, Liguriya mintaqasidagi qirg‘oq hududi. La Spezia viloyatining g‘arbida joylashgan bo‘lib, beshta qishloqni o‘z ichiga oladi: Monterosso al Mare, Vernazza, Corniglia, Manarola va Riomaggiore.
Misol
Maska qatlami sifatida chiziqli gradient bilan birga matn masking‘dan foydalanish:
.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);
}
O‘zingiz sinab ko‘ring »
Radial gradient maska qatlami — doira
Bu yerda rasmingiz uchun maska qatlami sifatida radial gradientdan (doira shaklida) foydalanamiz:
Misol
Radial gradientdan niqob qatlami sifatida foydalanish (aylana):
.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%);
}
O‘zingiz sinab ko‘ring »
Radial gradient maska qatlami — ellips
Bu yerda rasmingiz uchun maska qatlami sifatida radial gradientdan (ellips shaklida) foydalanamiz:
Misol
Radial gradientdan niqob qatlami sifatida foydalanish (ellips):
.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%);
}
O‘zingiz sinab ko‘ring »
Konik gradient maska qatlami
Bu yerda rasmingiz uchun maska qatlami sifatida konik gradientdan foydalanamiz:
Misol
Radial gradientdan niqob qatlami sifatida foydalanish (ellips):
.mask3 {
-webkit-mask-image: conic-gradient(black 0deg,
transparent 360deg);
mask-image: conic-gradient(black 0deg, transparent
360deg);
}
O‘zingiz sinab ko‘ring »
Barcha CSS masking xossalari
Quyidagi jadval barcha CSS masking xossalarini sanab o‘tadi:
| Xususiyat | Tavsif |
|---|---|
| mask-clip | Niqob tasviri qaysi hududga ta’sir qilishini belgilaydi |
| mask-composite | Joriy niqob qatlamida, uning ostidagi niqob qatlamlarida qo‘llaniladigan kompozitsion operatsiyani belgilaydi |
| mask-image | Element uchun niqob qatlami sifatida foydalaniladigan tasvirni belgilaydi |
| mask-mode | Niqob qatlami tasvirining yorqinlik niqobi yoki alfa niqobi sifatida ko‘rib chiqilishini belgilaydi |
| mask-origin | Niqob qatlami rasmining boshlanish joyini (niqob joylashuv sohasini) belgilaydi |
| mask-position | Niqob qatlami rasmining boshlang‘ich joylashuvini o‘rnatadi (niqob joylashuv sohasiga nisbatan) |
| mask-repeat | Niqob qatlami tasviri qanday takrorlanishini belgilaydi |
| mask-size | Niqob qatlami tasvirining hajmini belgilaydi |
| mask-type | SVG <maska> elementi yorqinlik niqobi yoki alfa niqobi sifatida ko‘rib chiqilishini belgilaydi. |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!