01 of 04
Famoronana lozam-pifaneraseran'ny lozisialy miaraka amin'ny CSS3
Linear Gradients
Ny karazam-pahazavana mahazatra indrindra ho hitanao dia ny halavan'ny loko roa. Midika izany fa ny dian-dandy dia hifindra amin'ny tsipika miova tsikelikely avy amin'ny loko voalohany ka hatramin'ny faharoa amin'io tsipika io. Ny sary eo amin'ity pejy ity dia mampiseho ny grady havia havanana amin'ny # 999 (mainty mainty) mankany #fff (fotsy).
Ny dian-dàlam-pandaminana dia mora indrindra hamaritana, ary manana ny fanohanana be indrindra amin'ny navigateur. CSS3 gradient linearis dia tohana amin'ny Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, ary Safari 4+. Ny Internet Explorer dia afaka manampy fitaratra amin'ny fampiasana sivana ary manohana azy ireo amin'ny IE 5.5. Tsy CSS3 izany, fa safidy azo atao amin'ny fifanaraham-panadinana.
Rehefa mamaritra tsikelikely ianao dia mila mamaritra zavatra maro samihafa:
- Ny karazan-dian-dandy ito-linear na radial
- Aiza no tokony hanombohan'ilay maniry
- Izay tokony hijanona
- Inona ny lokony eo amin'ny halavirana ary aiza izy ireo no manomboka sy mijanona
Mba hamaritana ny dian-dàlana amin'ny fampiasana CSS3 dia soraty hoe:
linear-gradient ( angom-pahefana na sehatra na efamira , loko marevaka , loko matevina )
- Voalohany dia mamaritra ny karazana gradient amin'ny anarana linear- gradient.
- Avy eo, mamaritra ny fanombohana sy ny fijanonana ny tendrony amin'ny iray amin'ireo fomba roa ianao: ny tsipiky ny tsipika amin'ny degrees 0 hatramin'ny 359, miaraka amin'ny 0 degrees manondro avy hatrany. Na amin'ny asa "lafiny na zoro", toy ny havia, havanana, ambany, ary ambony. Hohazavaina amin'ny antsipiriany amin'ny pejy manaraka izany. Raha mandao azy ireo ianao dia hidina avy eny an-tampony mankany amin'ny farany ambany ilay elanelana.
- Dia mamaritra ny fijanonan'ny loko. Azonao atao ny mamaritra ny fijanonan'ny loko amin'ny loko misy loko sy ny isan-jato. Ny isan-jato dia milaza amin'ny tranonkala izay manomboka na manomboka amin'ny loko. Ny votoatiny dia ny mametraka ny loko eny amin'ny tsipika. Hianatra bebe kokoa momba ny fijanonan'ny loko eo amin'ny pejy 3 ianao.
Noho izany, mba hamaritana ny gradient etsy ambony miaraka amin'ny CSS3, manoratra ianao:
linear-gradient (havia, # 999999 0%, #ffffff 100%);
Ary mba hametrahana azy ho toy ny fototra ivan'ny DIV dia soraty hoe:
div {
background-image: linear-gradient (left, # 999999 0%, #ffffff 100%;
}
Fitaovana fampiroboroboana ho an'ny CSS3 Linear Gradients
Mba hahatonga ny mpilatsaka haingam-pandeha hiasa mpitety tranokala, dia mila mampiasa tranokala ho an'ny ankamaroan'ny navigateur sy sivana ianao ho an'ny Internet Explorer 9 ary ambany (2 filters). Ireo rehetra ireo dia mandray ireo singa mitovy amin'ny famaritana ny gradientanao (afa-tsy izay azonao atao ihany ny mamaritra loko 2-loko ao amin'ny IE).
Microsoft Filters sy Extension - Internet Explorer no sarotra indrindra hanohanana, satria mila teboka telo ianao hanohanana ny tranokala hafa. Mba hahazoana ilay loko etsy ambony mankany amin'ny fotsy fotsy dia hanoratra ianao:
/ * IE 5.5-7 * /
filtre: 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 * /
-mg-linear-gradient (havia, # 999999 0%, #ffffff 100%);
Fampidiran-tsoan'ny Mozilla -To-extension-dia miasa toy ny fananana CSS3, miaraka amin'ny -moz-extension. Mba hahazoana ny tendrony ambony ho an'i Firefox, soraty hoe:
-moz-linear-gradient (havia, # 999999 0%, #ffffff 100%);
Ny Opera Extension -The -o- extension dia manampy tsindry ho an'ny Opera 11.1+. Mba hahazoana ny mari-panaitra etsy ambony dia soraty hoe:
-o-linear-gradient (havia, # 999999 0%, #ffffff 100%);
Webkit Extension -De -webkit- extension dia miasa tahaka ny an'ny CSS3. Mba hamaritana ny halavoana etsy ambony ho an'ny Safari 5.1+ na Chrome 10+ dia soraty hoe:
-webkit-linear-gradient (havia, # 999999 0%, #ffffff 100%);
Misy koa ny dikan-teny maoderina amin'ny tranonkala Webkit izay miasa miaraka amin'i Chrome 2+ sy Safari 4+. Ao anatin'izany dia mamaritra ny karazana gradient ho toy ny lanjany ianao, fa tsy amin'ny anaran'ny tompony. Mba hahazoana ny volo amin'ny fotsy fotsy miaraka amin'ity fanitarana ity, soraty hoe:
-webkit-gradient (linear, ambony havia, ambony ambony, lokony (0%, # 999999), lokony (100%, # ffffff);
Feno CSS3 Linear Gradient CSS Code
Ho an'ny mpanohana mpizaha-tsivana feno izay ahafahana maka ny loko volomparasy ho an'ny fotsy hoditra dia tokony hampidirinao voalohany ny lokon'ny lozam-pifamoivoizana ho an'ny navigateur izay tsy manohana ny fitaratra, ary ny endriny farany dia tokony ho ny CSS3 ho an'ny navigateur izay mifanaraka tsara. Noho izany, manoratra ianao:
fototra: # 999999;
fototra: -moz-linear-gradient (havia, # 999999 0%, #ffffff 100%);
Ny habaka: -webkit-gradient (linear, havia havia, ambony ambony, lokony (0%, # 999999), lokony (100%, # ffffff);
background: -webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
fototra: -o-linear-gradient (havia, # 999999 0%, #ffffff 100%);
fototra: -ms-linear-gradient (havia, # 999999 0%, #ffffff 100%);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms -filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: linear-gradient (left, # 999999 0%, #ffffff 100%);
Ireo pejy manaraka ao amin'ity lesona ity dia manazava amin'ny ampahany amin'ny antsipirihany ny ampahany amin'ny gradient, ary ny pejy farany dia manondro anao amin'ny fitaovana iray izay fomba tsara indrindra hananganana ny grady CSS3 automatique.
Jereo ity tsikelikely ity amin'ny fampiasana CSS.
02 of 04
Famoronana Diagonal Gradients-Ny Angan'ny Gradient
Ny fivoasana sy ny fijanonana dia mamaritra ny lanjan'ny gradient. Ny ankamaroan'ny tsikelikely dia avy any ambony na ambany ka hatrany ankavanana. Azo atao anefa ny manangana tsikelikely izay mihetsika eo amin'ny diagonal. Ny sary eo amin'ity pejy ity dia mampiseho tsikelikely tsotra izay mihodina eo amin'ny 45 degre amin'ny angona avy eo ankavanana miankavia.
Andalana hamaritana ny tsipika mahitsy
Ny tsipika dia tsipika iray eo amin'ny faribolana iray eo afovoan'ny singa. 0deg pointed up, point 90deg to the right, point 180deg down, and point 270deg to the left. Azonao atao ny mamaritra ny angona amin'ny 0 hatramin'ny 359 degre.
Tokony hojerena fa eo amin'ny sehatra iray dia angidina 45 degre avy eo amin'ny zoro ambony havia ka hatrany ambany ankavanana, fa eo amin'ny tohatra iray dia kely dia kely ny endriny sy ny tendrony, araka izay hitanao amin'ny sary.
Ny fomba mahazatra kokoa hamaritana ny halaviran-diagonal dia ny mamaritra ny zoro, toy ny ambony ambony ary ny gradient dia hivoatra avy eo amin'io zorony io mankany amin'ny lafiny mifanohitra. Azonao atao ny mamaritra ny lisitry ny fanombohana miaraka amin'ireto teny fanalahidy manaraka ireto:
- ambony
- marina
- ambany
- sisa
- foibe
Ary afaka mifangaro kokoa izy ireo, toy ny:
- top right
- ambony havia
- afovoany
- ambany havanana
- ambany havia
- ambany foibe
- afovoany
- afovoany havia
Ity ny CSS ho an'ny gradient mitovy amin'ny sary aseho, mena ka fotsy miala avy eo amin'ny ilany havia havanana amin'ny farany ambany:
fototra: ## 901A1C;
background-image: -moz-linear-gradient (top right, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (linear, right top, left bottom, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));
background: -webkit-linear-gradient (top right, # 901A1C 0%, #ffffff 100%);
fototra: -o-linear-gradient (ambony ambony, # 901A1C 0%, #ffffff 100%);
fototra: -ms-linear-gradient (ambony ambony, # 901A1C 0%, #ffffff 100%);
background: linear-gradient (top right, # 901A1C 0%, #ffffff 100%);
Mety ho hitanao fa tsy misy filalaovana IE ao amin'ity ohatra ity. Izany dia noho i IE irery ihany no mamela karazana filters roa: ambony mankany ambany (default) ary havia miankavanana (miaraka amin'ny gradientType = 1 switch).
Jereo ity diagonal linear gradient amin'ny hetsika amin'ny fampiasana CSS fotsiny.
03 of 04
Mijanona ny loko
Miaraka amin'ny dian-tsainan'ny CSS3, azonao atao ny manampy ny loko maromaro ho an'ny gradientanao mba hamoronana fiantraikany eo amin'ny lozisialy. Hanampy ireo loko ireo, dia manampy loko fanampiny ianao amin'ny faran'ny ny fanananao, voasaraka amin'ny commas. Tokony hampiditra ny toerana eo amin'ny tsipika ny loko tokony hanombohana na hamarana azy koa.
Ny solosaina Internet Explorer dia manohana ny loko roa ihany, ka rehefa manamboatra an'io tsikelikely io dia tokony hampiditra ny loko voalohany sy faharoa tianao hampisehoana.
Ireto ny CSS amin'ny dingan'ny 3-loko:
background: #ffffff;
fototra: -moz-linear-gradient (havia, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Ny votoatiny azo atonta printy Rohy maharitra Fampahalalana mikasika ny pejy Élément Wikidata Hitanisa ity pejy ity Amin'ny tenim-pirenena hafa Français English
fototra: -webkit-linear-gradient (havia, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fototra: -o-linear-gradient (havia, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fototra: -ms-linear-gradient (havia, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
fototra: linear-gradient (havia, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Jereo ity halavam-pandrefesana misy loko misy loko telo ity amin'ny fampiasana CSS fotsiny.
04 of 04
Ataovy mora kokoa ny fanorenana ny grady
Misy tranokala anankiroa izay soso-kevitro hanampy anao hanangona haingam-pandeha, samy manana tombony sy tsy fahampiana amin'izy ireo aho, tsy nahita mpanamboatra gradient izay manao ny zavatra rehetra.
CSS
Ity mpilalao gitara ity dia malaza be satria manao toy izany amin'ny fananganana gradient amin'ny programa toy ny Photoshop. Tiako koa izany satria manome anao ny fampiroboroboana CSS, fa tsy Webkit sy Mozilla fotsiny ihany. Ny olana amin'ity mpamorona ity dia ny fanamafisana ny fampisehoana horizontal sy vertical. Raha te hanao diabeta diagonaly ianao, dia tsy maintsy mandeha any amin'ny mpamorona hafa azafady.
CSS3 Generient Generator
Ity mpamorona ity dia nitondra ahy fotoana fohy mba hahatakatra kokoa noho ny voalohany, saingy izy dia manohana ny fanovana ny fitarihana amin'ny diagonaly.
Raha fantatrao fa hafa ny CSS Gradient Generator izay tianao kokoa noho ireo, azafady mba ampahafantaro anay .