01 de 04
A 'cruthachadh ceumannan loidhneach thar brabhsair le CSS3
Ceumannan loidhneach
Is e an seòrsa caisead as cumanta a chì thu caisead loidhneach de dhà dhath. Tha seo a 'ciallachadh gun gluais an caisead ann an loidhne dhìreach ag atharrachadh mean air mhean bhon chiad dath gu an dàrna taobh air an loidhne sin. Tha an ìomhaigh air an duilleig seo a 'sealltainn caisead sìmplidh clì gu deas de # 999 (liath dorcha) gu #fff (geal).
Is e gradartan loidhneach as fhasa a mhìneachadh, agus an taic as motha a th 'ann am brabhsairean. Tha ìrean ìre CSS3 a 'faighinn taic ann an Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, agus Safari 4+. Faodaidh Internet Explorer caochladh a chleachdadh le criathar agus gan toirt air ais gu IE 5.5. Chan e CSS3 a tha seo, ach tha e na roghainn airson co-chòrdadh thar-bhrabhsair.
Nuair a mhìnicheas tu caisead feumaidh tu grunn rudan eadar-dhealaichte a mhìneachadh:
- Dè an seòrsa caisead a tha e-loidhne no radial
- Far am bu chòir an caisead tòiseachadh
- Far am bu chòir an caisead stad
- Dè na dathan anns a 'chaisead agus càite am bu chòir dhaibh tòiseachadh agus stad
Gus tomhas-lìonaidh loidhneail a mhìneachadh le CSS3, sgrìobhaidh tu:
gradant loidhneach ( ceàrn no taobh no oisean , stad dath , stad dath )
- An toiseach tha thu a 'mìneachadh an seòrsa caisead leis an ainm linear -gradient.
- An uairsin, bidh tu a 'mìneachadh puingean tòiseachaidh is stad a' chaiseid ann an aon de dhà dhòigh: ceàrn na loidhne ann an ceumannan bho 0 gu 359, le 0 ceum a 'sealltainn dìreach gu dìreach. No leis an obair "taobh no oisean", mar chlì, deas, bonn, agus mullach. Thèid iad sin a mhìneachadh ann an dòigh nas mionaidiche air an ath dhuilleig. Ma dh'fhàgas tu iad sin, sgaoilidh an caisead bhon mhullach gu bonn an eileamaid.
- An uairsin bidh thu a 'mìneachadh gu bheil an dath a' stad. Bidh thu a 'mìneachadh gu bheil an dath a' stad leis a 'chòd dathte agus a' chuibhreann roghainneil. Tha an àireamh sa cheud ag innse don bhrobhsair far a bheil an loidhne a 'tòiseachadh no a' crìochnachadh leis an dath sin. Is e am prìomh-amas na dathan a chur gu cothrom air an loidhne. Gheibh thu barrachd fiosrachaidh mu stadan dath air duilleag 3.
Mar sin, gus an caisead gu h-àrd a mhìneachadh le CSS3, sgrìobhaidh tu:
gradant loidhneach (clì, # 999999 0%, #ffffff 100%);
Agus a shuidheachadh mar chùl-raon de DIV a sgrìobh thu:
div {
background-image: linear-gradient (clì, # 999999 0%, #ffffff 100%;
}
Leudachaidhean air a 'bhrabhsair airson gradsan loidhneail CSS3
Gus an caisead agad a bhith ag obair thar-bhrabhsair, feumaidh tu leudachaidhean brabhsair a chleachdadh airson a 'mhòr-chuid de bhrabhsairean agus criathrag airson Internet Explorer 9 agus nas ìsle (ann an 2 sgrìoban). Gabhaidh a h-uile gin dhiubh na h-aon eileamaidean gus an caisead agad a mhìneachadh (ach a-mhàin nach urrainn dhut ach ceumannan 2-dath a mhìneachadh ann an IE).
Is e Sgèilearan agus Leudachadh Microsoft -Internet Explorer an dùbhlan as dùbhlanaiche airson taic a thoirt oir tha trì loidhnichean eadar-dhealaichte a dhìth ort gus taic a thoirt do na diofar sheòrsachan brabhsair. Gus faighinn an caisead gu h-àrd glas gu geal bhiodh tu a 'sgrìobhadh:
/ * IE 5.5-7 * /
criathar: 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 (clì, # 999999 0%, #ffffff 100%);
Leudachadh Mozilla -Tha an -moz- leudachadh ag obair mar seilbh CSS3, dìreach leis an -moz- extension. Gus an caisead gu h-àrd fhaighinn airson Firefox, sgrìobhaibh:
-moz-linear-gradient (clì, # 999999 0%, #ffffff 100%);
Leudachadh Opera - Cuiridh an leudachan -o-leud ris an Opera 11.1+. Gus an caisead gu h-àrd fhaighinn, sgrìobhaibh:
grad---loidhne-loidhne (clì, # 999999 0%, #ffffff 100%);
Leudachadh Webkit -The -webkit-extension ag obair gu math coltach ri seilbh CSS3. Gus an caisead gu h-àrd a mhìneachadh airson Safari 5.1+ no Chrome 10+ tha thu a 'sgrìobhadh:
-webkit-linear-gradient (clì, # 999999 0%, #ffffff 100%);
Tha cuideachd dreach nas sine den leudachadh Webkit a tha ag obair le Chrome 2+ agus Safari 4+. Ann an sin, bidh thu a 'mìneachadh an seòrsa caisead mar luach, seach ann an ainm an togalaich. Gus an caisead glas gu geal fhaighinn leis an leudachadh seo, sgrìobh:
-webkit-gradient (loidhne loidhne, clì, mullach deas, stad-dath (0%, # 999999), stad dath (100%, # ffffff));
Còd CSS Ceumnach Làn-làn CSS3
Airson làn-taic thar-bhrabhsair gus an caisead glas gu geal a shuidheachadh os cionn, bu chòir dhut dath làidir a thoirt a-steach an toiseach airson brabhsairean nach eil a 'toirt taic do ghràin, agus bu chòir gum biodh an rud mu dheireadh stoidhle CSS3 airson brabhsairean a tha gu tur a' gèilleadh. Mar sin, sgrìobhaidh tu:
cùl-sgeul: # 999999;
cùl-raon: -moz-linear-gradient (clì, # 999999 0%, #ffffff 100%);
cùl-sgeul: -webkit-gradient (mullach loidhne, clì, mullach deas, stad-dath (0%, # 999999), stad dathte (100%, # ffffff));
cùl-sgeul: -webkit-linear-gradient (clì, # 999999 0%, #ffffff 100%);
cùl-raon: -o-linear-gradient (clì, # 999999 0%, #ffffff 100%);
cùl-fhiosrachadh: -ms-linear-gradient (clì, # 999999 0%, #ffffff 100%);
criathar: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
cùl-raon: caiseal loidhneach (clì, # 999999 0%, #ffffff 100%);
Tha na h-ath dhuilleagan anns an oideachadh seo a 'mìneachadh na pàirtean de chaisead ann an dòigh nas mionaidiche, agus tha an duilleag mu dheireadh a' comharrachadh dhut inneal a tha na dhòigh sàr-mhath airson gradsan CSS3 a chruthachadh gu fèin-ghluasadach.
Faic an caisead loidhneil seo le bhith a 'cleachdadh dìreach CSS.
02 de 04
A 'cruthachadh ceumannan diagonal-Ceàrn a' chruinneachaidh
Bidh na puingean tòiseachaidh is stad a 'suidheachadh ceàrn a' chaisead. Tha a 'mhòr-chuid de dh' fhaidean sreathach bho bhàrr gu bonn no clì gu deas. Ach tha e comasach caisead a thogail a ghluaiseas air loidhne eadar-dhealaichte. Tha an ìomhaigh air an duilleig seo a 'sealltainn caisead sìmplidh a ghluaiseas ann an ceàrn 45 troigh thairis air an ìomhaigh bho dheas gu clì.
Angles gus loidhne an caisead a mhìneachadh
Tha an ceàrn na loidhne air cearcall mac-meanmnach ann am meadhan an eileamaid. 0deg puingean suas, 90deg puingean air an làimh dheis, 180deg puingean sìos, agus 270deg puingean air an làimh chlì. Faodaidh tu ceàrn sam bith a mhìneachadh eadar 0 gu 359 ceum.
Bu chòir dhut a thoirt fa-near gu bheil ceàrn ceàrnagach ann an ceàrnag, a 'gluasad bhon oisean gu h-àrd air an taobh chlì chun a' bhonn gu h-àrd, ach ann an ceart-cheàrnach tha na puingean tòiseachaidh is ceann a-muigh beagan a-mach air an cruth, mar a chì thu san ìomhaigh.
Is e an dòigh as cumanta airson caisead trastanach a mhìneachadh gus oisean a mhìneachadh, mar a 'bharr gu h-àrd agus gluaisidh an caisead bhon oisean sin gu oisean mu choinneamh. Faodaidh tu an suidheachadh tòiseachaidh a mhìneachadh leis na prìomh fhaclan a leanas:
- mullach
- deas
- aig a 'bhonn
- clì
- ionad
Agus faodar an cur còmhla gus a bhith nas sònraichte, mar:
- air an làimh dheis
- mullach clì
- àrd-ionad
- deas gu deas
- gu h-ìseal clì
- aig a 'bhonn
- ionad ceart
- ionad clì
Seo an CSS airson caisead coltach ris an fhear san dealbh, dearg gu geal a 'gluasad bhon oisean gu h-àrd air an làimh dheis gu clì gu h-ìseal:
cùl-sgeul: ## 901A1C;
background-image: -moz-linear-gradient (mullach deas, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (mullach loidhneach, deas, clì, stad-dath (0, # 901A1C), stad-dath (1, #FFFFFF);
cùl-sgeul: -webkit-linear-gradient (mullach deas, # 901A1C 0%, #ffffff 100%);
cùl-raon: -o-linear-gradient (mullach deas, # 901A1C 0%, #ffffff 100%);
cùl-raon: -ms-linear-gradient (mullach deas, # 901A1C 0%, #ffffff 100%);
cùl-raon: grad-loidhne (mullach deas, # 901A1C 0%, #ffffff 100%);
Is dòcha gu bheil thu air mothachadh nach eil sgàilearan IE ann san eisimpleir seo. Is ann air sgàth 's gu bheil IE a' ceadachadh dà sheòrsa de sgàilearan a-mhàin: gu h-àrd (bun-stèidh) agus clì gu deas (leis an tionndadh GradientType = 1).
Faic an caisead loidhne-ghuthach seo ann an gnìomh le dìreach CSS.
03 de 04
Stad dath
Le ìrean grada CSS3, faodaidh tu iomadh dathan a chur ris a 'chaisead agad gus buaidh eadhon fianaidh a chruthachadh. Gus na dathan sin a chur ris, cuiridh tu dathan a bharrachd gu deireadh an togalaich agad, air an sgaradh le cromagan. Bu chòir dhut a bhith a 'toirt a-steach càite air an loidhne bu chòir dha na dathan tòiseachadh no crìoch a chur orra cuideachd.
Chan eil sgiobannan Internet Explorer a 'toirt taic dha dà dhroch dath, agus mar sin nuair a thogas tu an caisead seo, cha bu chòir dhut ach na dathan agus an dàrna dath a tha thu airson a thaisbeanadh a thoirt a-steach.
Seo an CSS airson an caisead 3-dath gu h-àrd:
cùl-sgeul: #ffffff;
cùl-raon: -moz-linear-gradient (clì, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
cùl-sgeul: -webkit-gradient (mullach loidhne, clì, mullach deas, stad-dath (0%, # ffffff), stad dath (51%, # 901A1C), stad dath (100%, # ffffff));
cùl-sgeul: -webkit-linear-gradient (clì, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
cùl-raon: -o-linear-gradient (clì, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
cùl-raon: -ms-linear-gradient (clì, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
criathar: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
cùl-raon: caiseal loidhneach (clì, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Faic an caisead loidhneach seo le trì dathan a 'dol an sàs le bhith a' cleachdadh CSS.
04 de 04
Dèan togalaichean nas fhasa nas fhasa
Tha dà làrach a tha mi a 'moladh airson do chuideachadh le bhith a' togail gradhan, tha buannachdan agus duilgheadasan aca uile, chan eil mi air neach-togail caisead a lorg a nì a h-uile càil fhathast.
Gineadair deireannach Gradam CSS
Tha an gineadair caisead seo mòr-chòrdte oir tha e a 'coileanadh ann an aon dòigh ri luchd-togail caisead ann am prògraman leithid Photoshop. Is toigh leam cuideachd e seach gu bheil e a 'toirt dhut na leudachaidhean CSS uile, chan e dìreach Webkit agus Mozilla. Is e an trioblaid leis a 'ghineadair seo nach eil e a' toirt taic ach do ghrunndan còmhnard agus dhìreach. Ma tha thu airson gradhan cruinneag a dhèanamh, feumaidh tu a dhol don ghineadair eile a tha mi a 'moladh.
Generator Gradient Generator
Thug an gineadair seo beagan nas fhaide dhomh airson a thuigsinn na a 'chiad fhear, ach tha e a' toirt taic do bhith ag atharrachadh an stiùiridh gu trastanach.
Ma tha fios agad air Generator Gradient eile a tha thu ag iarraidh nas fheàrr na iad sin, leig fios thugainn .