UlazLinearni CSS gradijent. Linear-gradient(): linearni gradijent u pozadini Postavite gradijent boje pozadine html
Gradijent boja je glatki prijelaz iz jedne date boje u drugu kroz međuboje. U linearnom gradijentu, prijelaz se odvija u pravoj liniji, od tačke A do tačke B. Gradijent može imati više od dvije referentne tačke - tada se prelazi iz tačke A do tačke B, zatim iz tačke B do tačke C i tako dalje.
Kako napraviti pozadinski linearni gradijent u CSS-u
U CSS3, možete dodati gradijent pozadinu elementima preko već poznatog svojstva background-image. Vrijednost je ključna riječ linear-gradient(), gdje u zagradama trebate navesti početnu tačku gradijenta, početnu boju i završnu boju.
Na primjer, napravimo linearni gradijent pozadine koji ide od ljubičaste do crvene. U ovom slučaju želimo da početna tačka sa ljubičastom bojom bude na desnoj strani, a vektor gradijenta da ide lijevo. Napišimo kod:
Pozadinska slika: linearni gradijent (lijevo, ljubičasta, crvena); Gradijent pozadine na bloku
Boje gradijenta mogu se napisati u bilo kojem formatu dostupnom u CSS-u, bilo da je heksadecimalni, RGB ili drugi. Smjer gradijenta je specificiran korištenjem prefiksa do, a zatim ključnih riječi lijevo, desno, gore i dolje, koje se mogu kombinirati za promjenu nagiba. Na primjer:
Pozadinska slika: linearni gradijent (dole desno, #ee82ee, #ff0000); 
Osim toga, možete direktno naznačiti ugao nagiba koristeći pozitivan ili negativan broj s prefiksom deg (bez razmaka). Pod datim uglom od 0º ili 360º, linija gradijenta će ići odozdo prema gore. Kako se kut nagiba povećava, vektor se pomiče u smjeru kazaljke na satu (upotreba negativne vrijednosti obrće kretanje). Primjer unosa koda:
Pozadinska slika: linearni gradijent(-110deg, #ee82ee, #ff0000); 
Više sidrišta
Kao što smo već rekli, gradijent može imati više od dvije tačke sidrenja. U ovom slučaju, pozadina će glatko prelaziti iz prve boje u drugu, iz druge u treću, iz treće u četvrtu, i tako sve dok ne dođe do konačne referentne točke. Ako želite povećati broj ovih tačaka u gradijentu, samo ih dodajte razdvojene zarezima. Na primjer:
Pozadinska slika: linearni gradijent (145deg, #ee82ee, slateblue, #ffd86a, ljubičasta); 
U našem primjeru su naznačene četiri referentne točke boja, ali možete ih dodati koliko god želite iu svim dostupnim formatima boja.
Dužina tranzicije
Podrazumevano, pretraživač postavlja tačke na jednakim rastojanjima, tako da je gradacija ujednačena. Ali ova udaljenost se može kontrolirati pomoću CSS jedinica. Pogledajmo sljedeći primjer:
Pozadinska slika: linearni gradijent (#92009b 20%, #f5e944 90%, #00ffa2); 
U našem kodu, iza boje #92009b je naznačena vrijednost 20%. Pošto se nalazi blizu prve tačke sidrenja, to znači da će 20% dužine elementa biti obojeno navedenom bojom. Nakon čega počinje gradijent: vrijednost od 90% govori pretraživaču da dostigne boju #f5e944 za 90% dužine elementa (počevši od 20%). Nakon čega počinje prijelaz na treću boju u preostalom prostoru - #00ffa2.
Ova tema također zahtijeva praksu. Pokušajte kreirati pozadinu gradijenta s više tačaka sidrišta (više od dvije), poigrajte se vrijednostima udaljenosti i gledajte kako se gradijent mijenja u pretraživaču.
Prefiksi dobavljača
Da bi se osigurala kompatibilnost među pretraživačima, neka kasnija svojstva CSS-a moraju biti dodana prefiksima dobavljača - posebnim prefiksima koje dodaju programeri pretraživača:
- -webkit- - prefiks za Chrome, Safari, Android;
- -moz- je prefiks za Firefox;
- -o- je prefiks za Opera.
Gradijentne pozadine takođe zahtevaju upotrebu ovih prefiksa ako postoji potreba za podrškom maksimalnog broja pretraživača. Da biste to učinili, prilagodite kod na sljedeći način:
Pozadinska slika: -webkit-linear-gradient(lijevo, ljubičasto, crveno); background-image: -moz-linear-gradient (lijevo, ljubičasto, crveno); background-image: -o-linearni-gradijent (lijevo, ljubičasto, crveno); pozadinska slika: linearni gradijent (lijevo, ljubičasta, crvena);
Dodavanje prefiksa zahtijeva kreiranje zasebnog oglasa. Također, kao što ste možda primijetili, svojstva s prefiksima dobavljača Ne zahtijevaju upotrebu prefiksa do kada se ukazuje na smjer gradijenta.
Podrška za Internet Explorer
Nažalost, gradijentna pozadina radi samo u IE10+. Prethodne verzije to ne razumiju i ignorisaće ga. Da biste omogućili barem normalnu pozadinu u starijim pretraživačima, možete kreirati tzv. "stub": odaberite odgovarajuću nijansu i napišite svojstvo boje pozadine gore svojstvo sa gradijentom. Prema tome, stariji pretraživač će primeniti "rezervnu" boju pozadine i preskočiti svojstva koja ne poznaje, dok će moderniji pretraživač prekriti gradijent pozadinu i prekriti čvrstu pozadinu.
Ako imate skup poluprozirnog gradijenta (na primjer, koristeći RGBA format boja) i ne želite da se pozadinski čuvar mjesta prikazuje, postavite gradijent koristeći svojstvo skraćenice pozadine umjesto background-image. Tada će vrijednost boje pozadine biti prepisana u transparentno.
Dalje u tutorijalu: repeating-linear-gradient() - ponavljajući linearni gradijent.
Podrška za popunjavanje gradijentom pomoću CSS-a uvedena je prije otprilike dvije godine u pretraživače zasnovane na Webkit motoru (Google Chrome i Safari), ali drugi nisu podržavali ovo svojstvo u to vrijeme, pa su gradijenti napravljeni pomoću slika. Sada je ovaj previd ispravljen, Firefox 3.6+ u potpunosti podržava gradijentno popunjavanje objekata, možete pokušati napustiti slike gdje je to moguće.
U prošlom članku nije bilo ni riječi o gradijentnom punjenju - danas ćemo ispraviti ovaj nedostatak i razgovarati o njemu. Štaviše, tema je jako dobra.
Generalno, svi moderni pretraživači, uključujući IE9, podržavaju senčenje. Koriste se prefiksi dobavljača jer specifikacija još uvijek nije službeno usvojena. Ovdje možete pročitati kompletan vodič za gradijente u CSS3 css3 gradijenti temeljno demontiran.
U ovom članku ćemo malo govoriti o preglednicima i karakteristikama gradijenata u njima:
Gradijent u webkit pretraživačima
Sintaksa svojstva je prilično jednostavna - prva vrijednost je tip popunjavanja, druga i treća su početna i krajnja pozicija, respektivno, četvrta i peta su početna i krajnja boja.
Firefox 3.6+
Korištenje gradijenata u Firefoxu
Ovdje se koristi malo drugačija sintaksa, tip ispune je naznačen u nazivu svojstva, postoji samo pozicija početka gradijenta i, shodno tome, boja početka i kraja ispune.
Internet Explorer
Ovaj pretraživač je dugo i zasluženo uživao u “ljubavi” dizajnera izgleda zbog svog izuzetno originalnog ponašanja. Dakle, u ovom slučaju se koristi filter čiji će tekst čitati samo IE pretraživač. Ovdje nisu podržane kutne i radijalne ispune, samo horizontalne ili vertikalne, koristeći dvije vrijednosti - startColorstr I endColorstr. Ovo se mora uzeti u obzir pri radu, inače će rezultat u IE-u izgledati vrlo tužno, a postotak ovog pretraživača je i dalje prilično velik.
Šta je potrebno da bi se osigurala kompatibilnost ovog svojstva za objekt na više pretraživača? Dodajte četiri reda koda njegovim svojstvima:
Pozadina: #999; /* za pretraživače bez css3 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); /* za IE */ pozadina: -webkit-gradient(linearno, lijevo gore, lijevo dolje, od(#ccc), do(#000)); /* za webkit */ background: -moz-linear-gradient(top, #ccc, #000); /* za firefox 3.6+ */
Gornja linija je dodana posebno za vlasnike pretraživača, ne podržavaju ovu imovinu, kako bi se izbjegli nesporazumi sa displejom, u takvim slučajevima blok će biti ispunjen jednom bojom. Mala napomena - ako je neki tekst postavljen u blok, morate razmisliti o njegovoj boji, u kombinaciji s ispunom gradijenta i ispunom u jednoj boji, kako biste osigurali normalnu čitljivost. Ne zaboravi na ovo.
Kao rezultat toga, u svim uobičajenim preglednicima slika bi trebala biti ispravna i izgledati otprilike ovako:
I još nešto - zapamtite da ne mogu svi pretraživači ispravno raditi s ovim svojstvom, njihov postotak je premali u odnosu na opću pozadinu, to treba uzeti u obzir pri razvoju i ne zanositi se previše. U svakom slučaju, pažljivo otklanjanje grešaka će uvijek pomoći.
Ranije sam stranice svoje web stranice ukrašavao osnovnom pozadinom koja je imala određeni kontrast s pozadinom stranice. Sada sam želio da stranice moje stranice učinim dinamičnijim. Ovo vam omogućava da kreirate gradijent temeljne pozadine. Ali kako to učiniti?
Nažalost, od dostupnih preporuka, neke nisu radile, neke su radile samo u određenim pretraživačima, a druge su bile glomazne.
Ispod je detaljan opis. Mislim da, ako je potrebno, možete ovo ponoviti i ukrasiti svoju stranicu.
Ujednačena pozadina se može lako postaviti pomoću atributa oznake "body", kako u njoj tako iu stilu.
Kada se koristi za formatiranje stranica - tabela, potonje će se nalaziti iznad pozadine. A unutar njih, slika može biti drugačija, jer se može definirati u svojstvima tabele (oznaka tabele i njen prateći tbody, td, th, itd.). Ova tehnika proširuje mogućnosti dizajna prilikom kreiranja stranica.
Ali još je ljepše kada pozadina ima gradijent.
Zatim, kada se krećete po dugim stranicama formiranim pomoću tablica koje su nešto manje od ekrana, okvir oko njih će promijeniti boju dok se krećete. Stvara se efekat dinamike stranice.
Staro i jednostavno rešenje
Ali čini se da smo zaboravili jednostavno rješenje ugrađeno u sve moderne pretraživače.
Postoji dobro poznata oznaka -
On vrši logičku podelu dokumenta, stvarajući fragmente unutar njega.
Prema HTML 3.2 standardu, namijenjen je za "specificiranje dijela stranice ili dijela teksta." Sve što se nalazi između otvaranja i zatvaranja ove oznake pretraživač percipira kao jedan objekat. Tag
Glavna karakteristika oznake
Ali sada na stvar.
Evo isječka koda:
Analiza ovog fragmenta:
Nakon oznake "body" dolazi prva oznaka "div" - početna, koja opisuje osnovni sloj i sadrži svojstvo dotične oznake "style" sa atributima:
Pozicija:apsolutna; - apsolutno pozicioniranje u prozoru sa koordinatama:
- top:0; lijevo:0; širina:100%; visina:100%;- gornja i lijeva margina =0, veličina polja 100% širine i visine (ovdje su moguće opcije),
Visibility:visible - daje naredbu da se data div oznaka učini vidljivom,
Z-indeks:-1 - određuje poziciju div taga u takozvanom 2,5-dimenzionalnom prostoru stranice, kao donjem.
Treba obratiti pažnju na z-index atribut koji, u ovom slučaju, određuje poziciju sekcije stranice opisane ovom oznakom na sloju -1 (ovdje može biti bilo koja vrijednost manja od vrijednosti sljedećih slojeva). Samo što je za mene osnovni sloj povezan s negativnom dimenzijom, i to je jasnije.
Slijedi link do pozadinske slike s gradijentom, širine 2 piksela i visine 500 (moj u ovom slučaju, iako može biti manji) 
rastegnut do visine vaše stranice.
Sljedeća oznaka "div" je dat kao primjer organiziranja zaglavlja stranice pomoću ove oznake. Ima dimenzije širine stranice, 200 px visine i obojen je u navedenoj boji.
Zdravo svima! Danas želim da pričam malo o gradijentima, popularnim sajtovima koji korisnicima daju mogućnost da ih izaberu i/ili generišu, kao i o nekoliko gradijenata koje volim i koristim u raznim projektima. Možda će se i njima dopasti nekima od vas.
Danas malo ljudi ne zna šta su gradijenti i kako ih koristiti u razvoju. Ako vjerujete člancima, onda je u 2018. upotreba svijetlih i bogatih gradijenta svojevrsni trend.
Šta je gradijent?
Hajde, samo za pokazivanje, prisjetimo se šta je gradijent.
Gradijent (od latinskog gradiens, gender gradientis - hodanje, rast) je vektor čiji smjer označava smjer najvećeg povećanja određene vrijednosti (\displaystyle \varphi) \varphi, čija se vrijednost mijenja od jedne tačke u prostoru do druge (skalarno polje), i po veličini (modulu) jednakoj brzini rasta ove vrijednosti u ovom smjeru
Gradijent se koristi u raznim oblastima, ali nas zanima područje web razvoja, gdje se gradijenti često koriste kao glavna pozadina stranica i raznih kontejnera, linija, citata, blokova, pa čak i teksta.
Obrazac za pisanje gradijenata u css
Pogledajmo na brzinu od čega se sastoji klasični gradijent.
Gradijent se može napisati na dva načina:
pozadina: linearni gradijent (36deg, #0dd3ff, #0389ff, #1c79c0);
background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
Na vama je da odlučite koji oblik snimanja ćete koristiti.
U kodu iznad smo naveli tri značenja svojstva pozadini:
- 1. Koliki će biti gradijent - linearni gradijent- u ovom slučaju je linearna. U budućnosti u članku ćemo pričati o tome.
- 2. Označite nagib linije gradijenta, koja pokazuje smjer gradijenta. Smjer možete označiti na dva načina: [<угол>| to<позиция>] , gdje se mjeri ugao deg, odnosno stepen, ili na drugi način - navođenjem pozicije od i do. Na primjer, na vrh, na desno, dole lijevo itd.
- Značenje boje #****** , koji će započeti i završiti gradijent.
Sve vrijednosti su odvojene zarezima, a broj boja može biti apsolutno bilo koji, od dvije do beskonačno. Ali, naravno, u okviru razumnog.
Pisanje gradijenata boja
Boja gradijenta može se napisati koristeći bilo koju dostupnu notaciju:
- Hex kod boja - #000000 ili skraćeno #000;
- RGB kod boja - rgb(0, 0, 0);
- Naziv boje - crna;
- HSL kod boja - hsl(0, 0%, 0%);
Također možete odrediti boje kao postotak dodavanjem nakon boje % . Na primjer, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.
To je svo osnovno znanje potrebno za korištenje gradijenata u web razvoju. Ali vjerojatno ne znaju svi da se gradijenti mogu koristiti u drugim slučajevima. U nastavku je o njima.
Gradijent sa slikama
Da biste snimili kombinovani gradijent sa slikom kao pozadinom, možete koristiti druga svojstva pozadine. Pogledajmo dva primjera:
U prvom primjeru kreirali smo gradijent pozadinu (primjer 1), au drugom smo dodali sliku i na nju primijenili naš gradijent (primjer 2).
Gradijent za tekst
- -webkit-text-fill-color u kombinaciji sa -webkit-background-clip
Slične radnje se mogu izvesti zamjenom gradijenta vezom sa slikom.
Glavna stvar koju treba zapamtiti je da neka svojstva nisu podržana u svim verzijama pretraživača. Kompatibilnost možete provjeriti na web stranici Mogu li koristiti
Kombinacija CSS gradijenata u načinu miješanja u pozadini
Nedavno su predstavljena još tri nova CSS svojstva koja imaju prilično dobru podršku u modernim pretraživačima. Ova svojstva uključuju:- background-blend-mode, za miješanje pozadinskih slika, gradijenata i boja pozadine
- mix-blend-mode, za spajanje elemenata preko drugih elemenata i na kraju
- izolacija, manje korišteno svojstvo, koristi se u načinu miješanja i miješanja za miješanje elemenata.
Karakteristike poput linearni gradijent(), radijalni gradijent(), And ponavljajući-linearni-gradijent(), ponavljajući-radijalni-gradijent() i druge vrste imaju široku podršku i standardiziraniju sintaksu u svim modernim pretraživačima. Međutim, svojstvo pozadine također može uključivati više od jednog gradijenta, sa svakim obilježjem odvojenim zarezom. Lea Verou demonstrirao impresivne modele - uzorke koji se mogu kreirati ovom tehnikom: od šahovskih ploča, preko cigli, do zvijezda. Ali sada kada imamo svojstvo background-blend-mode, možemo kreirati nove gradijente i uzorke. Primjeri ispod.
Spektralna pozadina
Primijenimo tri gradijenta da kreiramo pozadinu s gotovo punim spektrom boja koje se mogu prikazati na monitoru..spectrum-background(
pozadina:
linearni gradijent (crveni, transparentni),
linearni gradijent (gore lijevo, kreč, transparentan),
linearni gradijent (gore desno, plavo, transparentno);
background-blend-mode: ekran;
}
A sada imamo pozadinu u više boja. Stvaranje sličnog efekta ranije je bilo moguće samo sa slikom čija bi težina bila desetine kilobajta. Ali upravo smo reproducirali ovaj efekat preko CSS-a u manje od 200 bajtova, a da ne spominjemo spremanje HTTP zahtjeva.
Kreiranje pokrivača koristeći css
Također možemo kreirati zanimljive uzorke s gradijentima koristeći background-blend-mode..plaid-background(
pozadina:
ponavljajući-linearni-gradijent(
-45 stepeni,
transparentan 0,
transparentan 25%
dodgeblue 0,
dodgeblue 50%
),
ponavljajući-linearni-gradijent(
45 stepeni,
transparentan 0,
transparentan 25%
paradajz 0,
paradajz 50%
),
ponavljajući-linearni-gradijent(
transparentan 0,
transparentan 25%
zlato 0,
zlato 50%
), bijela;
}
Na kraju, evo šta smo dobili: 
Pozadina web stranice s krugovima
Šta kažete na još jedan, ovaj put sa radijalnim gradijentom:.circles-background(
pozadina:
radijalni gradijent(
kaki 40px,
transparentan 0,
transparentan 100%
),
radijalni gradijent(
nebeskoplava 40px,
transparentan 0,
transparentan 100%
),
radijalni gradijent(
roze 40px,
transparentan 0,
transparentan 100%
), snijeg;
background-blend-mode: multiply;
veličina pozadine: 100px 100px;
background-position: 0 0, 33px 33px, -33px -33px;
}
Rezultat nadmašuje sva očekivanja, 
Efekat noćnog vida
Hajde sada da pokušamo da ponovo stvorimo još jedan efekat sa CSS režimima mešanja i učinimo da fotografija izgleda kao da je gledamo kroz sočivo naočara za noćno gledanje.Uzmimo redovnu sliku 
i primijeniti radijalni gradijent i gradijent koji smo koristili da kreiramo plaid na njemu - ponavljajući-linearni-gradijent
.night-vision-effect (
pozadina:
url(https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radijalni gradijent(
rgba(0,255,0,.8),
crna
),
ponavljajući-linearni-gradijent(
transparentan 0,
rgba(0,0,0,.2) 3px,
transparentan 6px
);
background-blend-mode: preklapanje;
veličina pozadine: korice;
}
CSS gradijent predstavlja prelaze iz jedne boje u drugu.
Gradijent se kreira pomoću funkcija linear-gradient() i radial-gradient().
Pozadina gradijenta može se postaviti u svojstvima pozadine, pozadinske slike, slike ivice i stila liste.
Kako napraviti gradijent u CSS-u
Podrška za pretraživač
IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android pretraživač: 4.4, 4.1 -webkit-
Chrome za Android: 44
1. Linearni gradijent linear-gradient()
Rice. 1. Linija gradijenta, početna i krajnja tačka i ugao gradijenta Linearni gradijent kreirano korištenjem dvije ili više boja koje imaju naveden smjer, ili gradijent linija.
Ako smjer nije naveden, koristi se zadana vrijednost - odozgo prema dolje.
Prema zadanim postavkama, boje gradijenta su raspoređene ravnomjerno u smjeru okomitom na liniju gradijenta.
Pozadina: linearni gradijent (ugao/strana ili nagnut prema ključnoj riječi (par ključnih riječi), prva boja, druga boja, itd.);
Smjer gradijent se može specificirati na dva načina:
koristeći ugao nagiba u stepenima stepena, čija vrijednost određuje ugao nagiba linije unutar elementa.
Div (visina: 200px; pozadina: linearni gradijent(45deg, #EECFBA, #C5DDE8); )
koristeći ključne riječi na vrh , na desno , na dno , nalijevo koji odgovaraju uglom nagiba od 0 stepeni , 90 stepeni , 180 stepeni i 270 stepeni respektivno.
Div (visina: 200px; pozadina: linearni gradijent (desno, #F6EFD2, #CEAD78); )
Ako je smjer određen parom ključnih riječi, na primjer, gore lijevo, tada će se početna točka gradijenta nalaziti u suprotnom smjeru, u ovom slučaju dolje desno.
Div (visina: 200px; pozadina: linearni gradijent (gore lijevo, puderastoplava, ružičasta); )
Za neravnomjernu distribuciju boja, početna pozicija svake boje je naznačena kroz tačke zaustavljanja gradijenta, tzv. boja se zaustavlja. Prelomne tačke su specificirani u %, gdje je 0% početna tačka, 100% je krajnja tačka, na primjer:
Div (visina: 200px; pozadina: linearni gradijent (do vrha, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); )
Za jasnu raspodjelu pruga u boji, svaka sljedeća boja mora početi od točke zaustavljanja prethodne boje:
Div (visina: 200px; pozadina: linearni gradijent (nadesno, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); )
2. Radijalni gradijent radial-gradient()
Radijalni gradijent razlikuje se od linearnog po tome što boje dolaze iz jedne tačke (centra gradijenta) i ravnomjerno su raspoređene prema van, crtajući oblik kruga ili elipse.
Pozadina: radijalni gradijent (oblik/veličina/položaj centra, prva boja, druga boja, itd.);
Gradijentni oblik definisano ključnim riječima krug ili elipsa . Ako oblik nije naveden, radijalni gradijent je zadano u obliku elipse.
Div (visina: 200px; pozadina: radijalni gradijent (bijela, #FFA9A1); )
Centralna pozicija specificirano pomoću ključnih riječi korištenih u svojstvu background-position, nakon čega slijedi at prefiks. Ako središnji položaj nije specificiran, koristi se zadana vrijednost u centru.
Div (visina: 200px; pozadina: radijalni gradijent(na vrhu, #FEFFFF, #A7CECC); )
Par vrijednosti, specificiranih u %, em ili px jedinicama dužine, može kontrolirati veličinu eliptičnog gradijenta. Prva vrijednost određuje širinu elipse, druga - visinu.
Div (visina: 200px; pozadina: radijalni gradijent (40% 50%, #FAECD5, #CAE4D8); )
Veličina gradijenta specificirano pomoću ključnih riječi. Zadana vrijednost je najudaljeniji ugao.
div (visina: 200px; pozadina: radijalni gradijent(krug najdaljeg ugla na 100px 50px, #FBF2EB, #352A3B); )Koristeći radijalni gradijent, možete kreirati realistične trodimenzionalne oblike, kao što su lopte i dugmad.
Lopta
div ( širina: 200px; visina: 200px; radijus granice: 50%; margina: 0 auto; pozadina: radijalni gradijent (krug na 65% 15%, akva, tamnoplava); )Dugme
Poštanska marka
Koristeći prozirnu boju u gradijentima, možete kreirati ovakve efekte.
Jpg">
3. Gradijentno ponavljanje
Pored linearnog i radijalnog gradijenta, postoji ponavljanje gradijenta, koje se specificira pomoću funkcija repeating-linear-gradient() i repeating-radial-gradient(). Pozadina sa ponavljajućim gradijentima izgleda neuredno, pa se preporučuje da sljedeću boju započnete tamo gdje je prethodna stala, stvarajući tako prugaste šare.
Div (visina: 200px; pozadina: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); ) div (visina: 200px; pozadina: repeating-radial-gradient(circle,circle, B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px); )
4. Gradijent unakrsnog pretraživača
Da biste pravilno prikazali gradijente u svim pretraživačima, morate dodati unos za više pretraživača.
Linearni gradijent
Ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(levo, crveno, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(lijevo, crveno, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(levo, crveno, #f06d06); /* Opera 11.1-12 */ pozadina: linearni gradijent (na desno, crveno, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
Ponovite linearni gradijent
Pozadina: -webkit-repeating-linear-gradient(crvena, žuta 10%, zelena 20%); /* Safari 5.1 - 6.0 */ pozadina: -o-repeating-linear-gradient(crveno, žuto 10%, zeleno 20%); /* Opera 11.1-12.0 */ pozadina: -moz-repeating-linear-gradient(crveno, žuto 10%, zeleno 20%); /* Firefox 3.6-15 */ pozadina: ponavljajući-linearni-gradijent(crveno, žuto 10%, zeleno 20%); /* Standardna sintaksa */
Radijalni gradijent
Pozadina: -webkit-radial-gradient(crvena, žuta, zelena); /* Safari 5.1-6.0 */ background: -o-radial-gradient(crvena, žuta, zelena); /* Opera 11.6-12.0 */ pozadina: -moz-radial-gradient(crvena, žuta, zelena); /* Firefox 3.6-15 */ pozadina: radijalni gradijent (crvena, žuta, zelena); /* Standardna sintaksa */ pozadina: -webkit-radial-gradient(60% 55%, najdalje, crvena, žuta, crna); /* Safari 5.1-6.0 */ pozadina: -o-radial-gradient(60% 55%, najdalja strana, crvena, žuta, crna); /* Opera 11.6-12.0 */ pozadina: -moz-radial-gradient(60% 55%, najdalje, crvena, žuta, crna); /* Firefox 3.6-15 */ pozadina: radijalni gradijent (najdalje na 60% 55%, crvena, žuta, crna); /* Standardna sintaksa */
Ponavljanje radijalnog gradijenta
Pozadina: -webkit-repeating-radial-gradient(crvena, žuta 10%, zelena 15%); /* Safari 5.1-6.0 */ pozadina: -o-repeating-radial-gradient(crveno, žuto 10%, zeleno 15%); /* Opera 11.6-12.0 */ pozadina: -moz-repeating-radial-gradient(crvena, žuta 10%, zelena 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(crvena, žuta 10%, zelena 15%); /* Standardna sintaksa */
5. Kombinacija gradijenta i pozadinske slike
Kombinacijom gradijenta i slike možete stvoriti zanimljive efekte. Za gradijent morate koristiti prozirne boje kako bi slika ostala vidljiva.
div (visina: 453px; pozadina: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, ..jpg); background-size: cover; )