Funksioni radial-gradient

Funksioni radial-gradient përcakton një gradient radial. Ky funksion aplikohet për vetitë që përcaktojnë një imazh sfondi: background, background-image ose imazhin e kufirit: border-image, background-image-source.

Sintaksa

selektori {
	background: radial-gradient([formë lloj pozicion], ngjyra1 madhësia1, ngjyra2 madhësia2...);
}

Vlerat

Vlera	Përshkrimi
formë	Vlerat e pranuara: `ellipse` gradient eliptik (parazgjedhje), `circle` gradient rrethor.
lloji	Përcakton shtrirjen e gradientit. Vlerat e pranuara: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`.
pozicion	Pas fjalës kyçe `at` përcaktohet pozicioni në çdo njësi për madhësi ose me ndihmën e fjalëve kyçe `top`, `bottom`, `left`, `right`, `center` në kombinime të ndryshme.
ngjyra1	Ngjyra fillestare e gradientit në çdo njësi për ngjyrë.
ngjyra2	Ngjyra përfundimtare e gradientit në çdo njësi për ngjyrë.
madhësi	Përcakton shtrirjen e një ngjyre të caktuar të gradientit në çdo njësi për madhësi.

Vlerat për llojin

Vlera	Përshkrimi
`closest-side`	Forma e gradientit përkon me anën më të afërt të bllokut.
`closest-corner`	Forma e gradientit llogaritet bazuar në informacionin për distancën deri te cepi më i afërt i bllokut.
`farthest-side`	Gradienti shtrihet deri në anën më të largët të bllokut.
`farthest-corner`	Forma e gradientit llogaritet bazuar në informacionin për distancën deri te cepi më i largët i bllokut.

Vërejtje

Llojin dhe formën mund t'i ndërroni vendet, por pozicioni duhet të shkojë në fund të parametrit të parë. Lloji i gradientit dhe madhësia e tij nuk punojnë njëri me tjetrin (logjikisht, pasi ato kundërshtohen). Fiton madhësia.

Shembull . Varianti më i thjeshtë

Le të përcaktojmë thjesht ngjyrën fillestare dhe atë përfundimtare:

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

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

Shembull . Le të shtojmë pozicion

Le të përcaktojmë pozicionin e qendrës: 30px - zhvendosja nga e majta, 100px - zhvendosja nga lart:

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

#elem {
	background: radial-gradient(at 30px 100px, red, blue);
	width: 200px;
	height: 200px;
}

Shembull . Pozicion në përqindje

Le të përcaktojmë pozicionin e qendrës në përqindje: 30% - zhvendosja nga e majta, 50% - zhvendosja nga lart:

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

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

Shembull . Pozicion me fjalë kyçe

Mund të përdorni fjalët kyçe top, bottom, left, right, center në kombinime të ndryshme. Le të vendosim, për shembull, gradientin në të djathtë në qendër:

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

#elem {
	background: radial-gradient(at right center, red, blue);
	width: 200px;
	height: 200px;
}

Shembull . Madhësia e gradientit

Në këtë rast gradienti do të funksionojë kështu: nga 0px deri në 20px do të ketë ngjyrë të kuqe të pastër, nga 20px deri në 60px - gradient nga e kuqja në të kaltër, pas 60px - të kaltër e pastër:

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

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Shembull . Disa ngjyra radhazi

Në këtë rast gradienti do të funksionojë kështu: nga 0px deri në 20px do të ketë ngjyrë të kuqe të pastër, nga 20px deri në 40px do të ketë ngjyrë të kaltër të pastër, nga 40px deri në 60px - gradient nga e kaltra në të gjelbër, pas 60px - të gjelbër të pastër:

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

#elem {
	background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
	width: 200px;
	height: 200px;
}

Shembull . Madhësi + pozicion

Le të përcaktojmë njëkohësisht madhësitë për ngjyra të ndryshme dhe pozicionin e qendrës së gradientit:

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

#elem {
	background: radial-gradient(at 30px 60px, red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Shembull . Forma e gradientit

Forma e gradientit përcaktohet nga parametri i parë dhe mund të marrë 2 vlera: circle (gradient rrethor) ose ellipse (gradient eliptik, parazgjedhje). Pse deri tani nuk kemi parë gradientë eliptikë, edhe pse ai përcaktohet si parazgjedhje? Sepse deri tani format e blloqeve kanë qenë katrore. Nëse ndryshojmë formën në drejtkëndëshe, atëherë do të shohim gradientin eliptik:

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

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Shembull . Gradient rrethor

Le të bëjmë një gradient rrethor në një bllok drejtkëndësh. Për këtë, le të përcaktojmë formën e gradientit me fjalën kyçe circle:

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

#elem {
	background: radial-gradient(circle, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Shembull . Le të shtojmë pozicion

Le t'i shtojmë kodit të mëparshëm edhe pozicionin e gradientit:

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

#elem {
	background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Shembull . Lloji farthest-corner + circle

Forma e gradientit llogaritet bazuar në informacionin për distancën deri te cepi më i largët i bllokut:

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

#elem {
	background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shembull . Lloji farthest-corner + ellipse

Forma e gradientit llogaritet bazuar në informacionin për distancën deri te cepi më i largët i bllokut:

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

#elem {
	background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shembull . Lloji farthest-side + circle

Gradienti shtrihet deri në anën më të largët të bllokut:

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

#elem {
	background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shembull . Lloji farthest-side + ellipse

Gradienti shtrihet deri në anën më të largët të bllokut:

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

#elem {
	background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shembull . Lloji closest-corner + circle

Forma e gradientit llogaritet bazuar në informacionin për distancën deri te cepi më i afërt i bllokut:

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

#elem {
	background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shembull . Lloji closest-corner + ellipse

Forma e gradientit llogaritet bazuar në informacionin për distancën deri te cepi më i afërt i bllokut:

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

#elem {
	background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shembull . Lloji closest-side + circle

Forma e gradientit përkon me anën më të afërt të bllokut:

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

#elem {
	background: radial-gradient(circle closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shembull . Lloji closest-side + ellipse

Forma e gradientit përkon me anën më të afërt të bllokut:

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

#elem {
	background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Shihni gjithashtu

funksionin linear-gradient,
i cili krijon një gradient linear
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