gradient radial css. Gradientët CSS3: rrethore dhe eliptike

Gradient(nga lat. gradientët- ecja) - një karakteristikë që tregon drejtimin e rritjes më të shpejtë të një sasie të caktuar, vlera e së cilës ndryshon nga një pikë e hapësirës në tjetrën. Një gradient krijon një tranzicion të qetë midis dy ose më shumë ngjyrave. Përdoret shumë shpesh, kështu që komandimi i shkëlqyer i këtij mjeti është parakusht punë efektive në Photoshop.
Gradienti mund të aplikohet drejtpërdrejt në përmbajtjen e shtresës, ose mund ta përdorni shtresë e re mbushni me një gradient (gradienti do të jetë në shtresën e vet dhe do të keni një maskë të shtresës që mund ta përdorni për të maskuar pikselat e shtresës).
Ikona Gradient (1 ) do të gjeni në të njëjtin grup me mjetin mbush(Paint Bucker), çelësi G(ose Zhvendosja+ G për të kaluar ndërmjet tyre).

Lloji i gradientit caktohet nga butonat në shiritin e opsioneve ( 2 )
gradient linear(Gradient linear) - kalimi kryhet në një vijë të drejtë përgjatë një drejtimi të caktuar.

gradient radial(Radial Gradient) - ndryshoni ngjyrën në mënyrë të barabartë në të gjitha drejtimet nga pika qendrore.

gradient kon(Gradient këndor) - kalimi i ngjyrës në një rreth të përqendruar pikë e dhënë në drejtim të akrepave të orës.

gradient spekular(Gradient i reflektuar) - dy gradientë linearë që përhapen nga pika e fillimit në drejtime të kundërta.

gradient diamanti(Gradient Diamanti) - duke formuar vija të rreshtuara në formën e një rombi.

Në një kuti drejtkëndëshe ( 3 ) mund të shihni gradientin aktual të paracaktuar. Nëse klikoni në shigjetën pranë saj, do të hapet paleta e gradientit. Ju mund të zgjidhni gradientin që dëshironi duke klikuar mbi të me butonin e miut.

Dritarja e modifikimit të gradientit hapet kur klikoni në mostrën e mbushjes së gradientit ( 3 ).
Seksioni Sets (Paracaktimet) përmban gradientë të gatshëm.
Emri(Emri) - emri i gradientit. Me porosi(Custom) është një gradient me cilësime të personalizuara.
Gradient(Lloji i gradientit). Ka dy opsione: E vazhdueshme(E ngurtë) dhe Zhurma(zhurmë)
Zbutje(Smoothness) - butësia e kalimit të ngjyrave në gradient.

Nëse dëshironi të redaktoni një gradient tashmë ekzistues, klikoni në miniaturën e tij.
Kushtojini vëmendje shiritit të ngjyrave në qendër të dritares - ky është një shembull i një gradienti të redaktueshëm me tranzicione ngjyrash dhe transparencë. Nën shirit dhe sipër tij janë shënues ( 4 ) (katrore me trekëndësha sipër ose poshtë tyre). Ata nën shirit janë përgjegjës për tranzicionet e ngjyrave. Nëse klikoni në ndonjë shënues, trekëndëshi sipër tij do të bëhet me ngjyrë, që do të thotë se shënuesi është bërë aktiv dhe gati për redaktim. Çfarë mund të bëhet? Mund ta lëvizni në çdo drejtim përgjatë shiritit të ngjyrave, mund ta ndryshoni ngjyrën e tij. Për ta bërë këtë, klikoni në kutinë Ngjyrë(ngjyrë) ( 5 ) dhe në dritare Paleta e ngjyrave(Zgjedhuesi i ngjyrave) zgjidhni nuancën e dëshiruar ( 6 ).

Nëse klikoni në ndonjë hapesire e lire midis shënuesve, do të shfaqet shënues i ri, të cilin gjithashtu mund ta lëvizni dhe rregulloni. Mund ta lëvizni shënuesin me miun ose duke e ndryshuar vlerë numerike në fushë Pozicioni(Vendndodhja). 0% është skaji i majtë i shiritit të ngjyrave, 100% është e djathta.

Rrëshqitësit e transparencës janë të vendosura mbi shiritin e ngjyrave, ato kufizojnë transparencën e mbushjes së gradientit. Ato modifikohen në të njëjtën mënyrë si ato me ngjyra, por në vend që të vendosni ngjyrën, duhet të vendosni vlerën e transparencës (opacity), vendndodhja e shënuesve të transparencës mund të specifikohet në fushë Pozicioni(Vendndodhja).

Nëse keni nevojë për një shënues të ngjashëm me një ekzistues, thjesht mund ta kopjoni duke e zvarritur ndërsa shtypni tastin alt.

