css radijalni gradijent. CSS3 Gradijent: kružni i eliptični

Gradijent(od lat. gradijenti- hodanje) - karakteristika koja pokazuje smjer najbržeg povećanja određene vrijednosti, čija se vrijednost mijenja od jedne tačke u prostoru do druge. Gradijent stvara glatki prijelaz između dvije ili više boja. Koristi se vrlo često, tako da je odlično poznavanje ovog alata preduslov efikasan rad u Photoshopu.
Gradijent se može primijeniti direktno na sadržaj sloja ili ga možete koristiti novi sloj ispunite gradijentom (gradijent će biti na vlastitom sloju i imati masku sloja koju možete koristiti za maskiranje piksela sloja).
Ikona Gradijent (1 ) naći ćete u istoj grupi sa alatom ispuniti(Paint Bucker), ključ G(ili Shift+ G za prebacivanje između njih).

Tip gradijenta se postavlja pomoću dugmadi na traci sa opcijama ( 2 )
linearni gradijent(Linearni gradijent) - prijelaz se izvodi u pravoj liniji duž određenog smjera.

radijalni gradijent(Radijalni gradijent) - ravnomjerno promijeni boju u svim smjerovima od središnje točke.

konusni gradijent(Gradijent ugla) - prijelaz boje u krugu sa središtem dati poen u smjeru kazaljke na satu.

zrcalni gradijent(Reflected Gradient) - dva linearna gradijenta koji se šire od početne tačke u suprotnim smjerovima.

dijamantski gradijent(Diamond Gradient) – formirajuće linije se redaju u obliku romba.

U pravougaonoj kutiji ( 3 ) možete vidjeti trenutni zadani gradijent. Ako kliknete na strelicu pored, otvorit će se Gradijentna paleta. Možete odabrati željeni gradijent tako što ćete kliknuti na njega tipkom miša.

Prozor za uređivanje gradijenta otvara se kada kliknete na uzorak punjenja gradijenta ( 3 ).
Sekcija Setovi (Presets) sadrži gotove gradijente.
Ime(Naziv) - naziv gradijenta. Custom(Prilagođeno) je gradijent sa prilagođenim postavkama.
Gradijent(Tip gradijenta). Postoje dvije opcije: Kontinuirano(Solidan) i Buka(buka)
Smoothing(Smoothness) - mekoća prijelaza boja u gradijentu.

Ako želite urediti već postojeći gradijent, kliknite na njegovu sličicu.
Obratite pažnju na traku boja u sredini prozora - ovo je uzorak gradijenta koji se može uređivati ​​s prijelazima boja i prozirnošću. Ispod trake i iznad nje su markeri ( 4 ) (kvadrati sa trouglovima iznad ili ispod njih). Oni ispod pruge su odgovorni za prelaze boja. Ako kliknete na bilo koji marker, trokut iznad njega će postati obojen, što znači da je marker postao aktivan i spreman za uređivanje. Šta se može učiniti? Možete ga pomicati u bilo kojem smjeru duž trake boja, možete promijeniti njegovu boju. Da biste to učinili, kliknite na okvir Boja(boja) ( 5 ) i u prozoru Paleta boja(Birač boja) odaberite željenu nijansu ( 6 ).

Ako kliknete na bilo koju slobodan prostor između markera će se pojaviti novi marker, koji također možete pomicati i podešavati. Marker možete pomicati mišem ili mijenjanjem numerička vrijednost u polju Pozicija(Lokacija). 0% je lijeva ivica trake boja, 100% desna.

Klizači za prozirnost se nalaze iznad trake boja, ograničavaju transparentnost gradijenta ispune. Uređuju se na isti način kao i one u boji, ali umjesto postavljanja boje potrebno je podesiti vrijednost prozirnosti (prozirnost), u polju se može odrediti lokacija markera transparentnosti Pozicija(Lokacija).

Ako vam je potreban marker sličan postojećem, možete ga jednostavno kopirati prevlačenjem dok pritiskate tipku alt.

