CSS3 kružni i eliptični gradijenti [CSS3 savjeti]

Danas ćemo nastaviti raspravu o tome CSS3 gradijenti. U prethodnom postu pokazali smo vam kako se stvara Linearni gradijenti. Ovaj put ćemo pokriti njihovog rođaka, Kružni i eliptični gradijenti.

Sintaksa gradijenta

Gradijent u CSS3 je deklariran pomoću pozadinska slika nekretnine. Ovo je za bolju kompatibilnost kada trebamo dodati boja pozadine u jednom skupu pravila, tako da se ne sudaraju jedan s drugim. Zatim, da bismo stvorili radijalni gradijent, jednostavno ga nazovemo s ovim radijalnim gradijent () funkcija. Postoje četiri vrijednosti koje treba uključiti u funkciju za ispravno podešavanje gradijenta.

Prva vrijednost definira položaj gradijenta. Možemo upotrijebiti opisnu ključnu riječ kao što su vrh, dno, središte i lijevo ili možemo biti specifičniji, 50% 50% za postavljanje nagiba u sredinu ili 0% 0% da biste postavili gradijent na početak gore lijevo.

Druga vrijednost definira oblik i veličinu gradijenta, postoje dva argumenta koji oblikuju gradijente, prvo elipsa koja je zadana, a druga je krug.

I za veličina gradijenta, možemo odabrati jedan od sljedećih šest argumenata.

vrijednosti	Opis
`Najbliže strani`	Oblik gradijenta ispunjava stranu kutije koja je najbliža njegovom središtu (za krugove) ili ispunjava i vertikalne i horizontalne stranice najbliže središtu (za elipse).
`Najbliže-kutak`	Oblik gradijenta je veličine tako da točno odgovara njegovom središnjem kutu.
`najudaljeniji strani`	Slično najbližoj strani, osim što je oblik dimenzioniran tako da zadovoljava stranu najudaljenije od središta (ili vertikalne i horizontalne strane).
`najdalje-kutak`	Oblik gradijenta je veličine tako da se točno udaljava od najudaljenijeg kuta kutije od njegovog središta.
`sadržati`	Sinonim za `Najbliže strani`.
`pokriti`	Sinonim za `najdalje-kutak`.

Izvor tablice: Mozilla Developer Network.

Konačno, treći i četvrti definiraju kombinacija boja. Dakle, evo kako pišemo sintaksu za stvaranje eliptičan gradijentima, a ovaj put ćemo koristiti pokriti za veličinu gradijenta, tako da će se široko proširiti, pokrivajući spremnik;

 tijelo background-image: radijalno-gradijent (središte, poklopac elipse, # ffeda3, # ffc800);

Za izradu Kružni gradijent možemo jednostavno učiniti na ovaj način:

 tijelo pozadina-slika: radijalno-gradijent (središte, poklopac kruga, # ffeda3, # ffc800);

Kao što naziv implicira, oblik gradijenta bit će krug.

Podrška za preglednik

Samo uzmite u obzir, međutim, svi preglednici su još uvijek u procesu pružanja potpune podrške za ovu značajku, tako da i dalje trebaju prefiks dobavljača. Dakle, cijela potpuna sintaksa koja će raditi u svim modernim preglednicima - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ i Opera 11+ - će izgledati ovako;

 body background-image: radijalno-gradijent (središnje dno, poklopac elipse, # ffeda3, # ffc800); background-image: -o-radijalni gradijent (središnje dno, poklopac elipse, # ffeda3, # ffc800); background-image: -ms-radijalni gradijent (središnje dno, poklopac elipse, # ffeda3, # ffc800); background-image: -moz-radijalni gradijent (središnje dno, poklopac elipse, # ffeda3, # ffc800); background-image: -webkit-radijalni gradijent (središnje dno, poklopac elipse, # ffeda3, # ffc800);

Pogledajte demo ili preuzmite izvor kako biste se igrali s gradijentima.

Demo
Preuzimanje izvora

Završne riječi

Stvaranje radijalnog gradijenta CSS3 nije toliko teško kao što mislite, a posebno kada dobijete pomoć od tih alata za generiranje koda:

Colorzilla gradijenti
Gradientoo

Radijalni gradijent je samo jedna vrsta CSS3 gadienta, nastavit ćemo našu raspravu o toj temi u budućim postovima, stoga ostanite u tijeku s Hongkiat.com