Nëse keni nevojë të hiqni një kufizues të panevojshëm ngjyrash, thjesht zhvendoseni atë jashtë shiritit të kalimit të ngjyrave ose zgjidhni dhe shtypni një nga butonat Fshije(Fshi): butoni i poshtëm- për shënuesit me ngjyra, i pari - për shënuesit e transparencës.

Le të krijojmë një gradient të ri. Hapni një kuti dialogu (duke klikuar mbi kutinë 3 ). Zgjidhni një ngjyrë mbushjeje për shënuesin e majtë të ngjyrës, klikoni në shënuesin e djathtë ( 8 ), vendosni ngjyrën tuaj për të, në fushë Emri(Emri) ( 10 ) shkruani emrin e saj dhe shtypni butonin I ri(i ri)( 11 ), gradienti juaj do të shfaqet në kutinë Presets, klikoni ok.

Përkthimi: Oksana Gudkova.

Për të mos kërkuar në internet për copëza informacioni, është më mirë të mblidhni gjithçka në një vend. Sot do të flasim për gradientët CSS3- një veçori e nevojshme, e përdorur shpesh dhe, natyrisht, e dobishme në zhvillim dhe paraqitje. Kishte një dëshirë për të bërë një artikull enciklopedik, por si doli, ju takon ta gjykoni.

"Gradient - shkruani plotësimin grafika kompjuterike, në të cilën është e nevojshme të vendoset ngjyra dhe transparenca e pikave të caktuara (kyçe), dhe ngjyra dhe transparenca e pikave të mbetura llogariten në lidhje me to sipas disa algoritme matematikore. Kështu, ju mund të merrni tranzicion të qetë nga një ngjyrë në tjetrën duke vendosur koordinatat dhe ngjyrën e fillestarit dhe pikat fundore." Wikipedia

Nga rruga, për ata që sapo kanë filluar të mësojnë CSS - një artikull i mrekullueshëm nga Natalia Mitrofanova - Si të përdorni CSS. Për të gjithë të ardhurit rekomandoj shumë njohin. E arritshme, e kuptueshme - në përgjithësi, e shkëlqyer
Por kthehu te tema e artikullit. Ekzistojnë dy lloje gradientësh në CSS3 - lineare dhe radiale. Konsideroni çdo lloj në më shumë detaje për të kuptuar specifikat e përdorimit të tyre.

Gradient linear CSS3

Një gradient linear është ai në të cilin një ngjyrë kalon proporcionalisht midis dy pikave në një vijë të drejtë. Mënyra më e lehtë është me një shembull:

