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

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

Ali ovo je samo površan nivo. Morao sam se detaljnije pozabaviti novim mogućnostima pretraživača kako bih odgovorio na pitanja koja su se pojavila: kako su gradijenti među pretraživačima sa mnogo prijelaza boja, gdje i kako možete primijeniti više sjenki na blok odjednom, za šta primjenjuju se prefiksi svojstva specifičnih pretraživača itd.

Također, zanimala me je podrška za CSS3 mobilne platforme, neistražene karakteristike CSS3 i generatori koji generišu kod za više pretraživača. Pokušao sam popuniti neke praznine i prikupiti korisne informacije za one koji se tek spremaju za ronjenje.

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

Linearni gradijent

U stvari, postoji nekoliko tipova 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+ * /
background-image: -o-linear-gradient (vrh, # 444444, # 999999); / * Opera 11.10+ * /
background-image: linearni gradijent (do dna, # 444444, # 999999);
}

Pored navođenja početne i završne boje, gradijenti vam omogućavaju da promijenite ugao nagiba, položaj početka i kraja prijelaza boja, broj boja i smjer gradijenta.

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

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

Ponavljajući linearni gradijent

Omogućava vam ponavljanje gradijenta, omogućava vam da kreirate pozadinske uzorke.

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+ * /
background-image: ponavljajući-linearni-gradijent (vrh, # 444444 18%, # 999999 25%);
}

Radijalni gradijent

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

Div (
pozadina: # 444444;
pozadina: -webkit-gradijent (radijalno, centar centar, 0px, centar centar, 100%, boja-stop (0%, #444444), boja-stop (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 kod linearnog gradijenta.

Alati:

1. gradients.glrzad.com proizvodi kod za više pretraživača, mogu se kreirati mnogi prijelazi 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 šablona. Možete vidjeti kod za svaki uzorak.

Više pozadina

Ovo je mogućnost dodjele 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 pretraživače koji ne podržavaju više pozadina.

Redoslijed pozadina je sljedeći: od vrha do dna, odnosno najdonja pozadina mora biti napisana na kraju. Umjesto pozadinske slike možete pisati i CSS3 gradijente.

Granica-radijus

Zaobljeni uglovi kod bloka. Jednostavno je ako vam je potreban 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 pretraživači.

Ali ako različiti uglovi moraju imati različite radijuse, onda morate navesti polumjere za svaki ugl.

Firefox ima posebnost da se uglovi nabrajaju upotrebom sintakse koja nije standardna. Ali rješenje može biti korištenje skraćene sintakse, koja je ista u svim pretraživačima.

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

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

Div (
border-top-left-radius: 5px 30px;
border-top-right-radius: 30px 60px;
border-bottom-left-radius: 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 kreiranja prefiksa je napisano.

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

• Ključne riječi i/ili jedinice su specificirane kao prvi argument CSS dimenzije određivanje konačnog oblika, veličine i početna lokacija gradijent. Opcioni argument.
• Lista od dvije ili više boja odvojena zarezima, od kojih svaka može biti praćena pozicijom zaustavljanja.

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

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

Kao i kod linearnih gradijenata, radijalni gradijent može uključivati ​​listu od više od dvije boje, a pozicija zaustavljanja se može specificirati za bilo koju boju.

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

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;) #jedan (pozadinska slika: radijalni gradijent (elipsa, cijan, indigo);) #dva (slika pozadine: radijalni gradijent (krug, cijan, indigo) );) Probaj "

Podrazumevano, pretraživač postavlja središnju tačku radijalnog gradijenta u centar elementa. Središte gradijenta se može postaviti pomoću ključne riječi 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. 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. Gornji lijevi ugao 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 je navedeno prije vrijednosti nijanse, ali nakon ključne riječi koja definira oblik gradijenta (ako je navedeno):

Div (širina: 400px; visina: 100px; margina: 10px;) #jedan (pozadinska slika: radijalni gradijent (desno, cijan, indigo);) #dva (pozadinska slika: radijalni gradijent (krug na 300px 50px , cijan, indigo, žuta);) #three (pozadinska slika: 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 (ne možete koristiti procente 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 centra i dvije strane elementa koji su mu najbliži (za elipsu).
Konačna veličina gradijenta ovisi o udaljenosti između centra gradijenta i ugla elementa koji mu je najbliži.
Konačna veličina gradijenta ovisi o udaljenosti između centra gradijenta i najudaljenije strane elementa (za krug) ili udaljenosti između centra 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 definiranja položaja.

Div (širina: 400px; visina: 100px; margina: 10px;) #jedan (pozadinska slika: radijalni gradijent (zaokruži najbliži ugao na 100px, cijan 50%, indigo);) #dva (pozadinska slika: radijalno- gradijent (zaokruži najbližu stranu, 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 odličan alat za manipulaciju bojama CSS3... Umjesto korištenja slike za stvaranje efekta gradijenta na web stranici, korisnije je koristiti CSS3 gradijent i tako "osvetliti" sajt. Budući da korisnik neće morati gubiti vrijeme i promet za preuzimanje pozadinska slika... Postoje dvije glavne vrste nagiba: 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šti 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%); background-image: -o-linearni-gradijent (vrh, # FF5A00 0%, # FFAE00 100%); }

Pa hajde da pričamo o svemu po redu.

Prije svega, linearni gradijent se deklarira pomoću funkcije 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 pozicija promijeniti iz donjeg lijevog ugla u gornji lijevi.

Druga vrijednost funkcije je početna boja i njegovu stopu poziciju, koja je naznačena u procentima. Proglašavajući ovu poziciju opcionom, pretraživač će po defaultu dodijeliti 0% prvoj boji.

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

Dobijamo trake iste visine. Sa jasnom granicom, neće biti prijelaza boja. Eksperimentirajte s vrijednostima da biste bolje razumjeli kako ovo funkcionira.

Radijalni gradijent, baš kao i linearni, deklarisan 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 krajnja boja. Sintaksa je sljedeća:

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

Ako ne navedete oblik, tada će se po defaultu postaviti elipsa.

Takođe, podrazumevano je postavljena središnja pozicija gradijenta, može se menjati. Položaj se može podesiti komandama (gore, dolje, lijevo, desno i centar), kao i njihovim kombinacijama, ili specificirati u procentima ili pikselima.

Kombinacije naredbi:

• Gornji centar - vrh - 50% 0%;
• Na lijevoj strani gornji ugao- lijevo gore - 0% 0%;
• U gornjem desnom uglu - desno gore - 100% 0%;
• Centar - centar - 50% 50%;
• Lijevi centar - lijevi centar - 0% 50%;
• Desni centar - desni centar - 100% 50%;
• Donji centar - dno - 50% 100%;
• U donjem lijevom uglu - lijevo dolje - 0% 100%;
• U donjem desnom uglu - desno dole - 100% 100%.

Evo primjera sa postocima:

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

Prva vrijednost duž ose X second to Imati.

Također možete odrediti veličinu radijalnog gradijenta. Veličina je navedena s razmakom nakon oblika gradijenta. Podrazumevano je najudaljeniji ugao(u dalji ugao). Proračun se vrši od središnje tačke nagiba do:

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

div ( background-image: radijalni gradijent (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ž ose X.

A sada na daleke strane:

div ( background-image: 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 pozicije. 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, narandžasta, žuta, zelena, plava, indigo, ljubičasta); }

Za oba prikaza može se koristiti ponavljanje boja. Odnosno, od ovih 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+ * /
background-image: -o-linearni-gradijent (vrh, # FF5A00 0%, # FFAE00 100%); / * za Opera * /
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 iza rešetke postotak zasićenosti boje.

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

Da budete u toku sa najnovijim člancima i lekcijama, pretplatite se na

Vrijednost -moz-radial-gradienta

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

Sintaksa

-moz-radial-gradient([ || ,]? [ || ,]? , [, ]*)

Korišćene vrijednosti

Ovo je pozicija ili referentna tačka za gradijent, koja predstavlja isto što i u svojstvima ili. Ako se izostavi, vrijednost se automatski dodjeljuje centar. Određuje ugao pod kojim se gradijent proteže. Podrazumevano je 0deg. Određuje oblik gradijenta. Može biti u obliku kruga ( krug) ili elipsa ( elipsa). Podrazumevano je elipsa. Određuje veličinu gradijenta: najbliža strana- Najbliža strana. Gradijent se širi od centra prema najbližoj strani elementa (za krug), ili na horizontalnu i okomitu stranu (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 širi od centra prema krajnjoj strani elementa (za krug), ili na obje, horizontalne i vertikalne, strane (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. Odgovoran za prikazivanje boja-stopi(mesta promene boje) u CSS gradijenti prema istim pravilima kao u SVG gradijenti. Može se navesti kao procenat ili mjera dužine, kao što su pikseli.

Napomene

Gradijent je kombinacija dvije 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 prilikom skaliranja, 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 specificiran sa -moz-radial-gradient, također se proteže duž ose. Može se zamisliti kao niz krugova duž ose, svaki sa referentnom tačkom (centrom) i dužinom radijusa. Radijalni gradijent izgleda ovako:

Pozadinska slika: -moz-radial-gradient (centar 45 stepeni, krug najbliža strana, narandžasta 0%, crvena 100%);

-moz-radial-gradient ne podržava ponavljajuće gradijente. Po defaultu, gradijent se proteže kako bi ispunio cijeli element na koji je primijenjen. Pogledajte ovaj članak da naučite kako stvoriti kružni gradijent koji se ponavlja.

Primjeri

Primjeri pokazuju kako opisati radijalne gradijente koristeći -moz-radial-gradient

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 ugao, 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 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 se to dogodilo, na vama je da procijenite.

“Gradijent je vrsta ispune u kompjuterskoj grafici, u kojoj je potrebno podesiti boju i transparentnost pojedinih (ključnih) tačaka, a boja i transparentnost ostalih tačaka se računaju 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 - divan članak Natalije Mitrofanove - Kako koristiti CSS. All newbies 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. Razmotrimo svaku vrstu detaljnije kako bismo razumjeli specifičnosti njihove upotrebe.

Linearni gradijent CSS3

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

Div (/ * - prefiks-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 ovog trenutka, uniformni standard ne, budući da su gradijenti i dalje eksperimentalna karakteristika, uprkos svim podrškama pretraživača.

Hajdemo dalje i razmotrimo više složen primjer- promijeniti 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, kada se piše smjer, moraju se koristiti dva značenja. Prvo je "gde", drugo je "gde". Ali postoji mala suptilnost - ako je navedena samo jedna lokacija - druga će biti zadana centar... Uzmite u obzir ovo u svojim projektima.

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

Div (pozadina: linearni gradijent (vrh 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 uglovi čija se vrijednost može specificirati 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. 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 stepeni, #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 zanimljiv trenutak kada radite sa gradijentima -

Dodajte stop boju

Do sada smo koristili samo jednostavne dvobojne gradijente. Sada za škakljiviji primjer, dodajte drugu boju gradijentu. Kao to:

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- u crno. Jasniji rad Pokazat ć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 (dno, # 000, # FFF 20px, # 000);) ex4 (pozadina: linearni gradijent (45 stepeni, # 000, # FFF, # 000, # FFF, # 000);)

Rezultat na slici:

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

Drugi primjer je isti, samo što je naznačeno gdje će biti stop boja. 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 drugim jedinicama koje CSS razumije, ali se uglavnom koriste procenti i pikseli)

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

Radijalni gradijent CSS3

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 oblik i veličina. Postoje dva tipa oblika - 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 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 (pozicija). Teško je imenovati veličinu vrijednosti selektora, prije je to lokacija. Ali u zvaničnoj dokumentaciji ovaj selektor je označen kao veličina, stoga ćemo to 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. Opisaću svaki da bude jasnije:

• najbliža strana- Najbliža strana. Gradijent se širi od centra prema najbližoj strani elementa (za krug), ili na horizontalnu i okomitu stranu (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 širi od centra prema krajnjoj strani elementa (za krug), ili na obje, horizontalne i vertikalne, strane (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 radi jasnoće:

Primjer 1 (pozadina: radijalni gradijent (krug na najdaljoj strani, # 000, #FFF);) ex2 (pozadina: radijalni gradijent (lijevo, krug krajnja strana, # 000, # FFF);) ex3 (pozadina: radijalni- 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 drugu stranu (koristi se najdalje)

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

Treći - centar gore desno, gradijent do krajnjeg ugla.

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

Dodajte stop boju

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

Ex1 (pozadina: radijalni gradijent (zaokruži najdalju stranu, # 000, # FFF, # 000);) ex2 (pozadina: radijalni gradijent (zaokruži najdalju stranu, # 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.

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