Veturia mask-clip

Veturia mask-clip vendos zonën e elementit brenda së cilës do të shfaqet maska. Ajo përcakton se cilat pjesë të elementit do të preken nga maskimi, dhe cilat do të mbeten të dukshme pa ndryshime.

Sintaksa

përzgjedhësi {
	mask-clip: vlerë | no-clip;
}

Vlerat

Vlera	Përshkrimi
`border-box`	Masku aplikohet në zonë, duke përfshirë kufijtë e elementit.
`padding-box`	Masku aplikohet në zonë, duke përfshirë padding, por jo kufijtë.
`content-box`	Masku aplikohet vetëm në përmbajtjen e elementit.
`margin-box`	Masku aplikohet në zonë, duke përfshirë margin (eksperimentale).
`fill-box`	Masku aplikohet në bounding box të objektit (për SVG).
`stroke-box`	Masku aplikohet në stroke bounding box (për SVG).
`view-box`	Masku aplikohet në viewbox (për SVG).
`no-clip`	Masku nuk kufizohet nga zona e elementit.

Vlera e paracaktuar: border-box.

Shembull . Zbatimi i mask-clip në zona të ndryshme

Krahasojmë vlera të ndryshme të mask-clip në një element me kufij dhe hapësira:

<div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>

.box {
	width: 200px;
	height: 100px;
	margin: 20px;
	padding: 20px;
	border: 10px dashed black;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, black, transparent);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	display: inline-block;
}

.border-box {
	mask-clip: border-box;
}

.padding-box {
	mask-clip: padding-box;
}

.content-box {
	mask-clip: content-box;
}

Shembull . Përdorimi i no-clip

Demonstrim i vlerës no-clip, kur masku del përtej kufijve të elementit:

<div id="elem"></div>

#elem {
	width: 200px;
	height: 200px;
	background: linear-gradient(45deg, red, blue);
	mask-image: radial-gradient(circle, black 50%, transparent 70%);
	mask-size: 300px 300px;
	mask-position: center;
	mask-clip: no-clip;
	border: 2px solid black;
}

Shembull . SVG me vlera të ndryshme mask-clip

Zbatimi i vlerave të ndryshme në një element SVG:

<svg width="400" height="200">
	<defs>
		<mask id="mask1" maskContentUnits="objectBoundingBox">
			<rect x="0.1" y="0.1" width="0.8" height="0.8" fill="white"/>
		</mask>
	</defs>
	
	<rect x="10" y="10" width="180" height="180" fill="blue" 
		mask="url(#mask1)" mask-clip="fill-box"/>
		
	<rect x="210" y="10" width="180" height="180" fill="red" 
		mask="url(#mask1)" mask-clip="view-box"/>
</svg>

Shihni gjithashtu

veturia mask-origin,
përcakton pozicionin fillestar të maskës
veturia mask-image,
cakton imazhin për maskë
veturia mask,
shkurtim për të gjitha vetitë e maskimit
veturia clip-path,
krijon një zonë prerëse për elementin