###
  • Programi
  • Sigurnost
  • Vijesti
  • Zanimljiv
  • Savjet
  • Vijesti
  • Recenzije

    • Kružni gradijent css. Gradients CSS lekcije za početničku akademiju. Korištenje višestrukih zaustavljanja u boji

    16.01.2021 Recenzije

    CSS gradijent predstavlja prijelaze iz jedne boje u drugu.

    Gradijenti se stvaraju pomoću funkcija linear-gradient() i radial-gradient().

    Gradijent pozadine može se postaviti u svojstvima pozadine, pozadinske slike, obrubne slike i popisa stila slike.

    Kako napraviti gradijent u CSS-u

    Podrška za preglednik

    IE: 10.0
    Firefox: 16, 3.6 -moz-
    Krom: 26.0, 10.0 -webkit-
    Safari: 6.1, 5.1 -webkit-
    Opera: 12.1, 11.1 -o-
    iOS Safari: 7.1
    Opera Mini: —
    Android preglednik: 4.4, 4.1 -webkit-
    Krom za Android: 44

    1. Linearni gradijent linear-gradient()


    Riža. 1. Linija gradijenta, početna i krajnja točka i kut gradijenta

    Linearni gradijent stvoren pomoću dvije ili više boja koje imaju određeni smjer, ili linija gradijenta.

    Ako smjer nije naveden, koristi se zadana vrijednost - vrh prema dolje.

    Prema zadanim postavkama, boje gradijenta ravnomjerno su raspoređene u smjeru okomitom na liniju gradijenta.

    Pozadina: linearni gradijent (kut/strana ili nagib po ključnoj riječi (par ključnih riječi), prva boja, druga boja itd.);

    Smjer gradijent se može odrediti na dva načina:
    pomoću kuta nagiba u stupnjevima deg, čija vrijednost određuje kut nagiba linije unutar elementa.

    Div (visina: 200 px; pozadina: linearni gradijent (45 stupnjeva, #EECFBA, #C5DDE8); )

    pomoću ključnih riječi prema gore, desno, dolje, lijevo koji odgovaraju kutu gradijenta od 0°, 90°, 180° i 270°.

    Div (visina: 200 px; 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: 200 px; pozadina: linearni gradijent (gore lijevo, puderplava, ružičasta); )

    Za neravnomjernu raspodjelu boja, početna pozicija svake boje naznačena je kroz zaustavne točke gradijenta, tzv. boja se zaustavlja. Prijelomne točke navedeni su u %, gdje je 0 % početna točka, 100 % krajnja točka, na primjer:

    Div (visina: 200 px; pozadina: linearni gradijent (na vrh, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); )

    Za jasnu raspodjelu pruga u boji, svaka sljedeća boja mora započeti od točke zaustavljanja prethodne boje:

    Div (visina: 200 px; pozadina: linearni gradijent (desno, #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 točke (središta gradijenta) i ravnomjerno se raspoređuju prema van, crtajući oblik kruga ili elipse.

    Pozadina: radijalni gradijent (oblik gradijenta/veličina/središnji položaj, prva boja, druga boja itd.);

    Oblik gradijenta definirano ključnim riječima krug ili elipsa. Ako oblik nije naveden, radijalni gradijent prema zadanim postavkama ima oblik elipse.

    Div (visina: 200 px; pozadina: radijalni gradijent (bijela, #FFA9A1); )

    Središnji položaj navedeno pomoću ključnih riječi korištenih u svojstvu pozadinske pozicije, nakon čega slijedi prefiks at. Ako središnji položaj nije naveden, koristi se zadana vrijednost u središtu.

    Div (visina: 200 px; pozadina: radijalni gradijent (na vrhu, #FEFFFF, #A7CECC); )

    Par vrijednosti, navedenih u jedinicama duljine %, em ili px, može kontrolirati veličinu eliptičnog gradijenta. Prva vrijednost određuje širinu elipse, druga - visinu.

    Div (visina: 200 px; pozadina: radijalni gradijent (40% 50%, #FAECD5, #CAE4D8); )

    Veličina gradijenta navedeni pomoću ključnih riječi. Zadana vrijednost je najdalji kut.

    div ( visina: 200 px; pozadina: radijalni gradijent (najudaljeniji kut kruga na 100 px 50 px, #FBF2EB, #352A3B); )

    Koristeći radijalni gradijent, možete stvoriti realne trodimenzionalne oblike, kao što su kuglice i gumbi.

    Lopta

    div (širina: 200 px; visina: 200 px; radijus granice: 50%; margina: 0 auto; pozadina: radijalni gradijent (krug na 65% 15%, aqua, tamnoplava); )

    Dugme

    .wrap ( visina: 200px; padding: 50px 0; pozadina: #cccccc; ) .button ( širina: 100px; visina: 100px; radijus granice: 50%; margina: 0 auto; pozadina: radijalni gradijent(najudaljenija strana) elipsa gore lijevo, bijela, #aaaaaa); sjena okvira: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); )

    Poštanska marka


    Koristeći prozirnu boju u gradijentima, možete stvoriti ovakve efekte.

    JPG">

    .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; /*odsjeci uzorak uz rub*/ margina: 0 auto; ) img ( širina: 100%; )

    3. Ponavljanje gradijenta

    Osim linearnih i radijalnih gradijenata, postoji ponavljanje gradijenata, koje se specificira 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 ispravno 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; )

    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 imati 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 se kombiniraju 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.

    Da bi gradijent imao oblik kruga, to se mora eksplicitno specificirati pomoću ključne riječi kružnica.

    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: na vrhu , na desnoj strani , na dnu , na lijevoj strani i u sredini su zadane vrijednosti.

    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:

    Kod 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. najbliži kut - 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.

    Kombiniranje više pozadina sa različite parametre 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.

    Izvor za ovaj interaktivni primjer pohranjen je u GitHub repozitorij. Ako želite doprinijeti projektu interaktivnih primjera, klonirajte https://github.com/mdn/interactive-examples i pošaljite nam zahtjev za povlačenje.

    Kompozicija radijalnog gradijenta

    Radijalni gradijent definiran je s a središnja točka, an završni oblik, i dva ili više točke zaustavljanja boje.

    Za stvaranje glatkog gradijenta, funkcija radial-gradient() crta niz koncentričnih oblika koji se šire od središta prema završni oblik(i potencijalno šire). Završni oblik može biti krug ili elipsa.

    Točke zaustavljanja boja smještene su na a virtualna gradijentna zraka koji se proteže vodoravno od središta prema desno. Pozicije zaustavljanja boje temeljene na postotku relativne su u odnosu na sjecište između završnog oblika i ove zrake gradijenta, što predstavlja 100%. Svaki oblik je jedne boje određene bojom na gradijentnoj zraci koju siječe.

    Sintaksa

    /* Gradijent u središtu spremnika, počinje crveno, mijenja se u plavo i završava zeleno */ radijalni gradijent (krug u središtu, crveno 0, plavo, zeleno 100%)

    Vrijednosti

    (ili ) CSS tip podataka označava dvodimenzionalnu koordinatu koja se koristi za postavljanje lokacije u odnosu na okvir elementa. Koristi se u svojstvima položaja pozadine i pomaka."> Položaj gradijenta, tumačen na isti način kao položaj pozadine ili izvor transformacije. Ako nije navedeno, zadano je središte. Oblik gradijenta. Vrijednost može biti krug (što znači da je oblik gradijenta krug s konstantnim polumjerom) ili elipsa (što znači da je oblik elipsa poravnata s osi). Ako nije navedeno, zadana je elipsa. Ključna riječ koja opisuje koliko velik mora biti završni oblik. Moguće vrijednosti su:
    Ključna riječ Opis
    najbliža strana Završni oblik gradijenta susreće se sa stranom okvira koja je najbliža središtu (za krugove) ili se susreće s okomitom i vodoravnom stranom najbližom središtu (za elipse).
    najbliži kut Završni oblik gradijenta je veličine tako da se točno susreće s najbližim kutom okvira od njegovog središta.
    najudaljenija strana Slično najbližoj strani, osim što je završni oblik veličine tako da odgovara strani okvira koja je najudaljenija od središta (ili okomitih i vodoravnih strana).
    najdalji-kutak Zadana vrijednost, završni oblik gradijenta veličine je tako da točno dodiruje najudaljeniji kut okvira od njegovog središta.

    Bilješka: Rane implementacije ove funkcije uključivale su druge ključne riječi (cover i contain) kao sinonime standardnog najdaljeg kuta i najbliže strane. Koristite samo standardne ključne riječi jer su neke implementacije već izbacile te starije varijante.

    CSS tip podataka za zaustavljanje boje predstavlja boju u sRGB prostoru boja. A također može sadržavati vrijednost prozirnosti alfa-kanala, koja pokazuje kako bi se boja trebala kombinirati s pozadinom."> vrijednost, nakon koje slijede jedan ili dva opcijska zaustavna položaja (bilo CSS vrsta podataka predstavlja postotnu vrijednost. Često se koristi za definiranje veličine u odnosu na roditeljski objekt elementa. brojna svojstva mogu koristiti postotke kao što je margina širine visine padding i font-size.> ili CSS tip podataka predstavlja vrijednost udaljenosti. Duljine se mogu koristiti u brojnim CSS svojstvima, kao što su širina, visina, margina, ispuna, širina obruba, veličina fonta i sjena teksta."> duž osi gradijenta). Postotak od 0% ili duljina od 0 predstavlja središte gradijenta; vrijednost 100% predstavlja sjecište završnog oblika s virtualnom zrakom gradijenta. Postotne vrijednosti između su linearno postavljeni na gradijentnoj zraci. Uključivanje dvaju položaja za zaustavljanje je ekvivalentno deklariranju dvaju graničnika u boji s istom bojom na dva položaja. Savjet za boju je savjet za interpolaciju koji definira kako gradijent napreduje između susjednih stanica boja. Duljina definira na kojoj bi točki između dva zaustavljanja boje gradijent boje trebao doseći sredinu prijelaza boje. Ako je izostavljeno, središnja točka prijelaza boja je središnja točka između dvaju graničnika boja.

    Formalna sintaksa

    radijalni-gradijent([ [ krug || ] [ na ]? , | [elipsa || [ | ](2) ] [ na ]? , | [[ krug | elipsa ] || ] ? , | na , ]? [ , ]+) gdje = najbliži kut | najbliža strana | najudaljeniji-kutak | najdalja strana i = [ [, ? ]? ]#, i = [ ]? i = [ | ](1,2) i = [ | ]

    Imajte na umu da negativno "s nisu dopušteni, no preglednici su implementirali negativne duljine koje se sada uklanjaju. Pogledajte napomenu o kompatibilnosti web-mjesta Firefox.

    Primjeri

    Jednostavan gradijent

    Radijalni gradijent (pozadinska slika: radijalni gradijent (cijan 0%, prozirno 20%, losos 40%); )

    Necentrirani gradijent

    .radial-gradient (širina: 240px; visina: 120px;)

    Radijalni gradijent (pozadinska slika: radijalni gradijent (najudaljeniji kut na 40px 40px, #f35 0%, #43e 100%); )

    Tehnički podaci

    Specifikacija Status Komentar
    Modul CSS slika, razina 3
    Definicija "radial-gradients()" u toj specifikaciji.    		 Preporuka kandidata Početna definicija.

    Kompatibilnost preglednika

    Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.

    Ažurirajte podatke o kompatibilnosti na GitHubu

    Radna površinaMobilni
    KromRubFirefoxInternet Explorer OperaSafariAndroid web-prikazChrome za AndroidFirefox za AndroidOpera za AndroidSafari na iOS-uSamsung Internet
    radijalni gradijent()Chrome puna podrška 26 puna podrška 26 puna podrška 13

    Prefiksiran

    Prefiksiran     		Edge Potpuna podrška 12Firefox Puna podrška 16

    Bilješke

    Puna podrška 16

    Bilješke

    Bilješke Prije Firefoxa 36, ​​gradijenti se nisu primjenjivali na unaprijed umnoženi prostor boja, što je dovodilo do neočekivanog pojavljivanja nijansi sive kada se koristila s prozirnošću. Puna podrška 3.6

    Prefiksiran Bilješke

    Prefiksiran

    Prefiksiran

    Prefiksiran

    Prefiksiran Onemogućeno

    Prefiksiran     		IE puna podrška 10

    Bilješke

    Puna podrška 10

    Bilješke

    Bilješke Internet Explorer 5.5 do 9.0 podržava gradijente putem vlasničkog filtra: .    		Opera Puna podrška 12.1 Puna podrška 12.1 Bez podrške 11.6 - 15

    Prefiksiran

    Prefiksiran Puna podrška 15

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit-    		Safari Potpuna podrška 6.1 Potpuna podrška 6.1 Potpuna podrška 5.1

    Prefiksiran Bilješke

    Prefiksiran -webkit-gradijent(radijalno,…)    		WebView Android Potpuna podrška ≤37 Potpuna podrška ≤37 Potpuna podrška ≤37

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit-    		Chrome Android Potpuna podrška 26 Potpuna podrška 26 Potpuna podrška 18

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit-    		Firefox Android Puna podrška 16

    Bilješke

    Puna podrška 16

    Bilješke

    Bilješke Prije Firefoxa 36, ​​gradijenti se nisu primjenjivali na unaprijed umnoženi prostor boja, što je dovelo do neočekivanog pojavljivanja nijansi sive kada se koristila s prozirnošću. Puna podrška 4

    Prefiksiran Bilješke

    Prefiksiran Implementirano s prefiksom dobavljača: -moz- Bilješke Od Firefoxa 42, verzija gradijenata s prefiksom može se onemogućiti postavljanjem layout.css.prefixes.gradients na false. Puna podrška 49

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit- Puna podrška 44

    Prefiksiran Onemogućeno

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit- Onemogućeno Od verzije 44: ova se značajka nalazi iza postavke layout.css.prefixes.webkit (treba se postaviti na true). Za promjenu postavki u Firefoxu, posjetite about:config.    		Opera Android Puna podrška 12.1 Puna podrška 12.1 Bez podrške 12 - 14

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -o- Puna podrška 14

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit-    		Safari iOS Potpuna podrška 6.1 Potpuna podrška 6.1 Potpuna podrška 6

    Prefiksiran Bilješke

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit- Bilješke Safari 4 je podržavao eksperimentalnu funkciju -webkit-gradient(radial,…). Ova stara zastarjela sintaksa još uvijek je podržana radi kompatibilnosti.    		Samsung Internet Android Puna podrška 1.5 Puna podrška 1.5 Puna podrška 1.0

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit-
    u sintaksiChrome puna podrška 26Edge Potpuna podrška 12Firefox Puna podrška 16

    Bilješke

    Puna podrška 16

    Bilješke

    Bilješke Prije Firefoxa 36, ​​gradijenti se nisu primjenjivali na unaprijed umnoženi prostor boja, što je dovodilo do neočekivanog pojavljivanja nijansi sive kada se koristila s prozirnošću. Puna podrška 10

    Prefiksiran Bilješke

    Prefiksiran Implementirano s prefiksom dobavljača: -moz- Bilješke Od Firefoxa 42, verzija gradijenata s prefiksom može se onemogućiti postavljanjem layout.css.prefixes.gradients na false. Puna podrška 49

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit- Puna podrška 44

    Prefiksiran Onemogućeno

    Prefiksiran Implementirano s prefiksom dobavljača: -webkit- Onemogućeno Od verzije 44: ova se značajka nalazi iza postavke layout.css.prefixes.webkit (treba se postaviti na true). Za promjenu postavki u Firefoxu, posjetite about:config.    		IE puna podrška 10Opera Puna podrška 15 Puna podrška 15 Bez podrške 11.6 - 15

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -o-    		Safari Nema podrške BrWebView Android Puna podrška ≤37Chrome Android Puna podrška 26Firefox Android Potpuna podrška 16 Potpuna podrška 16 Potpuna podrška 10

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -moz-    		Opera Android Puna podrška 14 Potpuna podrška 14 Bez podrške 12 - 14

    Prefiksiran

    Prefiksiran Implementirano s prefiksom dobavljača: -o-    		Safari iOS Nema podrške BrSamsung Internet Android Puna podrška 1.5
    Dvostruki graničnici bojaPuna podrška za Chrome 71Edge Potpuna podrška 79Firefox Puna podrška 64IE Nema podrške brOpera puna podrška 58Safari Potpuna podrška 12.1WebView Android Puna podrška 71Chrome Android Puna podrška 71Firefox Android Puna podrška 64Opera Android Puna podrška 50Safari iOS Puna podrška 12.2Samsung Internet Android Puna podrška 10.0
    Savjeti za interpolaciju / Srednje točke gradijentaChrome puna podrška 40Edge Potpuna podrška 79Firefox Puna podrška 36IE Nema podrške brOpera puna podrška 27Safari Potpuna podrška 6.1WebView Android Puna podrška 40Chrome Android Puna podrška 40Firefox Android Puna podrška 36Opera Android Puna podrška 27Safari iOS Puna podrška 6.1Samsung Internet Android Puna podrška 4.0

    Legenda

    Potpuna podrška Potpuna podrška Bez podrške Nema podrške Vidi napomene o implementaciji. Pogledajte napomene o implementaciji. Korisnik mora izričito omogućiti ovu značajku. Korisnik mora izričito omogućiti ovu značajku. Za upotrebu je potreban prefiks dobavljača ili drugo ime.

    Quantum CSS bilješke

    Gecko je imao dugotrajnu grešku zbog koje bi radijalni gradijenti poput radial-gradient(circle gold,red) radili, iako ne bi trebali zbog nedostatka zareza između kruga i zlata. Također,

    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 između kojih želite glatke prijelaze. 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 - odozgo prema dolje (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 vodoravna crta i linija 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 (s lijeva na desno) 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.

    CSS funkcije

    Definicija i primjena

    CSS funkcija radial-gradient() postavljena je duž svog radijusa, 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čenjeOpis
    najbliža stranaGradijent 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 kutGradijent 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 stranaGradijent 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-kutakGradijent 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 je koristiti ključne riječi ako je navedena veličina. Ako navedete jedna vrijednost, tada će to preglednik smatrati . 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čenjeOpis
    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 jedan ključna riječ, druga vrijednost bi bila "centar"
    x%y% 0% 0% (ovo je zadana vrijednost). U donjem desnom kutu 100% 100%. Ako je navedena samo jedna vrijednost, tada će biti druga vrijednost 50%.
    x yPostavlja 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, tada će biti 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:

    Primjer korištenja radijalnih gradijenata



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

    Pogledajmo primjer pozicioniranja radijalnog gradijenta.

    Primjer pozicioniranja radijalnih gradijenata
    na 5px 45px
    klasa = "test2" > na 50% najviše
    klasa = "test3" > gore lijevo

    na dnu od 0%.
    klasa = "test5" > dolje u sredini
    klasa = "test6" > na 100% 100%


    U ovom smo primjeru stvorili šest blokova s različitim oblicima gradijenata (kružni i eliptični) i različito pozicionirali gradijent za svaki blok, 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 u središte, 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.

    Primjer dimenzioniranja radijalnih gradijenata


    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.