01 od 04
Ustvarjanje linearnih gradientov križnega brskalnika s CSS3
Linearni gradienti
Najpogostejši tip gradienta, ki ga boste videli, je linearni gradient dveh barv. To pomeni, da se bo gradient premaknil ravno črto postopoma, od prve barve do druge vzdolž te črte. Slika na tej strani prikazuje preprost levi-desni gradient # 999 (temno siv) do #fff (bela).
Linijski gradienti so najlažje opredeliti in imajo največjo podporo v brskalnikih. Linijski gradienti CSS3 so podprti v Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ in Safari 4+. Internet Explorer lahko dodaja gradiente s filtrom in jih podpira nazaj v IE 5.5. To ni CSS3, vendar je možnost za združljivost med brskalniki.
Ko določite gradient, morate definirati več različnih stvari:
- Kakšna vrsta gradienta je linearna ali radialna
- Kjer naj bi se gradient začel
- Kjer bi se gradient ustavil
- Kakšne barve so v gradientu in kamor bi se morali začeti in ustaviti
Če želite določiti linearne gradiente z uporabo CSS3, pišete:
linearni gradient ( kot ali bočni ali kotni , barvni , barvni )
- Najprej določite vrsto nagiba z imenom linear- gradient.
- Potem potem začetna in zaustavitvena mesta gradienta določite na dva načina: kot črta v stopinjah od 0 do 359, z 0 stopinjami, ki kažejo naravnost navzgor. Ali s funkcijo "stran ali kot", na primer levo, desno, spodaj in zgoraj. Te bodo podrobneje razložene na naslednji strani. Če to zapustite, bo gradient potekal od vrha do dna elementa.
- Nato določite barvno zaustavitev. Določite barvno zaustavitev z barvno kodo in poljubnim odstotkom. Odstotek govori brskalniku, kamor se na črti začne ali konča s to barvo. Privzeto je, da barve enakomerno postavite vzdolž linije. Več o barvnih postankih boste izvedeli na strani 3.
Torej, če želite določiti zgornji gradient s CSS3, pišete:
linearni gradient (levo, # 999999 0%, #ffffff 100%);
In da jo nastavite kot ozadje DIV-a, pišite:
div {
ozadje-slika: linearni-gradient (levo, # 999999 0%, #ffffff 100%;
}
Razširitve brskalnika za CSS3 Linearne gradiente
Če želite, da gradient deluje prek navideznega brskalnika, morate uporabiti razširitve brskalnika za večino brskalnikov in filter za Internet Explorer 9 in nižje (dejansko 2 filtri). Vsi ti elementi imajo enake elemente, da definirajo svoj gradient (razen, da lahko v IE označite samo 2-barvni gradient).
Microsoft Filters in Extension- Internet Explorer je najbolj zahtevna podpora, ker potrebujete tri različne vrstice, ki podpirajo različne različice brskalnika. Da bi dobili zgornji siv do belo 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-linearni gradient (levo, # 999999 0%, #ffffff 100%);
Razširitev Mozille -The -moz- razširitev deluje kot lastnost CSS3, samo z razširitvijo -moz-. Če želite pridobiti zgornji gradient za Firefox, napišite:
-moz-linearni-gradient (levo, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- razširitev dodaja naklone v Opera 11.1+. Da bi dobili zgornji gradient, napišite:
-o-linearni-gradient (levo, # 999999 0%, #ffffff 100%);
Razširitev spletnega mesta -Webkit-razširitev deluje podobno kot lastnost CSS3. Če želite določiti zgornji gradient za Safari 5.1+ ali Chrome 10+, pišite:
-webkit-linearni-gradient (levo, # 999999 0%, #ffffff 100%);
Obstaja tudi starejša različica razširitve Webkit, ki deluje s Chrome 2+ in Safari 4+. V njem določite vrsto gradienta kot vrednost, ne pa v imenu lastnosti. Če želite s tem podaljškom preklopiti sivo v belo, napišite:
-webkit-gradient (linearno, levo zgoraj, desno zgoraj, barvno zaustavitev (0%, # 999999), barvno zaustavitev (100%, # ffffff));
Celotna koda CSS CSS3 Linear Gradient
Če želite polno podporo med brskalniki, da bi dobili sivo-belo gradient zgoraj, bi morali najprej vključiti nadomestno solidno barvo za brskalnike, ki ne podpirajo nagibov, zadnji element pa bi moral biti stil CSS3 za brskalnike, ki so popolnoma skladni. Torej, pišete:
ozadje: # 999999;
ozadje: -moz-linearni-gradient (levo, # 999999 0%, #ffffff 100%);
ozadje: -webkit-gradient (linearno, levo zgoraj, desno zgoraj, barvno zaustavitev (0%, # 999999), barvno zaustavitev (100%, # ffffff));
ozadje: -webkit-linearni-gradient (levo, # 999999 0%, #ffffff 100%);
ozadje: -o-linearni-gradient (levo, # 999999 0%, #ffffff 100%);
ozadje: -ms-linearni-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%);
Naslednje strani v tej vadnici podrobneje razlagajo dele gradienta in zadnja stran vas opozarja na orodje, ki je odličen način za samodejno ustvarjanje gradnikov CSS3.
Glej ta linearni gradient v dejanju z uporabo samo CSS.
02 od 04
Ustvarjanje diagonalnih gradientov - kot naklona
Začetna in zaustavitvena točka določata kot naklona. Večina linearnih nagibov 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 v 45-stopinjskem kotu po sliki z desne proti levi.
Koti za določitev linije preliva
Kot je črta na namišljenem krogu v središču elementa. 0deg točke, 90deg kaže na desno, 180deg točk navzdol in 270deg kaže na levo. Lahko določite kateri koli kot od 0 do 359 stopinj.
Upoštevati morate, da se v kvadratu premakne kot 45 stopinj od zgornjega levega kota do spodaj desno, v pravokotniku pa sta začetni in končni točki nekoliko zunaj oblike, kot vidite na sliki.
Pogostejši način za določitev diagonalnega gradienta je definiranje vogala, kot je desno zgoraj, naklon se bo premaknil od tega kota v nasprotni kotiček. Začetni položaj lahko določite z naslednjimi ključnimi besedami:
- na vrh
- prav
- spodaj
- levo
- center
In jih lahko kombiniramo bolj natančno, kot so:
- zgoraj desno
- zgoraj levo
- zgornji center
- spodaj desno
- spodaj levo
- spodnji center
- desno središče
- levi center
Tukaj je CSS za gradient, podoben tistemu na sliki, rdeče do belo, ki se giblje od zgornjega desnega kota do spodnjega levega:
ozadje: ## 901A1C;
background-image: -moz-linearni-gradient (desni vrh, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (linearno, desno zgoraj, levo spodaj, barvno zaustavitev (0, # 901A1C), barvno zaustavitev (1, #FFFFFF));
ozadje: -webkit-linearni-gradient (desni vrh, # 901A1C 0%, #ffffff 100%);
ozadje: -o-linearni-gradient (desni vrh, # 901A1C 0%, #ffffff 100%);
ozadje: -ms-linearni-gradient (desni vrh, # 901A1C 0%, #ffffff 100%);
ozadje: linearni gradient (desni vrh, # 901A1C 0%, #ffffff 100%);
Morda ste opazili, da v tem primeru ni filtrov IE. To je zato, ker IE dovoljuje samo dve vrsti filtrov: od zgoraj navzdol (privzeto) in od leve proti desni (s stikalom GradientType = 1).
Oglejte si ta diagonalni linearni gradient v dejanju z uporabo samo CSS.
03 od 04
Barvni odklopi
Z linearnimi gradienti CSS3 lahko v gradient dodate več barv, da ustvarite še bolj čudovite učinke. Če želite dodati te barve, dodate dodatne barve do konca vaše znamke, ločene z vejicami. Morate vključiti, kje v vrstici morajo začeti ali končati barve.
Filtri za Internet Explorer podpirajo samo dve barvni zaustavitvi, zato morate pri gradnji tega gradienta vključiti samo prvo in drugo barvo, ki jo želite prikazati.
Tukaj je CSS za zgornji 3-barvni gradient:
ozadje: #ffffff;
ozadje: -moz-linearni-gradient (levo, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
ozadje: -webkit-gradient (linearno, levo zgoraj, desno zgoraj, barvno zaustavitev (0%, # ffffff), barvno zaustavitev (51%, # 901A1C), barvno zaustavitev (100%, # ffffff));
ozadje: -webkit-linearni-gradient (levo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ozadje: -o-linearni-gradient (levo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ozadje: -ms-linearni-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.
04 od 04
Zgradite gradiente lažje
Obstajata dve mesti, ki jih priporočam za pomoč pri gradnji gradientov, ki imajo za njih koristi in slabosti, nisem našel graditelja graditelja, ki vse naredi vse.
Ultimate CSS Gradient Generator
Ta gradientni generator je zelo priljubljen, ker deluje na podoben način kot gradient gradnikov v programih, kot je Photoshop. Prav tako mi je všeč, ker vam daje vse CSS razširitve, ne le Webkit in Mozilla. Problem s tem generatorjem je, da podpira samo horizontalne in navpične nagibe. Če želite narediti diagonalne nagibe, morate iti na drug generator, ki ga priporočam.
CSS3 gradientni generator
Ta generator mi je vzel nekaj dlje, da bi razumel kot prvi, vendar podpira spreminjanje smeri na diagonalo.
Če poznaš še en generator CSS Gradient, ki vam je všeč bolje od teh, nam to sporočite .