Ako trebate ukloniti nepotreban graničnik boje, jednostavno ga pomaknite izvan trake za prijelaz boja ili odaberite i pritisnite jedno od dugmadi Izbriši(Izbriši): donje dugme- za markere u boji, gornji - za markere za prozirnost.

Kreirajmo novi gradijent. Otvorite dijaloški okvir (klikom na okvir 3 ). Odaberite boju ispune za lijevi marker boje, kliknite na desni marker ( 8 ), postavite svoju boju za to u polju Ime(ime) ( 10 ) unesite njegov naziv i pritisnite dugme Novo(novo)( 11 ), vaš gradijent će se pojaviti u okviru Presets, kliknite na OK.

Prevod: Oksana Gudkova.

Kako ne biste pretraživali internet za komadićima informacija, bolje je sve skupiti na jednom mjestu. Danas ćemo razgovarati o tome CSS3 gradijenti- neophodna karakteristika, koja se često koristi i, naravno, korisna u razvoju i rasporedu. Postojala je želja da se napravi enciklopedijski članak, ali kako je ispalo, na vama je da procijenite.

"Gradijent - unesite popunu kompjuterska grafika, u kojem je potrebno podesiti boju i prozirnost pojedinih (ključnih) tačaka, a boja i transparentnost preostalih tačaka se računaju u odnosu na njih prema određenim matematički algoritmi. Tako možete postići glatke prijelaze iz jedne boje u drugu postavljanjem koordinata i boje početnog i krajnje tačke." Wikipedia

Usput, za one koji tek počinju da uče CSS - divan članak Natalije Mitrofanove - Kako koristiti CSS. Za sve pridošlice toplo preporučujem upoznati. Pristupačno, razumljivo - općenito, odlično
No, vratimo se na temu članka. Postoje dvije vrste gradijenata u CSS3 - linearni i radijalni. Razmotrite svaku vrstu detaljnije kako biste razumjeli specifičnosti njihove upotrebe.

CSS3 Linearni Gradijent

Linearni gradijent je onaj u kojem boja prelazi proporcionalno između dvije tačke u pravoj liniji. Najlakši način je sa primjerom:

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

Elementarni primjer je linearni gradijent koji počinje bijelom i završava crnom. Prefiks dobavljača - obavezno uključeno ovog trenutka, zajednički standard ne, budući da su gradijenti i dalje eksperimentalna karakteristika uprkos tome što ih podržavaju svi pretraživači.

Idemo dalje i pogledajmo više složen primjer— promijenite smjer gradijenta. Smjer u sintaksi se zove tačka i zahtijeva dvije vrijednosti - odakle i odakle. Ukupno ima pet vrijednosti: top, dnu, lijevo, u pravu I centar. Shodno tome, u pisanju smjera moraju se koristiti dva značenja. Prvi je „odakle“, drugi je „gde“. Ali postoji mala suptilnost - ako je specificirana samo jedna lokacija - druga će biti zadana centar. Uzmite to u obzir u svojim projektima.

U gornjem primjeru, smjer gradijenta nije naveden, tako da je smjer odabran po defaultu. top centar.

