01 af 04
Búa til línulegan þvermál með Cross-Browser með CSS3
Línulegar stigamörk
Algengasta gerð hallans sem þú munt sjá er línuleg halli tveggja litna. Þetta þýðir að hallinn muni hreyfa sig í beinni línu sem breytist smám saman frá fyrsta lit til annars með þeirri línu. Myndin á þessari síðu sýnir einfaldan vinstri til hægri gradient af # 999 (dökkgrár) í #fff (hvítt).
Línulegar stigamörk eru auðveldast að skilgreina og hafa mestan stuðning í vöfrum. CSS3 línuleg stigamörk eru studd í Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ og Safari 4+. Internet Explorer getur bætt við stigum með því að nota síu og styður þá aftur í IE 5.5. Þetta er ekki CSS3, en það er möguleiki fyrir samhæfni í vafra.
Þegar þú skilgreinir halli þarftu að skilgreina nokkra mismunandi hluti:
- Hvaða tegund af halli er það-línulegt eða geislamyndað
- Hvar hallinn ætti að byrja
- Hvar halla ætti að stöðva
- Hvaða litir eru í hallanum og þar sem þeir ættu að byrja og hætta
Til að skilgreina línulegar stigsetningar með CSS3 skrifar þú:
línuleg halli ( horn eða hlið eða horn , litastillir , litastopp )
- Í fyrsta lagi skilgreinirðu tegund hallans með heitinu línulegan gradient.
- Þá skilgreinir þú byrjun og stöðvun stiganna á einn af tveimur vegu: horn hornsins í gráðum frá 0 til 359, með 0 gráður sem vísar beint upp. Eða með "hlið eða horn" virka, svo sem vinstri, hægri, neðst og efst. Þetta verður útskýrt nánar á næstu síðu. Ef þú skilur þetta út mun hallinn rennsli frá toppi til botns frumefnisins.
- Þá skilgreinir þú litinn hættir. Þú skilgreinir litinn stoppar með litakóðanum og valfrjálst hlutfalli. Hundraðshluti segir vafranum hvar á línunni til að byrja eða enda með þeim lit. Sjálfgefið er að setja liti jafnt eftir línu. Þú munt læra meira um hættir á lit á bls. 3.
Svo, til að skilgreina ofangreindan halla með CSS3, skrifar þú:
línuleg halli (vinstri, # 999999 0%, #ffffff 100%);
Og til að setja það sem bakgrunn DIV skrifarðu:
div {
bakgrunnsmynd: línuleg-halli (vinstri, # 999999 0%, #ffffff 100%;
}
Browser Eftirnafn fyrir CSS3 línulegar stigamörk
Til að fá halla þína til að vinna yfir vafra þarftu að nota vafra eftirnafn fyrir flesta vafra og síu fyrir Internet Explorer 9 og lægri (í raun 2 síur). Öll þessi taka sömu þætti til að skilgreina hallann þinn (nema að þú getir aðeins skilgreint 2-litar stig í IE).
Microsoft Filters and Extension-Internet Explorer er mest krefjandi að styðja, vegna þess að þú þarft þrjár mismunandi línur til að styðja við mismunandi útgáfur vafrans. Til að fá ofangreint grátt að hvítt halli myndirðu skrifa:
/ * IE 5.5-7 * /
sía: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-sía: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-m-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- eftirnafn virkar eins og CSS3 eignin, bara með -moz-eftirnafninu. Til að fá ofangreindan halla fyrir Firefox skaltu skrifa:
-moz-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- eftirnafn bætir stigum í Opera 11.1+. Til að fá ofangreindan halla skaltu skrifa:
-ö-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
Webkit Eftirnafn -The -webkit-eftirnafn virkar mikið eins og CSS3 eignin. Til að skilgreina ofangreindan halla fyrir Safari 5.1+ eða Chrome 10+ skrifar þú:
-webkit-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
Það er einnig eldri útgáfa af viðbótinni Webkit sem vinnur með Chrome 2+ og Safari 4+. Í því skilgreinir þú tegund hallans sem gildi, frekar en í eignarheitinu. Til að fá gráa til hvíta halli með þessari framlengingu skrifaðu:
-webkit-halli (línuleg, vinstri efst, hægri efst, litastopp (0%, # 999999), litastopp (100%, # ffffff));
Full CSS3 línuleg þrep CSS kóða
Til að fá fullan stuðning í vafra til að fá gráa til hvíta halli fyrir ofan þá ættir þú fyrst að innihalda fastan fallhlið fyrir vafra sem styðja ekki stig, og síðasta hlutinn ætti að vera CSS3-stíl fyrir vafra sem eru fullkomlega samhæfðar. Svo skrifar þú:
bakgrunnur: # 999999;
bakgrunnur: -moz-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
Bakgrunnur: -webkit-halli (línuleg, vinstri efst, hægri efst, litastopp (0%, # 999999), litastopp (100%, # ffffff));
Bakgrunnur: -webkit-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
Bakgrunnur: -ó-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
Bakgrunnur: -ms-línuleg-halli (vinstri, # 999999 0%, #ffffff 100%);
sía: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-sía: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
Bakgrunnur: línuleg halli (vinstri, # 999999 0%, #ffffff 100%);
Næstu síðurnar í þessari einkatími útskýra hluta lóðréttar í smáatriðum og síðasta blaðsíða bendir á tól sem er frábær leið til að búa til CSS3 stig sjálfkrafa.
Sjá þetta línulega halli í aðgerð með því að nota bara CSS.
02 af 04
Búa til skurðarhleðslugildi-Hringpunkturinn
Upphafs- og stöðvunarpunktarnir ákvarða halla hallans. Flestir línulegir stigamörk eru frá toppi til botns eða frá vinstri til hægri. En það er hægt að byggja upp halli sem hreyfist á ská línu. Myndin á þessari síðu sýnir einfaldan halli sem hreyfist í 45 gráðu horn yfir myndina frá hægri til vinstri.
Horn til að skilgreina lengdarlínuna
Hornið er lína á ímyndaða hring í miðju frumefnisins. 0deg stig upp, 90deg stig til hægri, 180deg stig niður og 270deg stig til vinstri. Þú getur skilgreint hvaða horn sem er frá 0 til 359 gráður.
Þú ættir að hafa í huga að í veldi fer 45 gráðu horn frá efra vinstra horninu neðst til hægri, en í rétthyrningi eru upphafs- og endapunktarnir örlítið utan lögun eins og sjá má á myndinni.
Algengara leiðin til að skilgreina skáhallavaxta er að skilgreina horn, eins og efst til hægri og hallinn muni fara frá því horninu til hliðar. Þú getur skilgreint upphafsstöðu með eftirfarandi leitarorðum:
- efst
- rétt
- neðst
- vinstri
- miðstöð
Og þeir geta verið sameinuð til að vera nákvæmari, svo sem:
- efst til hægri
- efst til vinstri
- efst miðstöð
- neðst til hægri
- neðst til vinstri
- botn miðstöð
- hægri miðju
- vinstri miðstöð
Hér er CSS fyrir halli svipað og í myndinni, rauður til hvítur, frá hægri efst til vinstri til vinstri:
bakgrunnur: ## 901A1C;
bakgrunnsmynd: -moz-línuleg-halli (hægri efst, # 901A1C 0%, # FFFFFF 100%);
bakgrunnsmynd: -webkit-halli (línuleg, hægri efst, vinstri botn, litastopp (0, # 901A1C), litastopp (1, #FFFFFF));
Bakgrunnur: -webkit-línuleg-halli (hægri efst, # 901A1C 0%, #ffffff 100%);
Bakgrunnur: -ó-línuleg-halli (hægri efst, # 901A1C 0%, #ffffff 100%);
Bakgrunnur: -mín-línuleg-halli (hægri efst, # 901A1C 0%, #ffffff 100%);
Bakgrunnur: línuleg-halli (hægri efst, # 901A1C 0%, #ffffff 100%);
Þú gætir hafa tekið eftir því að engar IE síur eru í þessu dæmi. Það er vegna þess að IE leyfir aðeins tvær tegundir af síum: efst til botn (sjálfgefið) og vinstri til hægri (með GradientType = 1 rofi).
Sjá þetta ská línulega halli í aðgerð með því að nota bara CSS.
03 af 04
Litur hættir
Með CSS3 línulegum stigum, getur þú bætt mörgum litum við hallinn þinn til að búa til jafnvel hagkvæmari áhrif. Til að bæta þessum litum við bætirðu við fleiri litum til loka eignarinnar, aðskilin með kommum. Þú ættir að innihalda hvar á línunni litarnir ættu að byrja eða enda eins og heilbrigður.
Internet Explorer síur styðja aðeins tveir litar hættir, þannig að þegar þú byggir þessa halli ættir þú aðeins að innihalda fyrstu og aðra litina sem þú vilt birta.
Hér er CSS fyrir ofangreind 3-lit halli:
bakgrunnur: #ffffff;
bakgrunnur: -moz-línuleg-halli (vinstri, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Bakgrunnur: -webkit-halli (línuleg, vinstri efst, hægri efst, litastopp (0%, # ffffff), litastopp (51%, # 901A1C), litastopp (100%, # ffffff));
Bakgrunnur: -webkit-línuleg-halli (vinstri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Bakgrunnur: -ó-línuleg-halli (vinstri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Bakgrunnur: -mín-línuleg-halli (vinstri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
sía: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
Bakgrunnur: línuleg-halli (vinstri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Sjá þetta línulega halli með þremur litastöðvum í aðgerð með því að nota bara CSS.
04 af 04
Gerðu byggingargildi auðveldara
Það eru tvær síður sem ég mæli með til að hjálpa þér að byggja upp stig, hver þeirra hefur ávinning og galli við þá, ég hef ekki fundið stigi byggir sem gerir allt ennþá.
Ultimate CSS Gradient Generator
Þessi hallastillirinn er mjög vinsæll vegna þess að hann vinnur á svipaðan hátt og byggingarframleiðendur í forritum eins og Photoshop. Mér líkar það líka vegna þess að það gefur þér allar CSS viðbætur, ekki bara Webkit og Mozilla. Vandamálið með þessari rafall er að það styður aðeins lárétt og lóðrétt stig. Ef þú vilt gera skáhallar, þá þarftu að fara í aðra rafallinn sem ég mæli með.
CSS3 þrepamiðillinn
Þessi rafall tók mig smá tíma til að skilja en sá fyrsti, en það styður við að breyta stefnunni í ská.
Ef þú veist af öðrum CSS Gradient Generator sem þér líkar vel við þá, vinsamlegast láttu okkur vita .