Funksioni repeating-linear-gradient

Funksioni repeating-linear-gradient përcakton një gradient linear të përsëritur. Kjo do të thotë se ne përcaktojmë një model të caktuar gradienti, për shembull, nga 0px në 10px - gradient nga e kuqja në kaltërsirinë dhe ky gradient do të përsëritet në të gjithë bllokun: 0px në 10px, nga 10px në 20px, nga 20px në 30px dhe kështu me radhë.

Ky funksion aplikohet për vetitë që përcaktojnë figurën e sfondit: background, background-image ose figurën e kufirit: border-image, background-image-source.

Sintaksa

përzgjedhësi {
	background: repeating-linear-gradient([drejtim], ngjyra1 madhësia1, ngjyra2 madhësia2...);
}

Vlerat

Vlera	Përshkrimi
drejtim	Përcakton një drejtim të caktuar të gradientit në çdo njësi për këndet ose me fjalë kyçe `top`, `left`, `right`, `bottom` ose kombinimin e tyre. Rendi i fjalëve nuk ka rëndësi. Parametri është jo i detyrueshëm: nëse nuk shkruhet, gradienti do të shkojë nga lart poshtë. Para drejtimit vendoset fjala `to`.
kënd	Këndi në çdo njësi për këndet. Mund të jetë pozitiv ose negativ. Parametri është jo i detyrueshëm. Njëkohësisht mund të jepet ose këndi, ose drejtimi (ose asgjë fare).
ngjyra1	Ngjyra fillestare e gradientit në çdo njësi për ngjyrën.
ngjyra2	Ngjyra përfundimtare e gradientit në çdo njësi për ngjyrën.
madhësia	Përcakton shtrirjen e një ngjyre të caktuar gradienti në çdo njësi për madhësinë.

Shembull . Varianti më i thjeshtë

Gradienti do të duket kështu: nga 0px në 20px ngjyrë e kuqe e pastër, nga 20px në 40px - gradient nga e kuqja në kaltërsirinë. Dhe kështu do të përsëritet nga lart poshtë (për këtë është ai gradient i përsëritur):

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

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Shembull . Ngjyra të qarta

Gradienti do të duket kështu: nga 0px në 20px ngjyrë e kuqe e pastër, nga 20px në 40px - kaltërsiri e pastër (veçoria është se ngjyra e dytë fillon aty ku përfundon e para). Dhe kështu do të përsëritet nga lart poshtë:

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

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Shembull . Ndryshojmë drejtimin

Tani drejtimi i gradientit do të jetë nga e djathta në të majtë:

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

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Shembull . Drejtimi në gradë

Si drejtim do të përcaktojmë një kënd në gradë:

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

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Shembull . Vlerë negative

Le ta bëjmë drejtimin me vlerë negative:

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

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Shihni gjithashtu

funksionin repeating-radial-gradient,
i cili krijon një gradient radial të përsëritur
funksionin linear-gradient,
i cili krijon një gradient linear
funksionin radial-gradient,
i cili krijon një gradient radial