.container ( pozadina: #B7D1D8; padding: 25px; ) .wrap ( pozadina: radijalni gradijent (prozirno, transparentno 4px, bijelo 4px, bijelo); padding: 10px; širina: 300px; visina: 220px; veličina pozadine: 20px 20px; background-position: -10px -10px; /*izreži uzorak*/ margina: 0 auto;

3. Ponavljanje gradijenta

Osim linearnih i radijalnih gradijenata, postoji ponavljanje gradijenata, koje je specificirano pomoću funkcija repeating-linear-gradient() i repeating-radial-gradient(). Pozadina ponavljajućih gradijenata izgleda neuredno, pa se preporučuje da sljedeću boju započnete tamo gdje je prethodna stala, stvarajući tako prugaste uzorke.

Div (visina: 200px; pozadina: ponavljajući-linearni-gradijent(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); ) div (visina: 200px; pozadina: ponavljajući-radijalni-gradijent(krug, # B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px )

4. Gradijent između preglednika

Da biste pravilno prikazali gradijente u svim preglednicima, morate dodati unos za više preglednika.

Linearni gradijent

Ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ pozadina: -webkit-linear-gradient(lijevo, crveno, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ pozadina: -moz-linear-gradient(lijevo, crveno, #f06d06); /* Firefox 3.6-15 */ pozadina: -o-linear-gradient(lijevo, crveno, #f06d06); /* Opera 11.1-12 */ pozadina: linearni gradijent (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(crvena, žuta 10%, zelena 20%); /* Opera 11.1-12.0 */ pozadina: -moz-repeating-linear-gradient(crvena, žuta 10%, zelena 20%); /* Firefox 3.6-15 */ pozadina: ponavljajući linearni gradijent (crvena, žuta 10%, zelena 20%); /* Standardna sintaksa */

Radijalni gradijent

Pozadina: -webkit-radial-gradient(crvena, žuta, zelena); /* Safari 5.1-6.0 */ pozadina: -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%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ pozadina: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ pozadina: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ pozadina: radijalni gradijent (najudaljenija strana 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(crvena, žuta 10%, zelena 15%); /* Opera 11.6-12.0 */ pozadina: -moz-repeating-radial-gradient(crvena, žuta 10%, zelena 15%); /* Firefox 3.6-15 */ pozadina: ponavljajući radijalni gradijent (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: 453 px; pozadina: linearni gradijent (45 stupnjeva, rgba (103, 0, 31, .8), rgba (34, 101, 163, ..jpg); veličina pozadine: naslovnica; ) CSS funkcije

Definicija i primjena

CSS funkcija radial-gradient() postavljena je duž svog polumjera, protežući se prema van od središta elementa u kružnom ili eliptičnom obliku, s bojama gradijenta ravnomjerno raspoređenim po prostoru elementa.

Načelo stvaranja radijalnih gradijenata slično je stvaranju linearnih gradijenata (linear-gradient()), za ovo samo trebate odrediti početnu boju - ona će se nalaziti u sredini gradijenta i završnu boju, koja će se nalaziti na kraju gradijenta.

Više o radu s gradijentima možete saznati u člancima "" i "". Imajte na umu da članci ističu nijanse rada sa starim preglednicima i daju brojne primjere.

Podrška za preglednik

Funkcija			Opera		IExplorer	Rub
radijalni gradijent()	26.0 10.0 -webkit-	16.0 3.6 -moz-	12.1 11.1 -o-	6.1 5.1 -webkit-	10.0	12.0

CSS sintaksa:

pozadinska slika / pozadina : radijalni gradijent ([oblik ključne riječi (ili veličina)] na položaju x-osi y-osi, boja 1 – stop 1, . . . , boja n – zaustavljanje n);

Oblik

Eliptični oblik je definiran vrijednošću elipse, koja je zadana (nema potrebe za navođenjem), a kružni oblik definiran je vrijednošću kruga.

Ključna riječ

Gradijent se izračunava na temelju udaljenosti do bliža/daleka strana, ili najbliži / najudaljeniji kut element.

Značenje	Opis
najbliža strana	Gradijent se izračunava na temelju udaljenosti do najbliže strane elementa od njegovog središta za okrugle gradijente ( x os ili y os) i najbližim strankama ( x os I y os) ako je gradijent u obliku elipse. pozadinska slika: radijalni gradijent (krug najbliže strane na 60% 60%, boja šljive, crna, narančasta); pozadinska slika: radijalni gradijent (najbliža strana elipse na 60% 60%, boja šljive, crna, narančasta);
najbliži kut	Gradijent se rasteže tako da prolazi kroz kut elementa koji je najbliži središtu (veličina se izračunava na temelju udaljenosti do najbližeg kuta elementa). pozadinska slika: radijalni gradijent (krug najbliži kut na 60% 50%, boja šljive, crna, narančasta); pozadinska slika: radijalni gradijent (najbliži kut elipse na 60% 50%, boja šljive, crna, narančasta);
najudaljenija strana	Gradijent se izračunava na temelju udaljenosti udaljene strane elementa od njegovog središta za okrugle gradijente ( x os ili y os) i najbližim strankama ( x os I y os) ako je gradijent u obliku elipse. pozadinska slika: radijalni gradijent (krug najudaljenije strane na 100% 50%, boja šljive, crna, narančasta); pozadinska slika: radijalni gradijent (najudaljenija strana elipse na 100% 50%, boja šljive, crna, narančasta);
najdalji-kutak	Gradijent se rasteže tako da prolazi kroz kutove elementa koji su najudaljeniji od središta (veličina se izračunava ovisno o udaljenosti do udaljenog kuta elementa). Ovo je zadana vrijednost. pozadinska slika: radijalni gradijent (najudaljeniji kut kruga na 60% 60%, boja šljive, crna, narančasta); pozadinska slika: radijalni gradijent (najudaljeniji kut elipse na 60% 60%, boja šljive, crna, narančasta);

Veličina

Postavlja veličinu oblika gradijenta. Nema potrebe za navođenjem vrijednosti kruga ili elipse, zabranjeno koristiti ključne riječi ako je navedena veličina. Ako navedete jedna vrijednost, tada će ga preglednik smatrati kao . Ako navedete dva značenja, To prva vrijednost preglednik će smatrati kao horizontalni radijus, A drugo značenje Kako vertikalni radijus za eliptični element .

Skrećem vam pozornost na činjenicu da Ne smijete koristiti postotne vrijednosti ako navedete samo jednu vrijednost(radijus za okrugli element), kada se koristi dva značenja(za eliptični gradijent) Dopušteno je navesti ove vrijednosti kao postotke.

Položaj

Početna pozicija radijalnog gradijenta određena je ključnom riječi -center, ali se može promijeniti pomoću jedinice duljine(Na primjer: px ili em), postotne vrijednosti I ključne riječi, koji se koriste u CSS svojstvo background-position , odgovoran je za položaj (poziciju) pozadinske slike.

Značenje	Opis
lijevo gore lijevi centar lijevo dolje desno gore desni centar desno dolje središnji vrh centar centar središnje dno	Postavlja položaj slike. Prva vrijednost je vodoravni položaj, a druga vrijednost je okomiti položaj. Ako navedete samo jednu ključnu riječ, druga vrijednost će biti "centar"
x%y%	0% 0% (ovo je zadana vrijednost). U donjem desnom kutu 100% 100%. Ako je navedena samo jedna vrijednost, bit će navedena i druga vrijednost 50%.
x y	Postavlja položaj slike. Prva vrijednost je vodoravni položaj, a druga vrijednost je okomiti položaj. Gornji lijevi kut ima 0 0. Vrijednosti mogu biti u pikselima ili drugim CSS jedinicama. Ako je navedena samo jedna vrijednost, bit će navedena i druga vrijednost 50%. Možete dijeliti interes I jedinice.

Boja

Dopušteno je koristiti ne samo "Unaprijed definirane boje", već i bilo koje "" - heksadecimalni (HEX), RGB/-A i HSL/-A vrijednosti boja .

Stop

Vrijednosti zaustavne točke (boja se zaustavlja ) navedeni su u jedinice duljine(Na primjer - px ili em) i u postotne vrijednosti. Prijelomna točka govori pregledniku da bi gradijent radijusa trebao doseći zadanu boju prema zadanoj vrijednosti i glatko prijeći na sljedeću boju, ako postoji.

Primjer upotrebe

Pogledajmo radijalne gradijente kružnog i eliptičnog oblika i vidimo u čemu je njihova razlika u sljedećem praktičnom primjeru:

U ovom smo primjeru stvorili četiri bloka i dali im radijalne gradijente. Gornji blokovi imaju eliptični oblik, i donji blokovi okrugli oblik.

Pogledajmo primjer pozicioniranja radijalnog gradijenta.

U ovom smo primjeru stvorili šest blokova s različitim oblicima gradijenata (kružni i eliptični) i pozicionirali su gradijent za svaki blok drugačije, pokazujući vrijednosti u piksela, postotak i koristeći ključne riječi.

Imajte na umu da ako je radijalni gradijent prema zadanim postavkama postavljen centriran, a element je kvadratnog oblika, tada nećete vidjeti razliku između kružnog gradijenta i gradijenta u obliku elipse.

Pogledajmo primjer korištenja zaustavnih točaka radijalnog gradijenta:

U ovom smo primjeru stvorili šest blokova: tri gornja bloka razlikovati se od tri niže samo po oblik gradijenta, ključne točke su iste:

• Prvi i četvrti blok – gradijent dvije boje crvena boja, koji glatko prelazi u zelena, zauzimajući ostatak elementa.
• Drugi i peti blok – gradijent tri boje, u kojoj je zauzeto 10% centra crvena boja, koji glatko prelazi u zelena, s točkom zaustavljanja od 50%, zauzvrat glatko prelazi na plava, koji zauzima ostatak elementa.
• Treći i šesti blok – gradijent tri boje, u kojoj je zauzeto 50% centra crvena boja, koji glatko prelazi u zelena, s točkom zaustavljanja od 85%, zauzvrat glatko prelazi u plava, koji zauzima cijeli preostali mali dio elementa.

Pogledajmo kako kontrolirati veličinu radijalnog gradijenta u CSS-u.

U ovom primjeru stvorili smo tri bloka:

Prvi blok- naznačili smo jedna vrijednost 50px , što je preglednik protumačio kao polumjer za kružni gradijent. Specificirano za gradijent 7 boja. Primijetite da najudaljenija boja ispunjava preostalo područje.

Drugi blok- naznačili smo dva značenja u postocima: prva vrijednost - horizontalni radijus, A drugo značenje - okomiti radijus za eliptični gradijent. Specificirano za gradijent 8 boja. Imajte na umu da smo odredili bijelu kao konačnu boju, koja je ispunila preostalo područje(jedna opcija je ostaviti samo oblik gradijenta).

Treći blok- naznačili smo dva značenja u jedinicama dužine (px I em): prva vrijednost - horizontalni radijus, A drugo značenje - okomiti radijus za eliptični element. Specificirano za gradijent 7 boja.

Radijalni gradijenti prikazuju se drugačije od linearnih. Ako su linearne boje smještene okomito na liniju koja određuje smjer, tada se u radijalnim bojama odvajaju od danog središta, a gradijent može poprimiti oblik kruga ili elipse.

Za najjednostavniji gradijent dovoljno je postaviti samo boje:

Pozadina: radijalni gradijent (zlatna, narančasta);

Prema zadanim postavkama središte gradijenta je u središtu, gradijent ima oblik elipse:

Osim boja, možete postaviti oblik, položaj i veličinu gradijenta. Parametri su kombinirani i ponašaju se složenije nego u linearnim gradijentima.

Oblik(konačni oblik gradijenta) može biti krug ili elipsa. Zadana je elipsa, gradijent nastoji zauzeti sav slobodni prostor elementa, rastežući se ako je potrebno.

Kako bi gradijent imao oblik kruga, to se mora eksplicitno specificirati pomoću ključne riječi circle.

Ako oblik nije naveden, ali je navedena veličina, jedna vrijednost određuje radijus kruga; ako postoje dvije vrijednosti, gradijent ima oblik elipse. Ako su dimenzije prisutne, eksplicitno određivanje oblika gradijenta se zanemaruje.

Položaj određuje gdje će se nalaziti centar gradijent. Koriste se iste ključne riječi kao za linearni gradijent, ali s prefiksom at: zadane su na vrhu, na desnoj strani, na dnu, lijevo i u sredini.

Također se mogu kombinirati za postavljanje gradijenta na danu stranu, na primjer: na desnom vrhu - u gornjem desnom kutu.

U nastavku možete vidjeti kako funkcioniraju različite pozicije:

Šifra prvog kvadrata:

Pozadina: radijalni gradijent (gore lijevo, ljubičasta, grimizna, narančasta, zlatna);

Također možete postaviti točan položaj gradijenta, na primjer na 20% 50% ili na 10px 150px.

Veličina određuje dimenzije konačnog oblika gradijenta. Za eliptične gradijente vrijednosti se mogu odrediti u postocima, ali za kružne - ne.

Ako je navedena jedna vrijednost, ona se smatra polumjerom kružnog gradijenta. Ako su navedene dvije vrijednosti, prva se smatra vodoravnim radijusom elipse, a druga se smatra okomitim radijusom.

Ispod su primjeri kružnih i eliptičnih gradijenata. Oblik figure određen je zadanim dimenzijama:

Također možete koristiti ključne riječi:

najbliža strana - gradijent završava na granici elementa koji je najbliži središtu gradijenta. Ako je to elipsa, gradijent dodiruje sve granice elementa. najdalja strana - gradijent završava na krajnjoj granici elementa. Ako je to elipsa, gradijent dodiruje sve granice elementa. closest-corner - Konačni oblik se rasteže tako da prolazi kroz kut elementa koji je najbliži središtu gradijenta. Ako je konačni oblik elipsa, gradijent se proteže preko cijelog oblika. S ovim parametrom, gradijent ispunjava cijeli oblik, djelomično se protežući izvan njegovih granica. najdalji kut - slično najbližem kutu, samo krajnji oblik prolazi kroz kut najudaljeniji od središta gradijenta. Zadana vrijednost.

Nekim gradijentima je dodan položaj kako bi se radnja koda lakše vidjela:

Radijalni gradijent se također može ponavljati - ovo je ponavljajući radijalni gradijent.

Primjer koda:

Pozadina: ponavljajući radijalni gradijent (krug, tamnokaki, tamnokaki .5em, prozirno .5em, prozirno 1.5em);

Kao i kod linearnog gradijenta, ponavljajući gradijent ne prikazuje se baš uredno.

Kombiniranjem nekoliko pozadina s različitim parametrima možete dobiti nevjerojatne stvari:

Ako prilikom izrade uzoraka koristite relativne jedinice (em, %) umjesto apsolutnih (px), veličina rezultirajućih uzoraka može se jednostavno prilagoditi promjenom samo veličine fonta.

Gradijent pozadine

CSS gradijenti omogućuju prikaz glatkih prijelaza između dvije ili više navedenih boja.

CSS definira dvije vrste gradijenata:

• Linearni gradijenti (ide dolje/gore/lijevo/desno/dijagonalno)
• Radijalni gradijenti (definirani njihovim središtem)

CSS linearni gradijenti

Da biste stvorili linearni gradijent, morate definirati najmanje dvije točke boje. Boje su boje koje želite napraviti glatke prijelaze između njih. Također možete odrediti početnu točku i smjer (ili kut) zajedno s efektom gradijenta.

Sintaksa

pozadina: linearni gradijent( smjer, boja-stop1, color-stop2, ...);

Linearni gradijent - od vrha do dna (zadano)

Sljedeći primjer prikazuje linearni gradijent koji počinje od vrha. Počinje crveno, prelazi u žuto:

Primjer

#grad (
pozadina: linearni gradijent (crvena, žuta);
}

Linearni gradijent - slijeva nadesno

Sljedeći primjer prikazuje linearni gradijent koji počinje slijeva. Počinje crveno, prelazi u žuto:

Primjer

#grad (
pozadina: linearni gradijent (desno, crveno, žuto);
}

Linearni gradijent-dijagonala

Možete napraviti dijagonalni gradijent određivanjem vodoravne i okomite početne pozicije.

Sljedeći primjer prikazuje linearni gradijent koji počinje u gornjem lijevom kutu (i ide dolje desno). Počinje crveno, prelazi u žuto:

Primjer

#grad (
pozadina: linearni gradijent (dolje desno, crvena, žuta);
}

Korištenje kutova

Ako želite više kontrole nad smjerom gradijenta, možete definirati kut umjesto unaprijed definiranih smjerova (dolje, gore, desno, lijevo, dolje desno itd.).

Sintaksa

pozadina: linearni gradijent( kut, boja-stop1, boja-stop2);

Kut je određen kao kut između vodoravne linije i linije gradijenta.

Sljedeći primjer pokazuje kako koristiti kutove na linearnim gradijentima:

Primjer

#grad (
pozadina: linearni gradijent (-90 stupnjeva, crvena, žuta);
}

Korištenje višestrukih zaustavljanja u boji

Sljedeći primjer prikazuje linearni gradijent (od vrha prema dolje) s višestrukim granicama boja:

Primjer

#grad (
pozadina: linearni gradijent (crvena, žuta, zelena);
}

Sljedeći primjer pokazuje kako stvoriti linearni gradijent (slijeva nadesno) s duginom bojom i nešto teksta:

Gradijent pozadine

Primjer

#grad (
pozadina: linearni gradijent (desno, crvena, narančasta, žuta, zelena, plava, indigo, ljubičasta);
}

Bilješka: Internet Explorer 9 i starije verzije ne podržavaju gradijente.

"/> Pogledajte demo u uređivaču

Korištenje transparentnosti

CSS gradijenti također podržavaju transparentnost, koja se može koristiti za stvaranje efekata blijeđenja.

Da bismo dodali prozirnost, koristimo funkciju RGBA() za definiranje graničnika boja. Posljednji parametar u funkciji RGBA() može biti vrijednost između 0 i 1, a određuje prozirnost boje: 0 označava punu prozirnost, 1 označava punu boju (bez prozirnosti).

Sljedeći primjer prikazuje linearni gradijent koji počinje slijeva. Počinje potpuno prozirno, prelazi u punu crvenu boju:

Primjer

#grad (
pozadina: linearni gradijent (desno, rgba(255,0,0,0), rgba(255,0,0,1));
}

Ponovite linearni gradijent

Funkcija repeat-linear-gradient() koristi se za ponavljanje linearnih gradijenata:

Primjer

Ponavljajući linearni gradijent:

#grad (
pozadina: ponavljajući linearni gradijent (crvena, žuta 10%, zelena 20%);
}

CSS radijalni gradijenti

Radijalni gradijent definiran je svojim središtem.

Da biste stvorili radijalni gradijent, također morate definirati najmanje dvije točke boje.

Sintaksa

pozadina:radijalni-gradijent( veličina oblika na položaj, početna boja, ..., zadnja boja);

Prema zadanim postavkama, oblik je elipsa, veličina je najudaljeniji kut, a položaj je središte.

Radijalni gradijent - jednolik razmak između boja (zadano)

Sljedeći primjer prikazuje radijalni gradijent s ravnomjerno raspoređenim rubovima boja.