Div (pozadina: linear-gradient(top, #FFF, #000); ) div (pozadina: linear-gradient(top, #FFF, #000); )

Ovi unosi su, u stvari, slični prethodnom primjeru, ali zbog jednostavnosti i smanjenja veličine, smjer se obično izostavlja u ovom slučaju, kao nepotreban.

Kao alternativu smjeru, već kao dodatak, možete koristiti uglove u zapisu, čija se vrijednost može postaviti u nekoliko vrijednosti, uključujući stupnjeve, radijane i druge geometrijske stvari. Ali radi jednostavnosti, bolje je koristiti diplome, tako da će svima biti jasno. Gradacija je u smjeru kazaljke na satu - 0 ili 360 je na vrhu, 90 je desno, 180 je dolje i 270 je lijevo. Snimanje sa znakom minus je prihvatljivo - u ovom slučaju gradacija ide u smjeru suprotnom od kazaljke na satu.

Razmotrite nekoliko primjera kako biste razumjeli proces:

Ex1 (pozadina: linearni gradijent(lijevo, #FFF, #000); ) ex2 (pozadina: linearni gradijent(desno, #FFF, #000); ) ex3 (pozadina: linearni gradijent(225deg, #FFF, # 000);)

Prva opcija je s lijeva na desno, druga s desna na lijevo, treća je 225 stepeni. Stepeni vam omogućavaju da preciznije usmjerite gradijent, što se ne može postići riječima.

Sljedeći zanimljiva poenta kada radite sa gradijentima -

Dodavanje stop boje

Do sada smo koristili samo jednostavne gradijente koji se sastoje od dvije boje. Sada uzmimo složeniji primjer - dodajte drugu boju gradijentu. Manje-više ovako:

Div (pozadina: linearni gradijent(lijevo,#000,#FFF,#000);)

Ovaj primjer dodaje Bijela boja između dva crnca. Rezultat je gradijent koji ide od crnog do bijelog i nazad do početno stanje- u crno. Više vizuelnog rada Prikazat ću stop boje u nekoliko primjera:

Eks1 (pozadina: linearni gradijent(lijevo,#000,#FFF,#000);) ex2 (pozadina: linearni gradijent(lijevo,#000,#FFF 75%,#000);) ex3 (pozadina: linearni- gradijent(bottom,#000,#FFF 20px,#000);) ex4 (pozadina: linear-gradient(45deg,#000,#FFF,#000,#FFF,#000);)

Rezultat na slici:

U prvom primjeru, upravo ono što je gore spomenuto - bijelo je tačno između dva crna (dovraga, kako je ispalo politički nekorektno).

Drugi primjer je isti, samo što pokazuje gdje će se boja zaustavljanja nalaziti. IN ovaj slučaj- 75% od početka. Sintaksa je jednostavna - primjer pokazuje. Nakon vrijednosti boje navedite poziciju u procentima. Zarezi nisu potrebni.

Treći primjer pokazuje da se vrijednost pozicije stop boje može specificirati ne samo u procentima, već iu pikselima (kao i u svim drugim jedinicama koje CSS razumije, ali se uglavnom koriste procenti i pikseli)

Četvrto - pet stanica u boji, promijenjen smjer. Sve je prilično jednostavno.

CSS3 radijalni gradijent

U stvari, mnogo je zanimljivije raditi s njim nego s linearnim gradijentom. Ali, nažalost, nije uvijek moguće uklopiti ga u dizajn. Radijalni gradijent je onaj koji se proteže od tačke u centru duž kružnice.

E (pozadina: radijalni gradijent (položaj ili ugao, oblik ili veličina, od-stop, stop-boja, do-stop); )

Sintaksa je skoro ista, s jednom razlikom - dodani su oblik i veličina. Oblik je dva tipa - elipsa i krug (elipsa i krug, respektivno, zadana vrijednost: elipsa) Vrijednost veličine može imati jednu od šest vrijednosti. O njima u nastavku.

Najjednostavnija sintaksa izgleda ovako:

Div (pozadina: radijalni gradijent(#FFF,#000);)

Radijalni gradijenti moraju biti specificirani s prefiksom dobavljača pretraživača:

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

Rezultat izvršavanja koda je na slici:

Pogledajmo komplikovaniji kod:

Div (pozadina: radijalni gradijent (sadrži krug, #FFF, #000); )

Imajte na umu da u primjeru postoje dva gore spomenuta selektora - oblik i veličina (pozicija). Teško je imenovati veličinu vrijednosti selektora, prije je to lokacija. Ali u službenoj dokumentaciji ovaj selektor je označen kao veličina, pa ćemo to nazvati veličinom. krug- samo znači da će gradijent biti okrugao, a ne eliptičan. sadržavati- jedna od ključnih riječi koje selektor veličine može prihvatiti. Opisaću svaki od njih da bude jasnije:

• najbliža strana- Blizu stranu. Gradijent se proteže od centra prema najbližoj strani elementa (za krug), ili na obje, horizontalne i vertikalne strane (za elipsa).
• najbliži ugao- Najbliži ugao. Veličina gradijenta je takva da se proteže od centra do najbližeg ugla elementa.
• najdalje- Najdalje. Gradijent se proteže od centra prema krajnjoj strani elementa (za krug), ili na horizontalnu i okomitu stranu (za elipsa).
• najudaljeniji ugao- Najdalji ugao. Veličina gradijenta je takva da se proteže od centra do najudaljenijeg ugla elementa.
• sadrže- slično najbliža strana.
• poklopac- slično najudaljeniji ugao.

Nekoliko primjera za ilustraciju:

Primjer 1 ( pozadina: radijalni-gradijent (najdalja strana, #000, #FFF); ) ex2 ( pozadina: radijalni gradijent (lijevo, najdalja strana kruga, #000, #FFF); ) ex3 ( pozadina: radijalna- gradijent (gore desno, poklopac kruga,#FFF,#000); ) ex4 (pozadina: radijalni gradijent (80% 50%, krug najbliža strana,#FFF,#000); )

Rezultat izvršavanja svakog koda:

Prvi primjer je kružni gradijent koji se proteže na dalju stranu (koristeći najdalje)

Drugo - centar je lijevo, gradijent je proširen na dalju stranu.

Treći je gornji desni u sredini, gradijent ka daljem uglu.

Četvrto - centar se nalazi u tački, 50% širine, 80% visine i okruglog nagiba prema najbližoj strani.

Dodavanje stop boje

Kao i linearni gradijenti, radijalni također mogu raditi s više boja. Njihova primjena se ne razlikuje od linearnih, tako da neću opisivati, dat ću samo nekoliko primjera:

Ex1 ( pozadina: radijalni-gradijent(krug najdalje,#000,#FFF,#000); ) ex2 (pozadina: radijalni gradijent(krug najdalje,#000,#FFF 25%,#000); ) ex3 ( pozadina: radijalni gradijent (lijevo, krug krajnja strana, #FFF, # 000 25%, # FFF 75%, # 000); ) ex4 ( pozadina: radijalni gradijent (40% 50%, krug najbliža strana ,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); )

Možete vidjeti sve iz koda, već ste iskusni gradijenti dizajneri

To je sve za danas. Članak je ispao nepristojno ogroman. Hvala svima koji su pročitali do ovog trenutka. Retweetovi i svaki socijalizam je samo dobrodošao. ugodan dan

Rice. 1. Radijalni i linearni gradijent

Radijalni gradijent se kreira pomoću svojstva pozadine ili pozadinske slike sa parametrom radijalnog gradijenta. U najjednostavnijem slučaju, da biste postavili radijalni gradijent, potrebna su vam samo dva parametra: početna i završna boja. Podrazumevano, početna tačka se nalazi u centru. Primjer 1 pokazuje kako napraviti neku vrstu lopte, koristeći radijalni gradijent i zaobljene uglove.

Primjer 1 Gradijent

Rezultat ovaj primjer prikazano na sl. 1. Imajte na umu da primjer radi ispravno u IE10 i Operi 12, rane verzije ovi pretraživači ne podržavaju radijalne gradijente i ne rade u Safariju 5.1, koji zahtijeva prefiks -webkit.

Rice. 2. Radijalni gradijent

Početna tačka gradijenta može se postaviti bilo gdje u elementu, za to se prvo specificira njegova pozicija.

Položaj tačke se piše na isti način kao vrednosti svojstva pozadinske pozicije, koristeći ključne reči ili dostupne jedinice kao što su pikseli ili procenti; moguće kombinacije su navedene u nastavku.

• gore lijevo = lijevo gore = 0% 0% (lijevo gornji ugao);
• na vrhu = na vrhu u sredini = na sredini na vrhu = na 50% 0% (centrirano na vrhu);
• desno gore = gore desno = na 100% 0% (gornji desni ugao);
• lijevo = lijevo centar = centar lijevo = 0% 50% (lijevo i centar);
• at center = at center center = at 50% 50% (centrirano) je zadana vrijednost;
• desno = u desnom centru = u sredini desno = na 100% 50% (desno i u sredini);
• dolje lijevo = lijevo dolje = na 0% 100% (donji lijevi ugao);
• pri dnu = pri dnu centar = u sredini dolje = na 50% 100% (centrirano na dnu);
• dolje desno = desno dolje = na 100% 100% (u donjem desnom uglu).

Ako postavimo poziciju početne tačke za primjer 1 na 40px 45px i učinimo drugu boju malo tamnijom (#0076a5), dobićemo malo realističniju loptu (slika 3).

Rice. 3. Promijenite početnu tačku gradijenta

Postoje dva oblika radijalnog gradijenta - krug (krug) i elipsa (elipsa), koji se razlikuju po izgledu. Zadana vrijednost je eliptični gradijent.

Razlika između kružnog i eliptičnog gradijenta za boje #f9e497 i #ffb60f prikazana je na sl. 4.

Rice. 4. Različite vrste gradijent

Za element čija je širina jednaka visini, kao u primjeru balona, ​​razlika između tipova gradijenta neće biti primjetna.

Primjer 2 prikazuje stvaranje kružni gradijent sa datom početnom tačkom. Za poboljšanje kontrasta između boja koriste se tri vrijednosti boja umjesto dvije.

Primjer 2: Kružni gradijent

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Obratite pažnju na sintaksu, ako želimo da kombinujemo oblik gradijenta sa naznakom početne tačke, onda je ključna reč krug na prvom mestu, a zatim pozicija odvojena razmakom. Rezultat ovog primjera prikazan je na sl. pet.

Rice. 5. Kružni gradijent

Uz vrstu gradijenta, možete postaviti i njegovu veličinu, koja zavisi od ključnih riječi koje se koriste. Veličina se piše s razmakom nakon tipa gradijenta (krug ili elipsa).

U tabeli. 1 na listi moguće vrijednosti veličina s njihovim opisom i rezultatom za bijelu i crnu. Kod i pogled su dati za kružni i eliptični gradijent.

Tab. 1. Ključne riječi za promjenu veličine gradijenta

Značenje	Šifra	Opis	Pogled
	pozadina: radijalni gradijent (krug najbliže strane na 30px 20px, #fff, #000); pozadina: radijalni gradijent (najbliža strana elipse na 30px 20px, #fff, #000);	Oblik gradijenta odgovara strani bloka koja mu je najbliža.
	pozadina: radijalni gradijent (krug najbliži ugao na 30px 20px, #fff, #000); pozadina: radijalni gradijent (najbliži ugao elipse na 30px 20px, #fff, #000);	Oblik gradijenta se izračunava na osnovu informacija o udaljenosti do najbližeg ugla bloka.
	pozadina: radijalni gradijent (zaokruži najdalju stranu na 30px 20px, #fff, #000); pozadina: radijalni gradijent (najdalje elipsa na 30px 20px, #fff, #000);	Gradijent se proteže do daleke strane bloka.
najudaljeniji ugao	pozadina: radijalni gradijent (zaokruži krajnji ugao na 30px 20px, #fff, #000); pozadina: radijalni-gradijent (elipsa najudaljeniji ugao na 30px 20px, #fff, #000);	Oblik gradijenta se izračunava na osnovu informacija o udaljenosti do krajnjeg ugla bloka,

Za centralnu početnu tačku, gradijenti se poklapaju. Ali gradijenti će biti drugačiji ako postavite početnu tačku na uglu. Primjer 3 koristi vrijednost koja specificira početnu tačku u pikselima.

Primjer 3 Veličina gradijenta

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 6.

Rice. 6. Korištenje vrijednosti najbližeg ugla

Poput linearnog gradijenta, možete odrediti više boja, postaviti njihovu poziciju i napraviti oštre prijelaze između boja. Da biste to učinili, proizvoljan broj boja je naveden odvojen zarezima, a nakon vrijednosti boje, nakon razmaka slijedi njegova pozicija, koja se može specificirati u pikselima ili procentima. Ekstremne vrijednosti od 0% i 100% mogu se izostaviti, one se automatski pretpostavljaju.

Oštri prijelazi se dobijaju kada se pozicija jedne boje poklopi sa pozicijom druge, kao što je prikazano u primjeru 4. Razlika jednog piksela se radi da bi se prijelaz malo izgladio, inače ispada da je to "ljestve" piksela, što ne izgleda baš lepo.

Primjer 4. Nagli prijelazi

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 7.

Rice. 7. Oštri prijelazi između različitih boja

Ako se linearni i radijalni gradijent dopuni svojstvom veličine pozadine, tada ćemo dobiti široku paletu ponavljanja pozadinske slike koji su napravljeni bez upotrebe slika.

Rice. 1. Radijalni i linearni gradijent

Radijalni gradijent se kreira pomoću svojstva background-a ili background-image.

Sintaksa

Pozadinska slika: radijalni gradijent([ krug ||<радиус>][at<позиция>]? , | [ elipsa || [<радиус> | <проценты>](2)] [ at<позиция>]? , | [ [ krug | elipsa] ||<размер>][at<позиция>]? , | at<позиция> , <цвет> [ , <цвет> ]*)

Notacija

	Opis	Primjer
<тип>	Određuje tip vrijednosti.	<размер>
A&&B	Vrijednosti se moraju ispisati navedenim redoslijedom.	<размер> && <цвет>
A | B	Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B).	normalno | small-caps
A || B	Svaka vrijednost se može koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom.	širina || count
	Grupne vrijednosti.	[ usev || križ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jedan ili više puta.	<число>+
?	Navedeni tip, riječ ili grupa su opcioni.	umetnuti?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jedan ili više puta odvojeno zarezima.	<время>#

×

Vrijednosti

krug Radijalni gradijent kružnog oblika. ellipse Kreira eliptični gradijent. Ovaj obrazac je postavljen po defaultu.<радиус>Radijus gradijenta u CSS-pristupačnim jedinicama. Jedna vrijednost označava radijus kruga, dvije vrijednosti - polumjer elipse duž ose x i njen poluprečnik duž y ose. Ako radijus nije eksplicitno naveden, gradijent će ispuniti cijelu pozadinu elementa.<позиция>

Postavlja početnu tačku odakle dolazi gradijent. Položaj tačke se piše na isti način kao vrijednosti svojstva pozadinske pozicije, koristeći ključne riječi ili dostupne jedinice kao što su pikseli ili procenti; moguće kombinacije su navedene u nastavku.

• gore lijevo = lijevo gore = 0% 0% (gornji lijevi ugao);
• vrh = gornji centar = centar vrh = 50% 0% (srednji vrh);
• desno gore = gore desno = 100% 0% (gore desno);
• lijevo = lijevo centar = centar lijevo = 0% 50% (lijevo i centar);
• centar = centar centar = 50% 50% (centrirano) je zadano;
• desno = desno centar = centar desno = 100% 50% (desno i centar);
• dolje lijevo = lijevo dolje = 0% 100% (donji lijevi ugao);
• dno = donji centar = centar dno = 50% 100% (centrirano na dnu);
• dolje desno = desno dolje = 100% 100% (u donjem desnom uglu).

<цвет>Predstavlja vrijednost boje (pogledajte boju) praćenu opcionom pozicijom boje u odnosu na osu gradijenta, specificiranom kao postotak od 0% do 100% ili bilo koje druge jedinice prilagođene CSS-u.<размер>Postavlja veličinu gradijenta. U tabeli. 1 navodi moguće vrijednosti veličine s njihovim opisom i rezultatom za bijelu i crnu. Kod i pogled su dati za kružni i eliptični gradijent. Tab. 1. Ključne riječi za promjenu veličine gradijenta

Značenje	Šifra	Opis	Pogled
najbliža strana	pozadina: radijalni gradijent (krug najbliže strane na 30px 20px, #fff, #000); pozadina: radijalni gradijent (najbliža strana na 30px 20px, #fff, #000);	Gradijent se poklapa sa najbližom stranom bloka (za krug) ili se istovremeno poklapa sa najbližom horizontalnom i vertikalnom stranom (za elipsu).
	pozadina: radijalni gradijent (krug najbliži ugao na 30px 20px , #fff, #000); pozadina: radijalni gradijent (najbliži kut na 30px 20px , #fff, #000);	Oblik gradijenta se izračunava na osnovu informacija o udaljenosti do najbližeg ugla bloka.
	pozadina: radijalni gradijent (zaokruži najdalju stranu na 30px 20px , #fff, #000); pozadina: radijalni gradijent (najdalje na 30px 20px , #fff, #000);	Slično u akciji kao najbliža strana, ali gradijent se proteže na dalju stranu kutije.
najudaljeniji ugao	pozadina: radijalni gradijent (zaokruži krajnji ugao na 30px 20px , #fff, #000); pozadina: radijalni gradijent (najdalje ugao na 30px 20px , #fff, #000);	Oblik gradijenta se izračunava na osnovu informacija o udaljenosti do krajnjeg ugla bloka,

Primjer

Rezultat ovog primjera je prikazan ispod.

Bilješka

Chrome prije verzije 26, Safari prije verzije 6.1 i Android prije verzije 4.4 podržavaju -webkit-radial-gradient() .

Opera prije verzije 12.10 podržava -o-radial-gradient() .

Firefox do verzije 16 podržava -moz-radial-gradient() .

Sva svojstva s prefiksom ne koriste ključnu riječ at kada specificiraju poziciju početne točke gradijenta.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka (Recommendation) - specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
• Radni nacrt – zreliji nacrt nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) je nacrt standarda nakon što su urednici projekta izvršili izmjene.
• nacrt ( Nacrt specifikacije) je prva verzija verzije standarda.

×

Pregledači

Sljedeća notacija se koristi u tabeli pretraživača.

• - svojstvo je u potpunosti podržano od strane pretraživača sa svim važećim vrijednostima;
• - svojstvo ne percipira pretraživač i ignoriše se;
• - može se pojaviti tokom rada razne greške, ili je svojstvo samo djelomično podržano, na primjer, ne sve dozvoljene vrijednosti su važeći ili se svojstvo ne primjenjuje na sve elemente koji su navedeni u specifikaciji.

Broj označava verziju pretraživača iz koje je svojstvo podržano.

×

Radijalni gradijent se proteže od središnje tačke gradijenta u svim smjerovima u krugu ili elipsi (zadani oblik), pokazujući glatka tranzicija iz jedne nijanse u drugu. Radijalni gradijent se kreira pomoću funkcije radial-gradient(). Funkcija kreira sliku koja je radijalni gradijent između navedenih nijansi boja. Prema zadanim postavkama, veličina gradijenta odgovara veličini elementa na koji je primijenjen.

Funkcija radial-gradient() uzima sljedeće argumente razdvojene zarezima:

• Navedite ključne riječi i/ili jedinice kao prvi argument CSS dimenzije, definirajući konačni oblik, veličinu i početna lokacija gradijent. Opcioni argument.
• Lista odvojena zarezima od dvije ili više boja, od kojih svaka može biti praćena pozicijom zaustavljanja.

Najjednostavniji radijalni gradijent zahtijeva samo dva argumenta koji specificiraju početnu i završnu boju:

Div (pozadinska slika: radijalni gradijent (cijan, indigo); širina: 400px; visina: 100px; ) Pokušajte »

Kao iu slučaju korišćenja linearni gradijenti, radijalni gradijent može uključivati ​​listu od više od dvije boje, a pozicija zaustavljanja može biti specificirana za bilo koju boju.

Div ( širina: 400px; visina: 100px; margina: 10px; ) #jedan (slika pozadine: radijalni gradijent (cijan, žuta, indigo, bijela); ) #dva (slika pozadine: radijalni gradijent (cijan, žuta 10%, indigo 30%, bijela 50%); ) Pokušajte »

Oblik radijalnog gradijenta može se definirati pomoću ključnih riječi krug (krug) i elipsa (elipsa), navodeći jednu od njih kao prvi argument:

Div ( širina: 400px; visina: 100px; margina: 10px; ) #jedan (slika pozadine: radijalni gradijent (elipsa, cijan, indigo); ) #dva (slika pozadine: radijalni gradijent (krug, cijan, indigo ); ) Pokušajte »

Podrazumevano, pretraživač postavlja središnju tačku radijalnog gradijenta u centar elementa. Centar gradijenta se može pozicionirati pomoću ključna riječ at iza koje slijede ključne riječi (gore, lijevo, desno, dolje, centar) ili vrijednosti u određenim CSS jedinicama:

Značenje	Opis
lijevo vrh lijevo središte lijevo dolje desni vrh desni centar desno dolje centar vrh centar centar središnje dno	Ako navedete samo jednu ključnu riječ, druga će biti "centar".
x%y%	Prva vrijednost je horizontalna pozicija, druga vrijednost je vertikalna pozicija. Gornji lijevi ugao je pozicija 0% 0%. Donji desni ugao je pozicija 100% 100%. Ako navedete samo jednu vrijednost, druga vrijednost će biti 50%.
x-pos y-pos	Prva vrijednost je horizontalna pozicija, druga je vertikalna pozicija. Gornji lijevi ugao je pozicija 0 0. Jedinice mogu biti pikseli (0px 0px) ili bilo šta CSS jedinica mjerenja. Ako navedete samo jednu vrijednost, druga vrijednost će biti 50%. Možete kombinirati % i jedinice.

Pozicioniranje gradijenta je navedeno prije vrijednosti nijanse, ali nakon ključne riječi oblika gradijenta (ako postoji):

Div ( širina: 400px; visina: 100px; margina: 10px; ) #jedan (slika pozadine: radijalni gradijent (desno, cijan, indigo); ) #dva (slika pozadine: radijalni gradijent (krug na 300px 50px , cijan, indigo, žuta); ) #three (slika pozadine: radijalni gradijent (krug gore lijevo, cijan, indigo, žuta); ) Pokušajte »

Veličina gradijenta (koliko bi trebao biti konačni oblik gradijenta) može se odrediti pomoću jedne od četiri ključne fraze, ili specificiranjem radijusa pomoću CSS jedinica (procenti se ne mogu koristiti za definiranje radijusa).

Ključne riječi	Opis
Konačna veličina gradijenta zavisi od udaljenosti između centra gradijenta i strane elementa koja mu je najbliža (za krug), ili od udaljenosti između centra i dve strane elementa koji su mu najbliži (za elipsa).
Konačna veličina gradijenta ovisi o udaljenosti između centra gradijenta i najbližeg ugla elementa.
Konačna veličina gradijenta ovisi o udaljenosti između središta gradijenta i strane elementa najudaljenije od njega (za krug) ili udaljenosti između središta gradijenta i dvije najudaljenije strane od njega (za elipsu ).
Konačna veličina gradijenta ovisi o udaljenosti između centra gradijenta i ugla elementa koji je najudaljeniji od njega. Standardno se koristi za oblik kruga ili elipse.

Ključne riječi koje definiraju veličinu gradijenta ili radijus specificiraju se prije ili poslije ključne riječi koja definira oblik, i uvijek prije pozicije.

Div ( širina: 400px; visina: 100px; margina: 10px; ) #jedan (slika pozadine: radijalni-gradijent(krug najbliži ugao na 100px, cijan 50%, indigo); ) #dva (slika pozadine: radijalna- gradijent (krug najbliža strana, cijan, crvena, indigo); ) #three (slika pozadine: radijalni gradijent (100px krug na 200px, cijan 50%, indigo); ) #four (pozadinska slika: radijalni gradijent( 170px 50px elipsa na 175px, cijan, #90EE90, rgba(172,160,160,0)); )