CSS Masking

CSS masking element ustiga maska qo‘yib, uni qisman yoki to‘liq yashirish imkonini beradi. Oddiy qilib aytganda, mask layer elementning ko‘rinadigan qismlarini aniqlab beradi.

Udemere

Asosiy property’lar

mask-image – maska sifatida ishlatiladigan rasm yoki gradient.
mask-repeat – mask tasvirining takrorlanishi.
mask-position – mask tasvirining joylashuvi.
mask-size – mask tasvirining o‘lchami.
mask-composite – bir nechta maskalarni birlashtirish usuli.
mask-border – border uchun mask.
-webkit-mask – Safari va Webkit brauzerlarda qo‘llanadigan prefiks.

1. Oddiy mask-image bilan misol

<style>
	.box {
		width: 300px;
		height: 200px;
		background: url('https://picsum.photos/id/1015/600/400') center/cover;
		-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Star_empty.svg/200px-Star_empty.svg.png');
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 150px;
		mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Star_empty.svg/200px-Star_empty.svg.png');
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 150px;
	}
</style>
 
<div class="box"></div>

Natija: Fon rasmi faqat yulduz shaklidagi mask ichida ko‘rinadi.

2. Gradientni mask sifatida ishlatish

<style>
	.box2 {
		width: 300px;
		height: 200px;
		background: url('https://picsum.photos/id/1025/600/400') center/cover;
		-webkit-mask-image: linear-gradient(
			to right,
			rgba(0, 0, 0, 1),
			rgba(0, 0, 0, 0)
		);
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: cover;
		mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
		mask-repeat: no-repeat;
		mask-size: cover;
	}
</style>
 
<div class="box2"></div>

Natija: Rasm chapdan o‘ngga qarab asta-sekin yo‘qoladi.

3. Bir nechta mask qo‘shish

<style>
	.box3 {
		width: 300px;
		height: 200px;
		background: url('https://picsum.photos/id/1035/600/400') center/cover;
		-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/8/88/OOjs_UI_icon_heart.svg'),
			url('https://upload.wikimedia.org/wikipedia/commons/5/55/Star_full.svg');
		-webkit-mask-repeat: no-repeat, no-repeat;
		-webkit-mask-position: left center, right center;
		-webkit-mask-size: 80px, 80px;
		mask-image: url('https://upload.wikimedia.org/wikipedia/commons/8/88/OOjs_UI_icon_heart.svg'),
			url('https://upload.wikimedia.org/wikipedia/commons/5/55/Star_full.svg');
		mask-repeat: no-repeat, no-repeat;
		mask-position: left center, right center;
		mask-size: 80px, 80px;
	}
</style>
 
<div class="box3"></div>

Natija: Rasm faqat yurak va yulduz shakli ichida ko‘rinadi.

4. Text bilan mask

<style>
	.text-mask {
		font-size: 60px;
		font-weight: bold;
		background: url('https://picsum.photos/id/1041/600/400') center/cover;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>
 
<div class="text-mask">MASKING</div>

Natija: Matnning ichidan rasm ko‘rinadi.

Amaliy maslahatlar

mask-image ishlatishda SVG ni afzal ko‘ring, chunki u sifatini yo‘qotmaydi.
Har doim -webkit- prefiksini qo‘shing, chunki ko‘plab brauzerlar (Safari) shuni talab qiladi.
mask effekti GPU bilan tezlashtiriladi, shuning uchun animatsiya va hover effektlarda ham ishlatish mumkin.

CSS Masking – vizual effektlar yaratishda juda qulay texnika. Rasmni turli shakllarga kesib ko‘rsatish, gradient asosida yashirish yoki matnga rasm joylash — bularning hammasi foydalanuvchilar e’tiborini tortadigan kreativ interfeys elementlarini yaratishga yordam beradi.

Masking