01 de 04
Grádáin Líneach Tras-Brabhsálaí a chruthú le CSS3
Céimeanna Líneacha
Is é an cineál grádán is coitianta a fheiceann tú grádán líneach de dhá dathanna. Ciallaíonn sé seo go dtiocfaidh an grádán i líne dhíreach ag athrú de réir a chéile ón gcéad dath go dtí an dara ceann ar an líne sin. Taispeánann an íomhá ar an leathanach seo grádán simplí clé go deas de # 999 (liath dorcha) go #fff (bán).
Is iad na grádáin líneacha is éasca a shainiú, agus an tacaíocht is mó acu i mbrabhsálaithe. Tacaítear grádáin líneacha CSS3 i Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, agus Safari 4+. Is féidir le Internet Explorer grádáin a chur le scagaire a úsáid agus iad a thacú ar ais go IE 5.5. Ní CSS3 é seo, ach is rogha é comhoiriúnacht tras-bhrabhsálaí.
Nuair a shainíonn tú grádán is gá duit roinnt rudaí difriúla a shainmhíniú:
- Cén cineál grádáin atá líneach nó gathach
- I gcás ina dtosófaí an grádán
- Sa chás gur cheart an grádán a stopadh
- Cad iad na dathanna sa ghrádán agus cén áit ar chóir dóibh tosú agus stop a chur leo
Chun grádáin líneacha a shainiú ag baint úsáide as CSS3, scríobhann tú:
líneach-grádán ( uillinn nó taobh nó cúinne , stad dath , stad dath )
- An chéad shainíonn tú an cineál grádáin leis an ainm linear -gradient.
- Ansin, sainmhíníonn tú pointí tosaigh agus stad an grádáin ar cheann de dhá bhealach: uillinn na líne i gcéimeanna ó 0 go 359, le 0 céim ag díriú díreach suas. Nó leis an fheidhm "taobh nó cúinne", mar shampla ar chlé, ar dheis, ar bhun, agus ar bharr. Mínítear iad sin níos mionsonraithe ar an gcéad leathanach eile. Má fhágann tú iad seo, sreabhann an grádán ón mbarr go bun an eilimint.
- Ansin, sainmhíníonn tú an stopanna dath. Sainmhíníonn tú go bhfuil an dath ag stopadh leis an gcód dath agus le céatadán roghnach. Insíonn an céatadán an bhrabhsálaí nuair a thosaíonn nó a chríochnaíonn an líne leis an dath sin. Is é an réamhshocraithe na dathanna a chur go cothrom ar feadh na líne. Gheobhaidh tú níos mó faoi stadanna dath ar leathanach 3.
Mar sin, chun an grádán thuas a shainmhíniú le CSS3, scríobhann tú:
linear-gradient (clé, # 999999 0%, #ffffff 100%);
Agus é a leagan mar chúlra DIV scríobhann tú:
div {
background-image: linear-gradient (clé, # 999999 0%, #ffffff 100%;
}
Eisínteachtaí Brabhsálaí le haghaidh grádáin líneacha CSS3
Chun do ghrádán a bheith ag obair tras-bhrabhsálaí, is gá duit síntí bhrabhsálaí a úsáid don chuid is mó de na brabhsálaithe agus do scagaire le haghaidh Internet Explorer 9 agus níos ísle (2 scagairí i ndáiríre). Glacann gach ceann díobh seo na heilimintí céanna chun do ghrádán a shainmhíniú (ach amháin nach féidir leat grádáin 2-dath a shainiú in IE).
Tá Scagairí agus Síneadh Microsoft -Internet Explorer an-dúshlánach chun tacú leis, mar is gá trí líne éagsúla chun tacú leis na leaganacha éagsúla bhrabhsálaí. Chun an grád thuas a fháil go grádán bán, scríobhfeadh tú:
/ * IE 5.5-7 * /
scagaire: 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 (ar chlé, # 999999 0%, #ffffff 100%);
Síneadh Mozilla- Oibríonn an -moz-síneadh mar mhaoin CSS3, díreach leis an -moz-extension. Chun an grádán thuas a fháil le haghaidh Firefox, scríobh:
-moz-linear-gradient (clé, # 999999 0%, #ffffff 100%);
Síneadh Opera- Cuireann síneadh -o-síneadh le Opera 11.1+. Chun an grádán thuas a fháil, scríobh:
-o-línear-grádán (ar chlé, # 999999 0%, #ffffff 100%);
Síneadh Gréasáin - Tá an t-síneadh -webkit-síneadh ag obair go leor cosúil leis an maoin CSS3. Chun an grádán thuas a shainiú do Safari 5.1+ nó Chrome 10+ scríobhann tú:
-webkit-linear-gradient (clé, # 999999 0%, #ffffff 100%);
Tá leagan níos sine den síneadh Webkit ann freisin a oibríonn le Chrome 2+ agus Safari 4+. Sa sé, sainmhíníonn tú an cineál grádáin mar luach, seachas in ainm na maoine. Chun an grádán liath go bán a fháil leis an síneadh seo, scríobh:
-webkit-gradient (líneach, barr chlé, barr ceart, dath-stad (0%, # 999999), dath-stad (100%, # ffffff));
Cód CSS Gradaim Líneach Iomlán CSS3
Chun tacaíocht iomlán tras-bhrabhsálaí a fháil chun an grádán liath go bán a fháil thuas ba chóir duit dath soladach inbhéagach a chur san áireamh do bhrabhsálaithe nach dtacaíonn le grádáin, agus gurb é an rud deireanach gur stíl CSS3 do bhrabhsálaithe atá go hiomlán comhlíontach. Mar sin, scríobhann tú:
cúlra: # 999999;
cúlra: -moz-linear-gradient (clé, # 999999 0%, #ffffff 100%);
cúlra: -webkit-gradient (líneach, barr chlé, barr ceart, dath-stad (0%, # 999999), dath-stad (100%, # ffffff));
cúlra: -webkit-linear-gradient (clé, # 999999 0%, #ffffff 100%);
cúlra: -o-linear-gradient (clé, # 999999 0%, #ffffff 100%);
cúlra: -ms-linear-gradient (clé, # 999999 0%, #ffffff 100%);
scagaire: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
cúlra: linear-gradient (clé, # 999999 0%, #ffffff 100%);
Míníonn na leathanaigh seo chugainn sa teagasc seo na codanna de grádán níos mionsonraithe, agus cuireann an leathanach deireanach tú le huirlis ina bhealach iontach chun grádáin CSS3 a chruthú go huathoibríoch.
Féach an grádán líneach seo i ngníomh ag baint úsáide as díreach CSS.
02 de 04
Grádáin Trasnánach a chruthú - Uillinn an Ghradam
Cinntíonn na pointí tosaithe agus stad uillinn an grádáin. Tá an chuid is mó de na grádáin líneacha ó bharr go bun nó ó chlé go deas. Ach is féidir grádán a thógáil a ghluaiseann ar líne trasnánach. Taispeánann an íomhá ar an leathanach seo grádán simplí a ghluaiseann i 45ú uillinn thar an íomhá ó dheas go clé.
Uillinneacha chun an Líne Grádáin a shainmhíniú
Is é an uillinn líne ar chiorcal samhlaíochta i lár an eilimint. 0deg pointí suas, 90deg pointe ar dheis, 180deg pointe síos, agus 270 pointe ar an taobh clé. Is féidir leat aon uillinn a shainiú ó 0 go 359 céim.
Ba chóir duit a thabhairt faoi deara go mbogann uillinn 45 céim sa chúinne ar bharr na láimhe clé ar bharr na cearnóg ar bharr na láimhe clé, ach i dronuilleog tá na pointí tosaigh agus críochnaithe beagán lasmuigh den chruth, mar is féidir leat a fheiceáil san íomhá.
Is é an bealach is coitianta a bhaineann le grádán trasnánach a shainiú cúinne a shainmhíniú, ar nós an ceart ar dheis agus bogfaidh an grádán ón gcúinne sin go dtí an chúinne os coinne. Is féidir leat an tosú tosaigh a shainiú leis na heochairfhocail seo a leanas:
- barr
- ceart
- bun
- ar chlé
- ionad
Agus is féidir iad a chomhcheangal le bheith níos sainiúla, mar shampla:
- ar dheis
- barr ar chlé
- ionad barr
- ar dheis ar dheis
- bun ar chlé
- lár bun
- ionad ceart
- lár chlé
Seo an CSS le grádán cosúil leis an gceann sa phictiúr, dearg go bán ag bogadh ón gcúinne ar dheis ar bharr na láimhe clé:
cúlra: ## 901A1C;
cúlra-íomhá: -moz-linear-gradient (barr ceart, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (líneach, barr ceart, bun clé, dath-stad (0, # 901A1C), dath-stad (1, #FFFFFF);
cúlra: -webkit-linear-gradient (barr ceart, # 901A1C 0%, #ffffff 100%);
cúlra: -o-linear-gradient (barr ceart, # 901A1C 0%, #ffffff 100%);
cúlra: -ms-linear-gradient (barr ceart, # 901A1C 0%, #ffffff 100%);
cúlra: linear-gradient (barr ceart, # 901A1C 0%, #ffffff 100%);
D'fhéadfá a bheith faoi deara nach bhfuil aon scagairí IE san sampla seo. Is é sin toisc go gceadaíonn IE ach dhá chineál scagairí: barr go bun (an réamhshocraithe) agus clé go deas (leis an athrú GradientType = 1).
Féach an grádán líneach trasnánach i ngníomh ag baint úsáide as díreach CSS.
03 de 04
Stopann Dath
Le grádáin líneacha CSS3, is féidir leat il dathanna a chur le do ghrádán chun éifeachtaí fancier fiú a chruthú. Chun na dathanna seo a chur leis, cuirfidh tú dathanna breise suas go dtí deireadh do mhaoin, arna scartha le comaí. Ba chóir duit a chur san áireamh cén áit ar chóir na dathanna a thosú nó a chríochnú ar an líne chomh maith.
Ní thacaíonn scagairí Internet Explorer ach dhá stopadh dath, agus mar sin nuair a thógann tú an grádán seo, níor chóir duit ach an chéad agus an dara dathanna a theastaíonn uait a thaispeáint.
Seo an CSS don grádán 3-dath thuas:
cúlra: #ffffff;
cúlra: -moz-linear-gradient (clé, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
cúlra: -webkit-gradient (líneach, barr chlé, barr dheis, dath-stad (0%, # ffffff), dath-stad (51%, # 901A1C), dath-stad (100%, # ffffff));
cúlra: -webkit-linear-gradient (clé, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
cúlra: -o-linear-gradient (clé, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
cúlra: -ms-linear-gradient (clé, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
scagaire: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
cúlra: linear-gradient (clé, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Féach an grádán líneach seo le trí stór dathanna i ngníomh ag baint úsáide as díreach CSS.
04 de 04
Déan Grádú Foirgníochta níos Éasca
Tá dhá shuíomh ann, molaim duit cabhrú leat grádáin a thógáil, tá sochair agus míbhuntáistí ag gach ceann acu, ní bhfuair mé tógálaí grádáin a dhéanann gach rud fós.
Gineadóir Gradam CSS deiridh
Tá an gineadóir grádán seo an-tóir mar a dhéanann sé ar bhealach cosúil le tógálaithe grádáin i gcláir cosúil le Photoshop. Is maith liom é freisin toisc go dtugann sé leat na síneadh CSS go léir, ní hamháin Webkit agus Mozilla. Is í an fhadhb leis an gineadóir seo ná tacaíonn sé ach le grádáin chothrománacha agus ingearacha. Más mian leat grádáin trasnáin a dhéanamh, caithfidh tú dul chuig an gineadóir eile a mhol mé.
Gineadóir Gradient CSS3
Ghlac an gineadóir seo beagán níos faide le tuiscint ná an chéad cheann, ach ní thacaíonn sé an treo a athrú go trasnán.
Má tá a fhios agat faoi Ghineadóir Gradient CSS eile gur mhaith leat níos fearr ná iad seo, cuir in iúl dúinn .