Funksioni linear-gradient

Funksioni linear-gradient përcakton një gradient linear. Zbatohet për vetitë që përcaktojnë një imazh sfondi: background, background-image ose një imazh kufiri: border-image, background-image-source.

Sintaksë

përzgjedhor {
	background: linear-gradient([kënd ose drejtim], ngjyra1 madhësia1, ngjyra2 madhësia2...);
}

Vlerat

Vlera	Përshkrim
drejtim	Përcakton një drejtim të caktuar të gradientit në çdo njësi për kënde ose me fjalë kyçe `top`, `left`, `right`, `bottom` ose kombinimin e tyre: `top left`, `top right` e kështu me radhë. Rendi i fjalëve nuk ka rëndësi: mund të shkruhet `top left` dhe `left top`, nuk ka ndryshim. Parametri nuk është i detyrueshëm: nëse nuk shkruhet, gradienti do të shkojë nga lart poshtë (si te `to top`). Para drejtimit vendoset fjala `to`.
kënd	Kënd në çdo njësi për kënde. Mund të jetë pozitiv ose negativ. Parametri nuk është 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 ngjyra.
ngjyra2	Ngjyra përfundimtare e gradientit në çdo njësi për ngjyra.
madhësi	Përcakton shtrirjen e një ngjyre të caktuar të gradientit në çdo njësi për madhësi.

Shembull . Varianti më i thjeshtë

Sintaksa:

përzgjedhor {
	background: linear-gradient(ngjyra fillestare, ngjyra përfundimtare);
}

Le të shohim një shembull:

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

#elem {
	background: linear-gradient(black, red);
	width: 200px;
	height: 200px;
}

Shembull . Shtojmë kënd

Sintaksa:

përzgjedhor {
	background: linear-gradient(kënd, ngjyra fillestare, ngjyra përfundimtare);
}

Le të shohim një shembull:

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

#elem {
	background: linear-gradient(45deg, black, red);
	width: 200px;
	height: 200px;
}

Shembull . Shtojmë drejtim

Në vend të këndit mund të shtohet drejtimi top, left, right, bottom ose kombinimi i tyre: top left, top right Para drejtimit vendoset fjala to.

Sintaksa:

përzgjedhor {
	background: linear-gradient(drejtim, ngjyra fillestare, ngjyra përfundimtare);
}

Le të shohim një shembull:

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

#elem {
	background: linear-gradient(to left, black, red);
	width: 200px;
	height: 200px;
}

Shembull . Shtojmë drejtim

Le të përcaktojmë një drejtim tjetër:

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

#elem {
	background: linear-gradient(to top left, black, red);
	width: 200px;
	height: 200px;
}

Shembull . Shtojmë madhësi

Sintaksa:

përzgjedhor {
	background: linear-gradient(ngjyra1 madhësia1, ngjyra2 madhësia2);
}

Në shembullin vijues sjellja do të jetë si më poshtë: ngjyra e kuqe e pastër do të jetë nga 0px deri në 30px, nga 30px deri në 50px do të jetë gradient nga e kuqja në të kaltër, dhe nga 50px e deri në fund - e kaltër e pastër:

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

#elem {
	background: linear-gradient(red 30px, blue 50px);
	width: 200px;
	height: 200px;
}

Shembull . Shtojmë më shumë se `2` ngjyra

Sintaksa:

përzgjedhor {
	background: linear-gradient(ngjyra1 madhësia1, ngjyra2 madhësia2, ngjyra3 madhësia3...);
}

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

#elem {
	background: linear-gradient(red 30px, blue 50px, green 70px);
	width: 200px;
	height: 200px;
}

Shembull . Kalime të mprehta

Në shembullin vijues sjellja do të jetë si më poshtë: ngjyra e kuqe e pastër do të jetë nga 0px deri në 30px, e kaltra e pastër - nga 30px deri në 60px, e gjelbëra e pastër - pas 60px (red 0px mund të mos shkruhet):

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

#elem {
	background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
	width: 200px;
	height: 200px;
}

Shembull . Madhësitë mund të jepen edhe në përqindje

Në shembullin vijues sjellja do të jetë si më poshtë: ngjyra e kuqe e pastër do të jetë nga 0% deri në 30%, e kaltra e pastër - nga 30% deri në 60%, e gjelbëra e pastër - pas 60% (red 0% mund të mos shkruhet):

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

#elem {
	background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
	width: 200px;
	height: 200px;
}

Shembull . Kombinim me background-size

Në shembullin vijues sjellja do të jetë si më poshtë: ngjyra e kuqe e pastër do të jetë nga 0px deri në 30px, e kaltra e pastër - nga 30px deri në 60px, ku e gjithë kjo do të përsëritet në copa prej 60px (për shkak të background-size: 60px;):

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

#elem {
	background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
	background-size: 60px 60px;
	width: 200px;
	height: 200px;
}

Shihni gjithashtu

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

Funksioni linear-gradient

Sintaksë

Vlerat

Shembull . Varianti më i thjeshtë

Shembull . Shtojmë kënd

Shembull . Shtojmë drejtim

Shembull . Shtojmë drejtim

Shembull . Shtojmë madhësi

Shembull . Shtojmë më shumë se 2 ngjyra

Shembull . Kalime të mprehta

Shembull . Madhësitë mund të jepen edhe në përqindje

Shembull . Kombinim me background-size

Shihni gjithashtu

Shembull . Shtojmë më shumë se `2` ngjyra