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 z uporabo filter in jih podpira nazaj na 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šen je gradient,
linearnoaliradialno - 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 (kota ali stran ali kot, barvno zaustavitev, barvno zaustavitev)
- Najprej določite vrsto nagiba z imenom
linearno -gradnik. - Nato določite začetne in zaustavitvene točke gradienta na enega od dveh načinov:
kotačrte v stopinjah od 0 do 359, z 0 stopinjami, ki kažejo naravnost navzgor. Ali s funkcijo "stran ali kot", na primerlevo,prav,spodaj, inna vrh. 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 nastaviti kot ozadje a DIV pišete:
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).
Microsoftove filtre in razširitev-Internet Explorer je najbolj zahtevna podpora, ker potrebujete tri različne vrstice za podporo različnim različicam 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širitvena dela, kot je lastnost CSS3, samo z -moz- razširitev. Č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 spleta-The -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 04Ustvarjanje 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 opozarja, 90deg opozarja na pravico, 180deg opozarja, 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 opredeliti kot, npr zgoraj desno in gradient se bo premaknil iz 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 (z GradientType = 1 stikalo).
Oglejte si ta diagonalni linearni gradient v dejanju z uporabo samo CSS.
03 od 04Barvni 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 04Zgradite 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 GeneratorTa 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 generatorTa 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.