Div (/*-prefix-linear-gradient(start-color, end-color);*/ sfond: -moz-linear-gradient(#FFF, #000); sfond: -ms-linear-gradient(#FFF, #000); sfond: -o-linear-gradient (#FFF, #000); sfond: -webkit-linear-gradient (#FFF, #000); )

Shembull Elementarështë një gradient linear që fillon me të bardhë dhe përfundon me të zezë. Prefiksi i shitësit - kërkohet në ky moment, standard i vetëm jo, pasi gradientët janë ende një veçori eksperimentale pavarësisht se mbështeten nga të gjithë shfletuesit.

Le të shkojmë përpara dhe të shohim më shumë shembull kompleks— ndryshoni drejtimin e gradientit. Drejtimi në sintaksë quhet pikë dhe kërkon dy vlera - nga ku dhe ku. Janë pesë vlera në total: krye, fund, majtas, drejtë dhe qendër. Prandaj, në shkrimin e drejtimit duhet të përdoren dy kuptime. E para është "nga ku", e dyta është "nga". Por ka një hollësi të vogël - nëse specifikohet vetëm një vend - i dyti do të jetë i paracaktuar qendër. Merrni këtë parasysh në projektet tuaja.

Në shembullin e mësipërm, drejtimi i gradientit nuk është specifikuar, kështu që drejtimi zgjidhet si parazgjedhje. qendra e lartë.

Div ( sfond: linear-gradient (lart, #FFF, #000); ) div (sfondi: linear-gradient (lart, #FFF, #000); )

Këto shënime janë, në fakt, të ngjashme me shembullin e mëparshëm, por për thjeshtësi dhe reduktim të madhësisë, drejtimi zakonisht hiqet në këtë rast, si i panevojshëm.

Si një alternativë ndaj drejtimit, por më tepër si shtesë, mund të përdorni kënde në regjistrim, vlera e të cilave mund të vendoset në disa vlera, duke përfshirë gradë, radian dhe gjëra të tjera gjeometrike. Por për thjeshtësi, është më mirë të përdorni gradë, kështu që do të jetë e qartë për të gjithë. Diplomimi është në drejtim të akrepave të orës - 0 ose 360 ​​është lart, 90 është djathtas, 180 është fundi dhe 270 është majtas. Regjistrimi me një shenjë minus është i pranueshëm - në këtë rast, diplomimi shkon në drejtim të kundërt.

Konsideroni disa shembuj për të kuptuar procesin:

Ex1 ( sfond: linear-gradient(majtas, #FFF, #000); ) ex2 ( sfond: linear-gradient(djathtas, #FFF, #000); ) ex3 (sfondi: linear-gradient(225deg, #FFF, # 000);)

Opsioni i parë është nga e majta në të djathtë, e dyta është nga e djathta në të majtë, e treta është 225 gradë. Shkallët ju lejojnë të drejtoni gradientin më saktë, gjë që nuk mund të arrihet me fjalë.

Tjetra pikë interesante kur punoni me gradient -

Shtimi i një ngjyre ndalese

Deri tani kemi përdorur vetëm gradientë të thjeshtë të përbërë nga dy ngjyra. Tani le të marrim një shembull më të komplikuar - shtoni një ngjyrë tjetër në gradient. Kështu:

Div (sfondi: gradient linear (majtas,#000,#FFF,#000);)

Ky shembull shton Ngjyra e bardhë mes dy zezakëve. Rezultati është një gradient që shkon nga e zeza në të bardhë dhe kthehet në gjendjen fillestare- në të zezë. Më shumë punë vizuale Unë do të tregoj ngjyrat e ndalimit në disa shembuj:

Ex1 (sfondi: linear-gradient(majtas,#000,#FFF,#000);) ex2 (sfondi: linear-gradient(majtas,#000,#FFF 75%,#000);) ex3 (sfondi: linear- gradient (poshtë,#000,#FFF 20px,#000);) ex4 (sfondi: gradient linear(45deg,#000,#FFF,#000,#FFF,#000);)

Rezultati në foto:

Në shembullin e parë, pikërisht ajo që u përmend më lart - e bardha është pikërisht midis dy zezakëve (dreq, sa politikisht jokorrekte doli).

Shembulli i dytë është i njëjtë, vetëm ai tregon se ku do të vendoset ngjyra e ndalimit. V këtë rast- 75% nga fillimi. Sintaksa është e thjeshtë - tregon shembulli. Pas vlerës së ngjyrës, specifikoni pozicionin në përqindje. Nuk nevojiten presje.

Shembulli i tretë tregon se vlera e pozicionit të ngjyrës së ndalimit mund të specifikohet jo vetëm në përqindje, por edhe në piksel (si dhe në të gjitha njësitë e tjera që kupton CSS, por kryesisht përdoren përqindjet dhe pikselat)

E katërta - pesë ndalesa të ngjyrës, drejtimi ndryshoi. Gjithçka është mjaft e thjeshtë.

Gradient radial CSS3

Në fakt, është shumë më interesante të punosh me të sesa me një gradient linear. Por, për fat të keq, nuk është gjithmonë e mundur ta përshtatni atë në dizajn. Një gradient radial është ai që shtrihet nga një pikë në qendër përgjatë një rrethi.

E (sfondi: gradient radial (pozicioni ose këndi, forma ose madhësia, nga ndalesa, ngjyra e ndalimit, për të ndalur);

Sintaksa është pothuajse e njëjtë, me një ndryshim - forma dhe madhësia janë shtuar. Forma është e dy llojeve - elips dhe rreth (elipsi dhe rrethi, respektivisht, vlera e paracaktuar: elips) Vlera e madhësisë mund të marrë një nga gjashtë vlerat. Rreth tyre më poshtë.

Sintaksa më e thjeshtë duket si kjo:

Div (sfondi: gradient radial(#FFF,#000);)

Gradientet radiale duhet të specifikohen me prefiksin e shitësit të shfletuesit:

Div ( sfond: -moz-radial-gradient(#FFF, #000); sfond: -ms-radial-gradient(#FFF, #000); sfond: -webkit-radial-gradient(#FFF, #000); )

Rezultati i ekzekutimit të kodit është në foto:

Le të shohim një kod më të ndërlikuar:

Div ( sfond: radial-gradient (përmban rreth, #FFF, #000); )

Ju lutemi vini re se në shembull ka dy përzgjedhës të përmendur më lart - forma dhe madhësia (pozicioni). Është e vështirë të emërosh madhësinë e vlerës së përzgjedhësit, përkundrazi është vendndodhja. Por në dokumentacionin zyrtar ky përzgjedhës është caktuar si madhësia, kështu që ne do ta quajmë atë madhësi. rrethi- thjesht do të thotë që gradienti do të jetë i rrumbullakët, jo eliptik. përmban- një nga fjalët kyçe që përzgjedhësi i madhësisë mund të pranojë. Unë do të përshkruaj secilën prej tyre për ta bërë më të qartë:

• ana më e afërt- Ana afër. Gradienti shtrihet nga qendra drejt anës më të afërt të elementit (për rrethi), ose në të dyja anët, horizontale dhe vertikale (për elips).
• këndi më i afërt- Këndi më i afërt. Madhësia e gradientit është e tillë që shtrihet nga qendra në këndin më të afërt të elementit.
• anën më të largët- Ana më e largët. Gradienti shtrihet nga qendra drejt anës më të jashtme të elementit (për rrethi), ose në të dyja anët horizontale dhe vertikale (për elips).
• këndi më i largët- Këndi më i largët. Madhësia e gradientit është e tillë që shtrihet nga qendra në cepin më të largët të elementit.
• përmbajnë- në mënyrë të ngjashme ana më e afërt.
• mbulesë- në mënyrë të ngjashme këndi më i largët.

Disa shembuj për ilustrim:

Ex1 ( sfond: radial-gradient (rrethi më i largët në anën, # 000, #FFF); ) ex2 ( sfond: radial-gradient (majtas, rrethi më i largët, # 000, #FFF); ) ex3 ( sfond: radial- gradient (lart djathtas, mbulesë rrethi, #FFF,#000); ) ex4 ( sfond: gradient radial (80% 50%, rrethi në anën më të afërt, #FFF, #000); )

Rezultati i ekzekutimit të çdo kodi:

Shembulli i parë është një gradient rrethor që shtrihet në anën e largët (duke përdorur anën më të largët)

Së dyti - qendra është në të majtë, gradienti shtrihet në anën e largët.

E treta është qendra lart djathtas, gradient në këndin e largët.

Së katërti - qendra është e vendosur në një pikë, 50% në gjerësi, 80% në lartësi dhe një gradient të rrumbullakët në anën më të afërt.

Shtimi i një ngjyre ndalese

Ashtu si gradientët linearë, ato radiale mund të punojnë edhe me ngjyra të shumta. Zbatimi i tyre nuk është i ndryshëm nga ato lineare, kështu që nuk do të përshkruaj, do të jap vetëm disa shembuj:

Ex1 ( sfondi: gradienti radial (rrethi në anën më të largët,#000,#FFF,#000); ) ex2 (sfondi: gradient radial (rrethi në anën më të largët,#000,#FFF 25%,#000); ) ex3 ( sfond: radial-gradient (majtas, rrethi më i largët, #FFF,#000 25%,#FFF 75%,#000); ,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); )

Ju mund të shihni gjithçka nga kodi, ju jeni tashmë projektues gradient me përvojë

Kaq për sot. Artikulli doli të ishte jashtëzakonisht i madh. Faleminderit të gjithëve që kanë lexuar deri në këtë pikë. Retweet-et dhe çdo socializëm janë vetëm të mirëseardhura. Kalofshi nje dite te mire

Oriz. 1. Gradient radial dhe linear

Një gradient radial krijohet duke përdorur veçorinë e sfondit ose imazhit të sfondit me parametrin radial-gradient. Në rastin më të thjeshtë, për të vendosur një gradient radial, ju nevojiten vetëm dy parametra: ngjyra e fillimit dhe e fundit. Si parazgjedhje, pika e fillimit ndodhet në qendër. Shembulli 1 tregon se si të krijoni një lloj topi, duke përdorur një gradient radial dhe qoshe të rrumbullakosura.

Shembulli 1 Gradient

Rezultati ky shembull treguar në fig. 1. Ju lutemi vini re se shembulli funksionon saktë në IE10 dhe Opera 12, versionet e hershme këta shfletues nuk mbështesin gradientët radial dhe nuk funksionojnë në Safari 5.1, i cili kërkon prefiksin -webkit.

Oriz. 2. Gradient radial

Pika fillestare e gradientit mund të vendoset kudo në element, për këtë, së pari specifikohet pozicioni i tij.

Pozicioni i një pike shkruhet në të njëjtën mënyrë si vlerat e vetive të pozicionit të sfondit, duke përdorur fjalë kyçe ose njësi të disponueshme si pikselë ose përqindje; Kombinimet e mundshme janë renditur më poshtë.

• lart majtas = majtas lart = në 0% 0% (në të majtë këndi i sipërm);
• në krye = në qendër të sipërme = në qendër të sipërme = në 50% 0% (me qendër sipër);
• lart djathtas = lart djathtas = në 100% 0% (këndi i sipërm djathtas);
• në të majtë = në qendër të majtë = në qendër të majtë = në 0% 50% (majtas dhe në qendër);
• në qendër = në qendër = në 50% 50% (në qendër) është vlera e paracaktuar;
• në të djathtë = në qendër të djathtë = në qendër të djathtë = në 100% 50% (djathtas dhe në qendër);
• në fund majtas = në pjesën e poshtme majtas = në 0% 100% (këndi i poshtëm majtas);
• në fund = në qendër të poshtme = në qendër fund = në 50% 100% (me qendër në fund);
• në fund djathtas = në fund djathtas = në 100% 100% (në këndin e poshtëm djathtas).

Nëse vendosim pozicionin e pikës fillestare për Shembullin 1 në 40px 45px dhe e bëjmë ngjyrën e dytë pak më të errët (#0076a5), marrim një top pak më realist (Fig. 3).

Oriz. 3. Ndryshoni pikën e fillimit të gradientit

Ekzistojnë dy forma të një gradienti radial - një rreth (rreth) dhe një elips (elips), të cilat ndryshojnë në pamjen e tyre. Parazgjedhja është një gradient eliptik.

Dallimi midis gradientit rrethor dhe eliptik për ngjyrat #f9e497 dhe #ffb60f është paraqitur në fig. 4.

Oriz. 4. Tipe te ndryshme gradient

Për një element, gjerësia e të cilit është e barabartë me lartësinë, si në shembullin e balonës, ndryshimi midis llojeve të gradientit nuk do të jetë i dukshëm.

Shembulli 2 tregon krijimin gradient rrethor me një pikënisje të caktuar. Tre vlera ngjyrash përdoren për të rritur kontrastin midis ngjyrave në vend të dy.

Shembulli 2: Gradient rrethor

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Kushtojini vëmendje sintaksës, nëse duam të kombinojmë formën e gradientit me treguesin e pikës së fillimit, atëherë së pari vjen fjala kyçe e rrethit dhe më pas pozicioni i ndarë me një hapësirë. Rezultati i këtij shembulli është paraqitur në Fig. 5.

Oriz. 5. Gradient rrethor

Së bashku me llojin e gradientit, mund të vendosni edhe madhësinë e tij, e cila varet nga fjalët kyçe të përdorura. Madhësia shkruhet me një hapësirë ​​pas llojit të gradientit (rreth ose elips).

Në tabelë. 1 i listuar vlerat e mundshme madhësia me përshkrimin dhe rezultatin e tyre për të bardhën dhe të zezën. Kodi dhe pamja jepen për një gradient rrethor dhe eliptik.

Tab. 1. Fjalë kyçe për ndryshimin e madhësisë së gradientit

Kuptimi	Kodi	Përshkrim	Pamje
	sfondi: radial-gradient (rrethi në anën më të afërt në 30px 20px, #fff, #000); sfondi: radial-gradient (elipsi në anën më të afërt në 30px 20px, #fff, #000);	Forma e gradientit përputhet me anën e bllokut më të afërt me të.
	sfondi: radial-gradient (rrethi më i afërt i këndit në 30px 20px, #fff, #000); sfond: radial-gradient (elipsi më i afërt-këndi në 30px 20px, #fff, #000);	Forma e gradientit llogaritet bazuar në informacionin në lidhje me distancën në këndin më të afërt të bllokut.
	sfondi: radial-gradient (rrethi në anën më të largët në 30px 20px, #fff, #000); sfondi: radial-gradient (elipsi në anën më të largët në 30px 20px, #fff, #000);	Gradienti shtrihet në anën e largët të bllokut.
këndi më i largët	sfondi: radial-gradient (rrethi i këndit më të largët në 30px 20px, #fff, #000); sfond: radial-gradient (elipsi më i largët në këndin 30px 20px, #fff, #000);	Forma e gradientit llogaritet bazuar në informacionin në lidhje me distancën në këndin e largët të bllokut,

Për pikën e fillimit qendror, gradientët duket se përputhen. Por gradientët do të jenë të ndryshëm nëse vendosni pikën e fillimit në qoshe. Shembulli 3 përdor një vlerë që specifikon pikën e fillimit në pixel.

Shembulli 3 Madhësia e gradientit

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 6.

Oriz. 6. Përdorimi i vlerës së këndit më të afërt

Ashtu si një gradient linear, ju mund të specifikoni shumë ngjyra, të vendosni pozicionin e tyre dhe të bëni kalime të mprehta midis ngjyrave. Për ta bërë këtë, një numër arbitrar ngjyrash renditet të ndara me presje, dhe pas vlerës së ngjyrës, një hapësirë ​​ndiqet nga pozicioni i saj, i cili mund të specifikohet në piksel ose përqindje. Vlerat ekstreme të 0% dhe 100% mund të hiqen, ato supozohen automatikisht.

Kalimet e mprehta fitohen kur pozicioni i një ngjyre përkon me pozicionin e një ngjyre tjetër, siç tregohet në shembullin 4. Diferenca e një piksel bëhet për të zbutur pak tranzicionin, përndryshe rezulton të jetë një "shkallë" pikselësh, që nuk duket shumë bukur.

Shembulli 4. Tranzicione të papritura

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 7.

Oriz. 7. Kalime të mprehta midis ngjyrave të ndryshme

Nëse gradienti linear dhe radial plotësohet me vetinë e madhësisë së sfondit, atëherë do të kemi një shumëllojshmëri të gjerë të përsëritjeve fotot e sfondit të cilat bëhen pa përdorimin e imazheve.

Oriz. 1. Gradient radial dhe linear

Një gradient radial krijohet duke përdorur veçorinë e sfondit ose imazhit të sfondit.

Sintaksë

Imazhi i sfondit: gradient radial([ rrethi ||<радиус>][në<позиция>]? , | [ elipsë || [<радиус> | <проценты>](2)] [ në<позиция>]? , | [ [ rrethi | elipsë] ||<размер>][në<позиция>]? , | në<позиция> , <цвет> [ , <цвет> ]*)

Shënimi

	Përshkrim	Shembull
<тип>	Përcakton llojin e vlerës.	<размер>
A&&B	Vlerat duhet të dalin në rendin e specifikuar.	<размер> && <цвет>
A | B	Tregon që vetëm një nga vlerat e sugjeruara (A ose B) duhet të zgjidhet.	normale | kapele të vogla
A || B	Çdo vlerë mund të përdoret më vete ose në kombinim me të tjerat në çdo mënyrë.	gjerësia || numëroj
	Vlerat e grupeve.	[ kulture || kryq]
*	Përsëriteni zero ose më shumë herë.	[,<время>]*
+	Përsëriteni një ose më shumë herë.	<число>+
?	Lloji, fjala ose grupi i specifikuar është opsional.	futur?
(A, B)	Përsëriteni të paktën A, por jo më shumë se B herë.	<радиус>{1,4}
#	Përsëriteni një ose më shumë herë të ndara me presje.	<время>#

×

vlerat

rrethi Gradient radial i formës rrethore. elipsë Krijon një gradient eliptik. Kjo formë është caktuar si parazgjedhje.<радиус>Rrezja e gradientit në njësitë e aksesueshme nga CSS. Një vlerë tregon rrezen e rrethit, dy vlera - rrezja e elipsës përgjatë boshtit x dhe rrezja e saj përgjatë boshtit y. Nëse rrezja nuk është e specifikuar në mënyrë eksplicite, gradienti do të mbushë të gjithë sfondin e elementit.<позиция>

Vendos pikën e fillimit nga vjen gradienti. Pozicioni i një pike shkruhet në të njëjtën mënyrë si vlerat e vetive të pozicionit të sfondit, duke përdorur fjalë kyçe ose njësi të disponueshme si pikselë ose përqindje; Kombinimet e mundshme janë renditur më poshtë.

• lart majtas = majtas lart = 0% 0% (këndi i sipërm majtas);
• maja = qendra e sipërme = qendra e sipërme = 50% 0% (lartësia qendrore);
• djathtas lart = lart djathtas = 100% 0% (lart djathtas);
• majtas = qendra majtas = qendra majtas = 0% 50% (majtas dhe në qendër);
• qendër = qendër qendër = 50% 50% (në qendër) është parazgjedhja;
• djathtas = qendra djathtas = qendra djathtas = 100% 50% (djathtas dhe qendra);
• poshtë majtas = majtas fund = 0% 100% (këndi i poshtëm majtas);
• fund = qendra e poshtme = fundi qendror = 50% 100% (me qendër në fund);
• poshtë djathtas = djathtas poshtë = 100% 100% (në këndin e poshtëm djathtas).

<цвет>Përfaqëson një vlerë ngjyre (shih ngjyrën) e ndjekur nga një pozicion opsional ngjyrash në lidhje me boshtin e gradientit, të specifikuar si përqindje nga 0% në 100% ose çdo njësi tjetër miqësore me CSS.<размер>Vendos madhësinë e gradientit. Në tabelë. 1 liston vlerat e mundshme të madhësisë me përshkrimin dhe rezultatin e tyre për të bardhën dhe të zezën. Kodi dhe pamja jepen për një gradient rrethor dhe eliptik. Tab. 1. Fjalë kyçe për ndryshimin e madhësisë së gradientit

Kuptimi	Kodi	Përshkrim	Pamje
ana më e afërt	sfondi: radial-gradient (rrethi në anën më të afërt në 30px 20px, #fff, #000); sfond: radial-gradient (ana më e afërt në 30px 20px, #fff, #000);	Gradienti përkon me anën e bllokut më të afërt me të (për një rreth) ose në të njëjtën kohë përkon me anët më të afërta horizontale dhe vertikale (për një elips).
	sfondi: radial-gradient (rrethi i këndit më të afërt në 30px 20px, #fff, #000); sfondi: radial-gradient (këndi më i afërt në 30px 20px, #fff, #000);	Forma e gradientit llogaritet bazuar në informacionin në lidhje me distancën në këndin më të afërt të bllokut.
	sfondi: radial-gradient (rrethi në anën më të largët në 30px 20px, #fff, #000); sfond: radial-gradient (ana më e largët në 30px 20px, #fff, #000);	Ngjashëm në veprim me anën më të afërt, por gradienti shtrihet në anën e largët të bllokut.
këndi më i largët	sfondi: radial-gradient (rrethi i këndit më të largët në 30px 20px, #fff, #000); sfondi: radial-gradient (këndi më i largët në 30px 20px, #fff, #000);	Forma e gradientit llogaritet bazuar në informacionin në lidhje me distancën në këndin e largët të bllokut,

Shembull

Rezultati i këtij shembulli është paraqitur më poshtë.

shënim

Chrome përpara versionit 26, Safari përpara versionit 6.1 dhe Android përpara versionit 4.4 mbështesin -webkit-radial-gradient() .

Opera para versionit 12.10 mbështet -o-radial-gradient() .

Firefox deri në versionin 16 mbështet -moz-radial-gradient() .

Të gjitha vetitë e parashtesuara nuk përdorin fjalën kyçe at kur specifikojnë pozicionin e pikës fillestare të gradientit.

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

• Rekomandim (Rekomandim) - specifikimi është miratuar nga W3C dhe rekomandohet si standard.
• Rekomandimi i Kandidatit ( Rekomandim i mundshëm ) - grupi përgjegjës për standardin është i kënaqur që ai përmbush qëllimet e tij, por kërkohet mbështetja e komunitetit të zhvillimit për zbatimin e standardit.
• Rekomandimi i propozuar ( Rekomandim i sugjeruar) - në këtë fazë, dokumenti i dorëzohet Bordit Këshillues të W3C për miratim përfundimtar.
• Drafti Punues - Një version më i pjekur i draftit pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
• Drafti i redaktorit ( Drafti editorial) është një version draft i standardit pasi janë bërë ndryshime nga redaktorët e projektit.
• draft ( Drafti i specifikimeve) është versioni i parë draft i standardit.

×

Shfletuesit

Shënimi i mëposhtëm përdoret në tabelën e shfletuesit.

• - prona mbështetet plotësisht nga shfletuesi me të gjitha vlerat e vlefshme;
• - prona nuk perceptohet nga shfletuesi dhe injorohet;
• - mund të shfaqet gjatë funksionimit gabime të ndryshme, ose prona mbështetet vetëm pjesërisht, për shembull, jo e gjitha vlerat e lejuara janë të vlefshme ose vetia nuk zbatohet për të gjithë elementët që janë specifikuar në specifikim.

Numri tregon versionin e shfletuesit nga i cili mbështetet prona.

×

Një gradient radial shtrihet nga pika qendrore e gradientit në të gjitha drejtimet në një rreth ose elips (forma e parazgjedhur), duke demonstruar tranzicion i qetë nga një nuancë ngjyrash në tjetrën. Një gradient radial krijohet duke përdorur funksionin radial-gradient(). Funksioni krijon një imazh që është një gradient radial midis nuancave të specifikuara të ngjyrave. Si parazgjedhje, madhësia e gradientit përputhet me madhësinë e elementit ku është aplikuar.

Funksioni radial-gradient() merr argumentet e mëposhtme të ndara me presje:

• Specifikoni fjalë kyçe dhe/ose njësi si argumentin e parë Dimensionet CSS, duke përcaktuar formën përfundimtare, madhësinë dhe vendndodhjen fillestare gradient. Argument opsional.
• Një listë e ndarë me presje me dy ose më shumë ngjyra, secila prej të cilave mund të pasohet nga një pozicion ndalimi.

Gradienti radial më i thjeshtë kërkon vetëm dy argumente që specifikojnë ngjyrat e fillimit dhe të fundit:

Div ( imazhi i sfondit: gradient radial (cian, indigo); gjerësia: 400 px; lartësia: 100 px; ) Provoni »

Si në rastin e përdorimit gradientët linearë, një gradient radial mund të përfshijë një listë me më shumë se dy ngjyra dhe një pozicion ndalimi mund të specifikohet për çdo ngjyrë.

Div ( gjerësia: 400 px; lartësia: 100 px; margjina: 10 px; ) #one ( imazhi i sfondit: gradient radial (cian, i verdhë, indigo, i bardhë); ) #two (imazhi i sfondit: gradient radial (cian, i verdhë 10%, indigo 30%, e bardhë 50%); ) Provoni »

Forma e një gradienti radial mund të përcaktohet duke përdorur fjalët kyçe rreth (rreth) dhe elips (elips), duke specifikuar njërën prej tyre si argumentin e parë:

Div ( gjerësia: 400 px; lartësia: 100 px; margjina: 10 px; ) #one ( imazhi i sfondit: gradient radial (elips, cyan, indigo); ) #two (imazhi i sfondit: gradient radial (rreth, cyan, indigo ); ) Provoni »

Si parazgjedhje, shfletuesi vendos pikën qendrore të gradientit radial në qendër të elementit. Qendra e gradientit mund të pozicionohet me fjalë kyçe në të ndjekur nga fjalë kyçe (lart, majtas, djathtas, poshtë, qendër) ose vlerat në njësitë e specifikuara CSS:

Kuptimi	Përshkrim
majtas sipër qendra e majtë fundi i majtë lart djathtas qendra e djathtë poshtë djathtas qendra e sipërme qendra qendrore fundi qendror	Nëse specifikoni vetëm një fjalë kyçe, e dyta do të jetë "qendër".
x%y%	Vlera e parë është pozicioni horizontal, vlera e dytë është pozicioni vertikal. Këndi i sipërm majtas është pozicioni 0% 0%. Këndi i poshtëm djathtas është pozicioni 100% 100%. Nëse specifikoni vetëm një vlerë, vlera tjetër do të jetë 50%.
x-pos y-pos	Vlera e parë është pozicioni horizontal, e dyta është pozicioni vertikal. Këndi i sipërm majtas është pozicioni 0 0. Njësitë mund të jenë pikselë (0px 0px) ose çfarëdo Njësia CSS matjet. Nëse specifikoni vetëm një vlerë, vlera tjetër do të jetë 50%. Mund të kombinoni % dhe njësi.

Pozicionimi i gradientit specifikohet para vlerave të nuancës, por pas fjalës kyçe të formës së gradientit (nëse ka):

Div ( gjerësia: 400 px; lartësia: 100 px; margjina: 10 px; ) #one ( imazhi i sfondit: gradient radial (në të djathtë, cyan, indigo); ) #two (imazhi i sfondit: gradient radial (rrethi në 300 px 50 px , cian, vjollcë, e verdhë); ) #tre (imazhi i sfondit: gradient radial (rreth lart majtas, cian, vjollcë, i verdhë); ) Provoni »

Madhësia e gradientit (sa e madhe duhet të jetë forma përfundimtare e gradientit) mund të specifikohet duke përdorur një nga katër frazat kryesore, ose duke specifikuar rrezen duke përdorur njësitë CSS (përqindjet nuk mund të përdoren për të përcaktuar rrezen).

Fjalë kyçe	Përshkrim
Madhësia përfundimtare e gradientit varet nga distanca midis qendrës së gradientit dhe anës së elementit më afër tij (për një rreth), ose nga distanca midis qendrës dhe dy anëve të elementit më afër tij (për një elips).
Madhësia përfundimtare e gradientit varet nga distanca midis qendrës së gradientit dhe këndit më të afërt të elementit.
Madhësia përfundimtare e gradientit varet nga distanca midis qendrës së gradientit dhe anës së elementit më të largët prej tij (për një rreth) ose distanca midis qendrës së gradientit dhe dy anëve më të largëta prej tij (për një elips ).
Madhësia përfundimtare e gradientit varet nga distanca midis qendrës së gradientit dhe këndit të elementit më të largët prej tij. Përdoret si parazgjedhje për një formë rrethi ose elipsi.

Fjalët kyçe që përcaktojnë madhësinë e gradientit ose rrezes janë të specifikuara para ose pas fjalës kyçe që përcakton formën, dhe gjithmonë përpara pozicionit.

Div ( gjerësia: 400 px; lartësia: 100 pikselë; diferenca: 10 px; ) #një ( imazhi i sfondit: gradienti radial (rrethi i këndit më të afërt në 100 pikselë, cian 50%, indigo); ) #dy (imazhi i sfondit: radial- gradient (rrethi në anën më të afërt, cian, i kuq, vjollcë); ) #tre (imazhi i sfondit: gradient radial (100px rrethi në 200px, cian 50%, vjollcë); ) #four (imazhi i sfondit: gradient radial( 170px 50px elipsë në 175px, cian, #90EE90, rgba(172,160,160,0)); )