Css radijalni gradijent. Pogled na CSS3 gradijent (linearni i radijalni gradijenti)

Svi koji bi mogli biti zainteresirani za CSS3 su ga vidjeli i isprobali. Možemo generirati i zaobljene kutove i padajuće sjene bez previše napora.

Ali ovo je samo površna razina. Morao sam se detaljnije pozabaviti novim mogućnostima preglednika kako bih odgovorio na pitanja koja su se pojavila poput: kako su gradijenti međupreglednika s mnogo prijelaza boja, gdje i kako možete primijeniti više sjena na blok odjednom, za što primjenjuju se prefiksi svojstava određenih preglednika itd.

Također, zanimala me je podrška za CSS3 mobilne platforme, neistražene značajke CSS3 i generatori koji generiraju međupreglednički kod. Pokušao sam popuniti neke praznine i prikupiti korisna informacija za one koji se tek spremaju zaroniti.

Preglednici koji podržavaju svojstva navedeni su kao CSS komentari. Generatori i alati najčešće mogu obavljati nekoliko funkcija odjednom, pa ih u takvim slučajevima navodim samo tamo gdje mislim da rade najbolje.

Linearni gradijent

Zapravo, postoji nekoliko vrsta CSS3 gradijenata odjednom. Ovo je najjednostavniji gradijent.
div (
boja pozadine: # 444444;
background-image: -webkit-gradient (linearno, lijevo gore, lijevo dolje, od (# 444444), do (# 999999)); / * Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 * /
background-image: -webkit-linear-gradient (vrh, # 444444, # 999999); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
background-image: -moz-linear-gradient (vrh, # 444444, # 999999); / * Firefox 3.6+ * /
background-image: -ms-linear-gradient (vrh, # 444444, # 999999); / * IE 10+ * /
pozadinska slika: -o-linearni-gradijent (vrh, # 444444, # 999999); / * Opera 11.10+ * /
pozadinska slika: linearni gradijent (do dna, # 444444, # 999999);
}

Uz navođenje početne i završne boje, gradijenti vam omogućuju promjenu kuta nagiba, položaja početka i kraja prijelaza boja, broja boja i smjera gradijenta.

Safari prije verzije 5 i Chrome prije verzije 10 imali su vlastitu sintaksu, a IE 10 i Opera dodaju vlastite prefikse, povećavajući količinu koda.

Sve značajke gradijenta podržavaju preglednici koji mogu generirati CSS3 gradijente, iako nam neki generatori nude samo prijelaz između dvije boje.

Ponavljajući linearni gradijent

Omogućuje ponavljanje gradijenta, omogućuje stvaranje pozadinskih uzoraka.

Div (
boja pozadine: # 444444;
pozadinska slika: -webkit-repeating-linear-gradient(vrh, # 444444 18%, # 999999 25%); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
pozadinska slika: -moz-repeating-linear-gradient(vrh, # 444444 18%, # 999999 25%); / * Firefox 3.6+ * /
background-image: -ms-repeating-linear-gradient (vrh, # 444444 18%, # 999999 25%); / * IE 10+ * /
background-image: -o-repeating-linear-gradient (vrh, # 444444 18%, # 999999 25%); / * Opera 11.10+ * /
pozadinska slika: linearni gradijent koji se ponavlja (vrh, # 444444 18%, # 999999 25%);
}

Radijalno-gradijent

Kružni gradijent. Također možete imati nekoliko prijelaza boja, možete definirati početnu točku gradijenta (ne nužno iz središta kruga).

Div (
pozadina: # 444444;
pozadina: -webkit-gradient (radijalno, središnje središte, 0px, središnje središte, 100%, zaustavljanje boje (0%, # 444444), zaustavljanje boje (100%, # 999999)); / * Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 * /
pozadina: -webkit-radial-gradient (centar, poklopac elipse, # 444444 0%, # 999999 100%); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
pozadina: -moz-radial-gradient (centar, poklopac elipse, # 444444 0%, # 999999 100%); / * Firefox 3.6+ * /
pozadina: -o-radial-gradient (centar, poklopac elipse, # 444444 0%, # 999999 100%); / * Opera 11.6+ * /
pozadina: -ms-radial-gradient (centar, poklopac elipse, # 444444 0%, # 999999 100%); / * IE 10+ * /
pozadina: radijalni gradijent (centar, poklopac elipse, # 444444 0%, # 999999 100%);
}

Opera nije podržavala kružne gradijente do verzije 11.6. Ostatak situacije je isti kao s linearnim gradijentom.

Alati:

1. gradients.glrzad.com proizvodi kod za više preglednika, može se stvoriti mnogo prijelaza boja
2. www.colorzilla.com/gradient-editor najsofisticiraniji generator. Možete kreirati linearne i kružne gradijente, postoji izbor formata za snimanje boja, mnogo gotovih gradijenta.
3. lea.verou.me/css3patterns galerija CSS3 uzoraka. Možete vidjeti kod za svaki uzorak.

Više pozadina

Ovo je mogućnost dodjeljivanja nekoliko pozadinskih slika jednom elementu odjednom.
div (
pozadina: url (fallback.png) bez ponavljanja 0 0;
pozadina: url (foreground.png) bez ponavljanja 0 0, url (middle-ground.png) bez ponavljanja 0 0, url (background.png) bez ponavljanja 0 0; / * Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ * /
}

Ne zaboravite na preglednike koji ne podržavaju više pozadina.

Redoslijed pozadina je sljedeći: od vrha prema dolje, odnosno najdonja pozadina mora biti napisana na kraju. Umjesto pozadinske slike također možete napisati CSS3 gradijente.

Granica-radijus

Zaobljeni kutovi u bloku. Jednostavno je ako trebate isti radijus zakrivljenosti.

Div (
-webkit-border-radius: 12px; / * Safari 3-4, iOS 1-3.2, Android ≤1.6 * /
-moz-border-radius: 12px; / * Firefox 1-3.6 * /
radijus granice: 12px; / * Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+, iOS 4+, Android 2.1+ * /
}

Svi proizvođači su već napustili prefikse dobavljača najnovije verzije preglednici.

Ali ako različiti kutovi moraju imati različite polumjere, tada morate navesti polumjere za svaki kut.

Firefox ima osobitost da se kutovi nabrajaju upotrebom sintakse koja nije standardna. No rješenje može biti korištenje skraćene sintakse, koja je ista u svim preglednicima.

div (
-moz-border-radius: 15px 30px 45px 60px;
-webkit-border-radius: 15px 30px 45px 60px;
radijus granice: 15px 30px 45px 60px;
}

Zanimljiva značajka je prijenos parova vrijednosti radijusa za svaki kut. Tako možete postići više složenih oblika nego samo zaokruživanja:

Div (
granica-gore-lijevo-radijus: 5px 30px;
border-top-right-radius: 30px 60px;
granica-dolje-lijevo-radijus: 80px 40px;
border-bottom-right-radius: 40px 100px;
}

Ako su svi isti:

Div (
radijus granice: 8px / 13px;
}

Alati:

Upd Za one koji žele automatizirati proces stvaranja prefiksa je napisano.

Radijalni gradijent proteže se od središnje točke gradijenta u svim smjerovima u krugu ili eliptičnom obliku (zadani oblik), pokazujući glatki prijelaz iz jedne nijanse boje u drugu. Radijalni gradijent se stvara pomoću funkcije radijalnog gradijenta (). Funkcija stvara 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 odvojene zarezima:

• Ključne riječi i/ili jedinice navedene su kao prvi argument CSS dimenzije određivanje konačnog oblika, veličine i početno mjesto gradijent. Neobavezni argument.
• Popis odvojen zarezima od dvije ili više boja, od kojih svaka može biti praćena položajem zaustavljanja.

Najjednostavniji radijalni gradijent zahtijeva samo dva argumenta za određivanje početne i završne boje:

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

Kao i kod linearnih gradijenta, radijalni gradijent može uključivati ​​popis od više od dvije boje, a za bilo koju boju može se odrediti položaj zaustavljanja.

Div (širina: 400px; visina: 100px; margina: 10px;) #one (pozadinska slika: radijalni gradijent (cijan, žuta, indigo, bijela);) #two (pozadinska slika: radijalni gradijent (cijan, žuta) 10%, indigo 30%, bijeli 50%);) Probaj "

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

Div (širina: 400px; visina: 100px; margina: 10px;) #one (pozadinska slika: radijalni gradijent (elipsa, cijan, indigo);) #two (pozadinska slika: radijalni gradijent (krug, cijan, indigo) );) Probaj "

Prema zadanim postavkama, preglednik postavlja središnju točku radijalnog gradijenta u središte elementa. Središte gradijenta može se postaviti pomoću ključne riječi at iza koje slijede ključne riječi (gore, lijevo, desno, dolje, središte) ili vrijednosti u određenim CSS jedinicama:

Značenje	Opis
lijevo vrh lijevo središte lijevo dolje desni vrh desno središte desno dolje središnji vrh centar centar središnje dno	Ako navedete samo jednu ključnu riječ, druga će biti "centar".
x% y%	Prva vrijednost je vodoravni položaj, druga vrijednost je okomita. Gornji lijevi kut je pozicija 0% 0%. Donji desni kut je pozicija 100% 100%. Ako navedete samo jednu vrijednost, druga vrijednost će biti 50%.
x-poz y-poz	Prva vrijednost je horizontalni položaj, druga je vertikalna. Gornji lijevi kut je pozicija 0 0. Jedinice mogu biti pikseli (0px 0px) ili bilo koje druge CSS jedinica mjerenja. Ako navedete samo jednu vrijednost, druga vrijednost će biti 50%. Možete miješati% i jedinice.

Pozicioniranje gradijenta navedeno je prije vrijednosti nijanse, ali nakon ključne riječi koja definira oblik gradijenta (ako je navedeno):

Div (širina: 400px; visina: 100px; margina: 10px;) #one (pozadinska slika: radijalni gradijent (desno, cijan, indigo);) #two (pozadinska slika: radijalni gradijent (krug na 300px 50px , cijan, indigo, žuta);) #three (pozadinska slika: radijalni gradijent (krug u gornjem lijevom kutu, 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 navođenjem radijusa pomoću CSS jedinica (ne možete koristiti postotke za određivanje radijusa).

Ključne riječi	Opis
Konačna veličina gradijenta ovisi o udaljenosti između središta gradijenta i najbliže strane elementa (za krug) ili udaljenosti između središta i dviju strana elementa koji su mu najbliži (za elipsu).
Konačna veličina gradijenta ovisi o udaljenosti između središta gradijenta i kuta elementa koji mu je najbliži.
Konačna veličina gradijenta ovisi o udaljenosti između središta gradijenta i najudaljenije strane elementa (za krug) ili udaljenosti između središta gradijenta i dviju najudaljenijih strana (za elipsu).
Konačna veličina gradijenta ovisi o udaljenosti između središta gradijenta i kuta najudaljenijeg od njega. Koristi se prema zadanim postavkama za oblik kruga ili elipse.

Ključne riječi koje definiraju veličinu gradijenta ili radijusa navedene su prije ili iza ključne riječi koja definira oblik, i uvijek prije definiranja položaja.

Div (širina: 400px; visina: 100px; margina: 10px;) #one (pozadinska slika: radijalni gradijent (zaokruži najbliži kut na 100px, cijan 50%, indigo);) #two (pozadinska slika: radijalna- gradijent (krug najbliža strana, cijan, crvena, indigo);) #three (pozadinska slika: 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));)

a! Gradijent je izvrstan alat za manipulaciju bojama CSS3... Umjesto korištenja slike za stvaranje efekta gradijenta na web stranici, korisnije je koristiti CSS3 gradijent i tako "osvijetliti" stranicu. Budući da korisnik neće morati gubiti vrijeme i promet za preuzimanje pozadinska slika... Postoje dvije glavne vrste gradijenata: radijalni i linearni. Današnji post će biti o njima.

Linearni gradijent

Kako kaže klasifikacija, gradijenti u CSS3 su slike. Za njih ne postoje posebna svojstva. A za oglas se koristi svojstvo pozadinske slike.

V opći slučaj Gradijentna (linearna) sintaksa izgleda ovako:

1 2 3 4 5 6 7

div ( background-image: -webkit-linear-gradient (vrh, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (vrh, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (vrh, # FF5A00 0%, # FFAE00 100%); pozadinska slika: -o-linearni gradijent (vrh, # FF5A00 0%, # FFAE00 100%); }

Dakle, razgovarajmo o svemu po redu.

Prije svega, linearni gradijent se deklarira s funkcijom linear-gradient (). Funkcija ima tri glavna značenja. Prva vrijednost određuje početni položaj... Primjer specificira vrh, tj. početna pozicija na vrhu. Također možete koristiti donje, lijevo i desno;

Ako je kut negativan, tada će se položaj promijeniti iz donjeg lijevog kuta u gornji lijevi.

Druga vrijednost funkcije je početna boja i njegov zaustavni položaj, koji je naznačen kao postotak. Proglašavajući ovu poziciju neobaveznom, preglednik će prema zadanim postavkama dodijeliti 0% prvoj boji.

Posljednja vrijednost je druga boja i njezin položaj zaustavljanja. Zadana vrijednost je 100%. To su ekstremne vrijednosti i podrazumijevaju da prva boja odmah počinje prelaziti u drugu. Međutim, ako za prvu boju postavimo 50%, tada će ona početi tek od sredine dostupne visine do druge. Ovako izgleda kod:

Dobivamo trake iste visine. S jasnom granicom neće biti prijelaza boja. Eksperimentirajte s vrijednostima kako biste bolje razumjeli kako to funkcionira.

Radijalni gradijent, baš kao i linearni, deklariran je kao funkcija, samo ovaj put radijalni gradijent (). Postoje i osnovne vrijednosti: ovo je oblik radijalnog gradijenta (krug - krug ili elipsa - elipsa), početna i završna boja. Sintaksa je sljedeća:

div ( pozadina: radijalni gradijent (krug, # F9E497, # FFAE00); }

Ako ne navedete oblik, tada će se prema zadanim postavkama postaviti elipsa.

Također, prema zadanim postavkama, središnji položaj gradijenta je postavljen, može se mijenjati. Položaj se može postaviti naredbama (gore, dolje, lijevo, desno i središte), kao i njihovim kombinacijama, ili specificirati u postocima ili pikselima.

Kombinacije naredbi:

• Gornji centar - vrh - 50% 0%;
• U lijevoj gornji kut- lijevo gore - 0% 0%;
• U gornjem desnom kutu - desno gore - 100% 0%;
• Centar - centar - 50% 50%;
• Lijevo središte - lijevo središte - 0% 50%;
• Desno središte - desno središte - 100% 50%;
• Donji centar - dno - 50% 100%;
• U donjem lijevom kutu - lijevo dolje - 0% 100%;
• U donjem desnom kutu - desno dolje - 100% 100%.

Evo primjera s postocima:

div ( pozadinska slika: radijalni gradijent (70% 20%, krug, # F9E497, # FFAE00); }

Prva vrijednost duž osi x drugo do Imati.

Također možete dimenzionirati radijalni gradijent. Veličina je navedena s razmakom nakon oblika gradijenta. Zadana vrijednost je najudaljeniji kut(u dalji kut). Proračun se provodi od središnje točke nagiba do:

Da biste to bolje razumjeli, razmotrite primjer. Eliptični gradijent s bijelim početnim i plavim krajem:

div ( background-image: radial-gradient (230px 50px, elipsa najbliža strana, bijela, plava); }

Veličina se izračunava od udaljenosti do bližih strana, očito je da je gornja bliža duž osi Y i lijevo duž osi x.

A sada na daleke strane:

div ( pozadinska slika: radijalni gradijent (230px 50px, elipsa krajnja strana, bijela, plava); }

Rezultat, kako kažu na licu. Veličina se izračunava od udaljenosti do udaljenih strana.

U radijalnom, kao iu linearnom gradijentu, za boju se mogu primijeniti stop položaji. Također bih želio napomenuti da ako trebate postići transparentnost boja, onda biste trebali koristiti rgba.

div ( pozadinska slika: linearni gradijent (vrh, rgba (255, 90, 0, 0,2), rgba (255, 174, 0, 0,2)); }

Alfa kanal, posljednji i jednak 0,2, pokazuje da se od 100% koristi samo 20% boje.

U oba oblika CSS3 gradijent možete koristiti ne dvije, već nekoliko boja.

div ( pozadinska slika: linearni gradijent (vrh, crvena, narančasta, žuta, zelena, plava, indigo, ljubičasta); }

Za oba prikaza može se koristiti ponavljanje boja. Odnosno, od tih vrijednosti se formira ciklus. Funkcije gradijenta koji se ponavlja, ponavljajući linearni gradijent () za linearni i ponavljajući radijalni gradijent () za radijalni.

div ( background-image: repeating-radial-gradient (crvena, plava 20px, crvena 40px); }

0%, # FFAE00 100%); / * za Firefox * /
background-image: -ms-linear-gradient (vrh, # FF5A00 0%, # FFAE00 100%); / * za IE 10+ * /
pozadinska slika: -o-linearni gradijent (vrh, # FF5A00 0%, # FFAE00 100%); / * za Operu * /
pozadinska slika: linearni gradijent (vrh, # FF5A00 0%, # FFAE00 100%); / * standardna sintaksa * /
}

div (
filter: progid: DXImageTransform.Microsoft .gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
}

Gdje je 33 odmah nakon rešetke postotak zasićenosti boje.

Nadam se da vam je članak bio koristan, te da je tema o kojoj se raspravlja u potpunosti razotkrivena.

Da biste bili u tijeku s najnovijim člancima i lekcijama, pretplatite se na

Vrijednost -moz-radial-gradienta

Označava radijalni (kružni) gradijent. Odnosi se na,.

Sintaksa

-moz-radijalni-gradijent([ || ,]? [ || ,]? , [, ]*)

Korištene vrijednosti

Ovo je pozicija ili referentna točka za gradijent, koja predstavlja isto što i u svojstvima ili. Ako se izostavi, vrijednost se automatski dodjeljuje centar. Određuje kut pod kojim se gradijent proteže. Zadana vrijednost je 0 stupnjeva. Određuje oblik gradijenta. Može biti u obliku kruga ( krug) ili elipsa ( elipsa). Zadana vrijednost je elipsa. Određuje veličinu gradijenta: najbliža strana- Najbliža strana. Gradijent se širi od središta prema najbližoj strani elementa (za krug), ili na horizontalnu i okomitu stranu (za elipsa). najbliži-ugao- Najbliži kutak. Veličina gradijenta je takva da se proteže od središta do najbližeg kuta elementa. najdalje- Najdalje. Gradijent se širi od središta prema krajnjoj strani elementa (za krug), ili na obje, vodoravne i okomite, strane (za elipsa). najudaljeniji kut- Najdalji kut. Veličina gradijenta je takva da se proteže od središta do najudaljenijeg kuta elementa. sadržavati- Slično najbliža strana. pokriti- Slično najudaljeniji kut. Odgovoran za prikazivanje boja-zaustavljanja(mjesta promjene boje) u CSS gradijenti prema istim pravilima kao u SVG gradijenti. Može se odrediti kao postotak ili mjera duljine, kao što su pikseli.

Opaske

Gradijent je kombinacija dviju ili više unaprijed definiranih boja koje se glatko stapaju jedna u drugu. V CSS gradijenti se koriste umjesto bilo kakvih slika, kao indikator učitavanja, kako bi se poboljšala percepcija web stranice pri skaliranju itd. Mozilla Firefox podržava dvije vrste gradijenata: linearne i radijalne.

Mozilla Firefox ispravno podržava gradijente samo kao vrijednosti za svojstvo, a također. Možete odrediti vrijednost za gradijent umjesto URL-a slike.

Radijalni ili kružni gradijent naveden sa -moz-radijalni-gradijent, također se proteže duž osi. Može se zamisliti kao niz kružnica duž osi, svaka s referentnom točkom (centrom) i duljinom radijusa. Radijalni gradijent izgleda ovako:

Pozadinska slika: -moz-radial-gradijent (središte 45 stupnjeva, krug najbliža strana, narančasta 0%, crvena 100%);

-moz-radijalni-gradijent ne podržava ponavljajuće gradijente. Prema zadanim postavkama, gradijent se proteže kako bi ispunio cijeli element na koji je primijenjen. Pogledajte ovaj članak kako biste saznali kako stvoriti kružni gradijent koji se ponavlja.

Primjeri

Primjeri pokazuju kako opisati radijalne gradijente pomoću -moz-radijalni-gradijent

Pozadina: -moz-radial-gradient (45px 45px 45deg, poklopac kruga, aqua 0%, rgba (0, 0, 255, 0) 100%, plava 95%);

Primjer rezultata izvršenja:

Pozadina: -moz-radial-gradient (45px 45px, elipsa najudaljeniji kut, aqua 0%, rgba (0, 0, 255, 0) 100%, plava 95%); bez ponavljanja;

Primjer rezultata izvršenja:

Pozadina: -moz-radial-gradient (45px 45px, cover, rgb (255, 0, 0) 0%, rgb (0, 0, 255) 100%);

Kako ne biste pretraživali internet za ostatcima informacija, bolje je sve skupiti na jednom mjestu. Danas ćemo razgovarati o CSS3 gradijenti- neophodna značajka, često korištena i, naravno, korisna u razvoju i izgledu. Postojala je želja da se napravi enciklopedijski članak, ali kako se to dogodilo, na vama je da prosudite.

“Gradijent je vrsta ispune u računalnoj grafici, u kojoj je potrebno postaviti boju i transparentnost pojedinih (ključnih) točaka, a boja i prozirnost ostalih točaka se izračunavaju u odnosu na njih prema određenim matematičkim algoritmima. Tako možete dobiti glatke prijelaze iz jedne boje u drugu, postavljajući koordinate i boju početne i krajnje točke." Wikipedia

Usput, za one koji tek počinju savladavati CSS - prekrasan članak Natalije Mitrofanove - Kako koristiti CSS. Svi novajlije visoko preporučeno upoznati. Pristupačno, razumljivo - općenito, izvrsno
No, vratimo se na temu članka. Postoje dvije vrste gradijenata u CSS3 - linearni i radijalni. Razmotrimo svaku vrstu detaljnije kako bismo razumjeli specifičnosti njihove uporabe.

Linearni gradijent CSS3

Linearni gradijent je onaj u kojem se boja proporcionalno miješa između dvije točke u ravnoj liniji. Najlakši način je na primjer:

Div (/ * - prefix-linear-gradient (početna boja, završna boja); * / pozadina: -moz-linear-gradient (#FFF, # 000); pozadina: -ms-linear-gradient (#FFF, # 000) ); pozadina: -o-linear-gradient (#FFF, # 000); pozadina: -webkit-linear-gradient (#FFF, # 000);)

Elementarni primjer- Linearni gradijent koji počinje bijelom i završava crnom. Prefiks dobavljača - obavezno uključeno ovaj trenutak, jedinstveni standard ne, budući da su gradijenti još uvijek eksperimentalna značajka, unatoč svoj podršci preglednika.

Idemo naprijed i razmotrimo više složen primjer- promijeniti smjer gradijenta. Smjer u sintaksi se zove točka i zahtijeva dvije vrijednosti - odakle i gdje. Ukupno ima pet vrijednosti: vrh, dno, lijevo, pravo i centar. Sukladno tome, pri pisanju smjera moraju se koristiti dva značenja. Prvo je "gdje", drugo je "gdje". Ali postoji mala suptilnost - ako je navedeno samo jedno mjesto - drugo će zadano biti centar... Razmotrite to u svojim projektima.

U gornjem primjeru smjer gradijenta nije naveden, pa je smjer odabran prema zadanim postavkama. gornji centar.

Div (pozadina: linearni gradijent (gornji centar, #FFF, # 000);) div (pozadina: linearni gradijent (vrh, #FFF, # 000);)

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

Kao alternativa smjeru, već kao dodatak, u zapisu se mogu koristiti kutovi čija se vrijednost može specificirati u nekoliko vrijednosti, uključujući stupnjeve, radijane i druge geometrijske stvari. Ali radi jednostavnosti, bolje je koristiti stupnjeve, tako da će svima biti jasno. Gradacije su u smjeru kazaljke na satu - 0 ili 360 je gore, 90 je desno, 180 je dolje i 270 je lijevo. Unos sa predznakom minus je prihvatljiv - u ovom slučaju gradacija ide u smjeru suprotnom od kazaljke na satu.

Pogledajmo nekoliko primjera kako bismo razumjeli proces:

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

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

Sljedeći zanimljiv trenutak kada radite s gradijentima -

Dodajte stop boju

Do sada smo koristili samo jednostavne dvobojne gradijente. Sada za složeniji primjer, dodajte drugu boju gradijentu. ovako:

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

Ovaj primjer dodaje bijela boja između dva crnca. Rezultat je gradijent koji ide od crne do bijele i vraća se na početno stanje- na crno. Jasniji rad Prikazat ću stop boje u nekoliko primjera:

Ex1 (pozadina: linearni gradijent (lijevo, # 000, # FFF, # 000);) ex2 (pozadina: linearni gradijent (lijevo, # 000, # FFF 75%, # 000);) ex3 (pozadina: linearni- gradijent (dno, # 000, # FFF 20px, # 000);) ex4 (pozadina: linearni gradijent (45 stupnjeva, # 000, # FFF, # 000, # FFF, # 000);)

Rezultat na slici:

U prvom primjeru, točno ono što je gore rečeno - bijelo točno između dva crna (kvraga, kako je ispalo politički nekorektno).

Drugi primjer je isti, samo je naznačeno gdje će biti boja zaustavljanja. V u ovom slučaju- 75% od početka. Sintaksa je jednostavna - primjer pokazuje. Nakon vrijednosti boje navedite poziciju u postocima. Zarezi nisu potrebni.

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

Četvrto - pet zaustavljanja boje, promijenjen smjer. Sve je dovoljno jednostavno.

Radijalni gradijent CSS3

Zapravo, puno 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 točke u središtu duž kružnice.

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

Sintaksa je gotovo ista, s jednom razlikom - dodani oblik i veličina. Postoje dvije vrste oblika - elipsa i krug (elipsa, odnosno krug, 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 navedeni s prefiksom dobavljača preglednika:

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 složeniji kod:

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

Primijetite da u primjeru postoje dva gore spomenuta selektora - oblik i veličina (položaj). Teško je imenovati veličinu vrijednosti selektora, prije je mjesto. Ali u službenoj dokumentaciji ovaj selektor je označen kao veličina, stoga ćemo ga nazvati veličinom. Krug - samo znači da će gradijent biti okrugao, a ne eliptičan. Sadrži - jedna od ključnih riječi koju birač veličine može prihvatiti. Opisat ću svaki da bude jasnije:

• najbliža strana- Najbliža strana. Gradijent se širi od središta prema najbližoj strani elementa (za krug), ili na horizontalnu i okomitu stranu (za elipsa).
• najbliži-ugao- Najbliži kutak. Veličina gradijenta je takva da se proteže od središta do najbližeg kuta elementa.
• najdalje- Najdalje. Gradijent se širi od središta prema krajnjoj strani elementa (za krug), ili na obje, vodoravne i okomite, strane (za elipsa).
• najudaljeniji kut- Najdalji kut. Veličina gradijenta je takva da se proteže od središta do najudaljenijeg kuta elementa.
• sadržavati- Slično najbliža strana.
• pokriti- Slično najudaljeniji kut.

Nekoliko primjera radi jasnoće:

Ex1 (pozadina: radijalni gradijent (krug najdalja strana, # 000, #FFF);) ex2 (pozadina: radijalni gradijent (lijevo, krug najdalje, # 000, # FFF);) ex3 (pozadina: radijalni- gradijent (desni vrh, 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 drugu stranu (koristi se najdalje)

Drugo - središte je lijevo, gradijent se širi na dalju stranu.

Treći - središte gore desno, gradijent do krajnjeg kuta.

Četvrto, središte se nalazi u točki, 50% širine, 80% visine i kružnog nagiba prema najbližoj strani.

Dodajte stop boju

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

Primjer 1 (pozadina: radijalni gradijent (zaokruži najdalju stranu, # 000, # FFF, # 000);) ex2 (pozadina: radijalni gradijent (kruži najdalja strana, # 000, # FFF 25%, # 000);) ex3 (pozadina: radijalni gradijent (lijevo, krug najdalje, # 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.

To je sve za danas. Članak je već opsceno ogroman. Hvala svima koji su pročitali do sada. Retweetovi i svaki socijalizam su samo dobrodošli. Ugodan dan