Kako ustvariti linearne prelive v CSS3

Ustvarjanje linearnih prelivov med brskalniki s CSS3

Zgornja slika prikazuje preprost gradient od leve proti desni od # 999 (temno siva) do #fff (bela).

Linearne prelive je najlažje določiti in imajo največ podpore v brskalnikih. Linearni prelivi CSS3 so podprti v sistemih Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ in Safari 4+.

Ko definirate gradient, določite njegovo vrsto -linearno ali radialno—In tam, kjer naj se gradient ustavi in ​​začne. Dodajte tudi barve preliva in kje se te barve posamezno začnejo in končajo.

Če želite z uporabo CSS3 definirati linearne gradiente, napišite:

linearni gradient (kot ali bok ali vogal, barvni stop, barvni stop) 

Najprej z imenom določite vrsto preliva.

Nato določite začetno in končno točko gradienta na dva načina: kot premice v stopinjah od 0 do 359, pri čemer je 0 stopinj usmerjeno naravnost navzgor. Ali s funkcijami "stranski ali vogalni". Če jih izpustite, bo gradient potekal od vrha do dna elementa.

Nato določite postanke barve. Barvne postanke določite z barvno kodo in neobveznim odstotkom. Odstotek brskalniku pove, kje v vrstici naj se začne ali konča s to barvo. Privzeto je, da barve enakomerno postavite vzdolž črte. Več o barvnih postankih boste izvedeli na strani 3.

Torej, če želite definirati zgornji gradient s CSS3, napišite:

linearni gradient (levo, # 999999 0%, #ffffff 100%); 

In da ga nastavite za ozadje DIV-a, zapišite:

div {
slika ozadja: linearni gradient (levo, # 999999 0%, #ffffff 100%;
} 

Razširitve brskalnika za linearne prelive CSS3

Če želite, da vaš gradient deluje med brskalniki, morate uporabiti razširitve brskalnika za večino brskalnikov in a filter za Internet Explorer 9 in starejši (pravzaprav 2 filtra). Vsi ti imajo enake elemente, da definirajo vaš gradient (le da lahko v IE določite samo dvobarvne prelive).

Microsoftovi filtri in razširitve—Internet Explorer je najtežje podpreti, ker potrebujete tri različne vrstice za podporo različicam brskalnika. Če želite dobiti zgornji sivi do beli gradient, bi napisali:

/ * IE 5,5–7 * /
filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8–9 * /
-ms-filter: "progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1) ";
/ * IE 10 * /
-ms-linear-gradient (levo, # 999999 0%, #ffffff 100%); 

Mozilla Extension—The -moz- razširitev deluje kot lastnost CSS3, samo s pripono. Če želite dobiti zgornji gradient za Firefox, napišite:

-moz-linearni gradient (levo, # 999999 0%, #ffffff 100%); 

Razširitev Opera—The -o- razširitev doda gradiente v Opera 11.1+. Če želite dobiti zgornji gradient, napišite:

-o-linearni gradient (levo, # 999999 0%, #ffffff 100%); 

Razširitev Webkit—The -spletni komplet- razširitev deluje podobno kot lastnost CSS3. Če želite definirati zgornji gradient za Safari 5.1+ ali Chrome 10+, napišite:

-webkit-linearni gradient (levo, # 999999 0%, #ffffff 100%); 

Obstaja tudi starejša različica razširitve Webkit, ki deluje s sistemoma Chrome 2+ in Safari 4+. V njem določite vrsto preliva kot vrednost in ne kot ime lastnosti. Če želite s to razširitvijo pridobiti sivi do beli gradient, napišite:

-webkit-gradient (linearno, levo zgoraj, desno zgoraj, stop-color (0%, # 999999), color-stop (100%, # ffffff)); 

Celotna CSS3 linearna gradientna koda CSS

Za popolno podporo med brskalniki, da dobite sivo-beli gradient zgoraj, najprej vključite nadomestno enobarvno sliko za brskalnike, ki ne podpirajo prelivov, zadnji element pa naj bo slog CSS3 za brskalnike, ki so v celoti skladen. Torej, pišete:

ozadje: # 999999;
ozadje: -moz-linear-gradient (levo, # 999999 0%, #ffffff 100%);
ozadje: -webkit-gradient (linearno, levo zgoraj, desno zgoraj, stop-color (0%, # 999999), color-stop (100%, # ffffff));
ozadje: -webkit-linear-gradient (levo, # 999999 0%, #ffffff 100%);
ozadje: -o-linear-gradient (levo, # 999999 0%, #ffffff 100%);
ozadje: -ms-linear-gradient (levo, # 999999 0%, #ffffff 100%);
filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
ozadje: linearni gradient (levo, # 999999 0%, #ffffff 100%); 

Ustvarjanje diagonalnih prelivov - kot prelivanja

Začetna in ustavna točka določata kot naklona. Večina linearnih gradientov je od zgoraj navzdol ali od leve proti desni. Vendar je mogoče zgraditi gradient, ki se premika po diagonalni črti. Slika na tej strani prikazuje preprost gradient, ki se premika pod kotom 45 stopinj čez sliko od desne proti levi.

Koti za določanje črte preliva

Kot je črta na namišljenem krogu v središču elementa. Mera 0 stopinj kaže gor, 90 stopinj točke desno, 180 stopinj točke navzdol in 270 stopinj preostale točke. Uporabite katero koli merilo kota.

V kvadratu se kot zgornjega levega kota v spodnji desni kot premakne 45-stopinjski kot, v pravokotniku pa sta začetna in končna točka nekoliko zunaj oblike.

Pogostejši način določanja diagonalnega gradienta je definiranje vogala, kot je npr zgoraj desno in gradient se premakne iz tega vogala v nasprotni kot. Določite začetni položaj z naslednjimi ključnimi besedami:

• vrh
• prav
• spodaj
• levo
• center

In jih je mogoče kombinirati, da so bolj natančni, na primer:

• zgoraj desno
• zgoraj levo
• zgornji center
• spodaj desno
• spodaj levo
• spodaj na sredini
• desno sredino
• levo sredino

Tu je CSS za gradient, podoben tistemu na sliki, od rdeče do bele, ki se premika od zgornjega desnega kota do spodnjega levega:

ozadje: ## 901A1C;
slika ozadja: -moz-linearni gradient (desno zgoraj, # 901A1C 0%, # FFFFFF 100%);
slika ozadja: -webkit-gradient (linearno, desno zgoraj, levo spodaj, stop-color (0, # 901A1C), color-stop (1, #FFFFFF));
ozadje: -webkit-linear-gradient (desno zgoraj, # 901A1C 0%, #ffffff 100%);
ozadje: -o-linearni gradient (desno zgoraj, # 901A1C 0%, #ffffff 100%);
ozadje: -ms-linear-gradient (desno zgoraj, # 901A1C 0%, #ffffff 100%);
ozadje: linearni gradient (desno zgoraj, # 901A1C 0%, #ffffff 100%); 

Morda ste opazili, da v tem primeru ni filtrov IE. To je zato, ker IE dovoljuje le dve vrsti filtrov: od zgoraj navzdol (privzeto) in od leve proti desni (z GradientType = 1 stikalo).

Barvne ustavitve

Z linearnimi prelivi CSS3 dodajte več barv prelivu, da ustvarite še bolj ljubke učinke. Če želite dodati te barve, vstavite dodatne barve na konec lastnine, ločene z vejicami. Vključiti morate, kje na črti naj se tudi barve začnejo ali končajo.

Filtri Internet Explorer podpirajo samo dva barvna postanka, zato morate pri gradnji tega gradienta vključiti samo prvo in drugo barvo, ki ju želite prikazati.

Tu je CSS za zgornji tribarvni gradient:

ozadje: #ffffff;
ozadje: -moz-linearni gradient (levo, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
ozadje: -webkit-gradient (linearno, levo zgoraj, desno zgoraj, stop-color (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));
ozadje: -webkit-linear-gradient (levo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ozadje: -o-linearni gradient (levo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ozadje: -ms-linear-gradient (levo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
ozadje: linearni gradient (levo, #ffffff 0%, # 901A1C 51%, # ffffff 100%); 

Oglejte si ta linearni gradient s tremi barvnimi postanki v akciji z uporabo samo CSS.