01 of 04
Daxistina Cîhan-Browser Linear Gradients bi CSS3
Grêdankên Linear
Pirtûka herî gelemperî ya ku hûn ê bibînin, pisîkek rêzek du rengan e. Ev tê wateya ku wê pêdiviyek di nav rengê yekem de rengê yekser rengê bi rengê zûtirîn veguherîne di nav rengê yekemîn de. Wêne li ser vê rûpelê ji # 999 (grayek tarî) bi #ff (spî) çepgir a çepgir a hêsan nîşan dide.
Grêdankên Linear e ku eşkere ye, û piştevanîya herî gerdûnan hene. CSS3 linear gradients di Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, û Safari 4+ piştgirî têne kirin. Internet Explorer dikare bikarhênerên bi karûbaran bikar bînin û piştevanîya IE 5.5 re piştgirî dikin. Ev CSS3 ne, lê ji bo hevgirtina cross-browser alternatîf e.
Dema ku hûn hûrgelek diyar bike, divê hewceyê ku hin tiştên cûda cuda bike:
- Çi cûreyek hûrgelî ev e-linear an radial
- Li ku derê destûra dest pê dike
- Li ku derê bikişînin
- Çi rengên di çepê de hene û ku ew dest pê bikin û rawestînin
Ji bo CSS3 bikarhênerên lîarar diyar bike, hûn binivîse:
linear-gradient ( angle an jî anê , kişandina rengê, asta rengî )
- Pêşî hûn bi celebê navnîşê bi navê linear- gradî ve bike.
- Piştre, hûn di destpêka du awayan de destpêk û destûra bisekinin: Hêza rêzikê di navbera distanan de ji 0 heta 359, bi 0 dersan bi rasterast dakêşin. An bi karûbarê "alî an kor", wekî çepê, rast, jêrîn, û jor. Ev di rûpelê paşîn de bêtir agahdarî bêne ravekirin. Heke hûn ji van derveyî derketin, hûrgel dê ji binê binê binê elementê.
- Piştre hûn stopsên rengê xweş bike. Hûn bi rengê kodê rengê û rêjeya alternatîf eşkere dikin. Serî heger gerokê ku li ser rêza xwe an bi rengê dest bi vekişîne an dawî bike. Peldank e ku rengên bi rengê bi heman rengî re cih bikin. Hûn ê di warê pirtûka 3ê de rengê bêtir hîn bibin.
Ji ber vê yekê, ji bo CSS3-ê jorîn eşkere bike, hûn binivîsin:
linear-gradient (çep, # 999999 0%, #ffffff 100%);
Û ji bo ku hûn paşê paşnavê DIV bikin, hûn binivîse:
div {
Peldanka wêneyê: linear-gradient (çep, # 999999 0%, #ffffff 100%;
}
Pêşveçûna gerokên ji bo CSS3 Linear Gradients
Ji bo ku hûn pêdiviya karûbarê cross-browser karibin, divê hûn ji bo piranî browsers û felterek ji bo Internet Explorer 9 bikar bînin û (bi rastî 2 filters). Hemî van heman elementan digire ku ji te re pirtûka xwe binivîse (Ji bilî hûn tenê tenê di IE-rengên grîpên bi IE de define).
Fîlter û Daxistina Microsoft-ê Explorerê herî girîng e ku piştevaniya piştevanîya, ji ber ku hûn sê pêdiviyên pêdivî ye ku ji bo guhertoya gerokên cuda cuda bikin. Ji bo ku hûn jorîn li spî pêdivî ye ku hûn binivîsin:
/ * IE 5.5-7 * /
fîlterê: 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 (çep, # 999999 0%, #ffffff 100%);
Daxistina Mozilla -The -moz-dirêjkirina xebatên mîna CSS3, karûbarên ku bi -moz- dirêjkirina kar dike. Ji bo ku ji bo Firefox ji bo Firefoxê bigire, binivîse:
-moz-linear-gradient (çep, # 999999 0%, #ffffff 100%);
Extra Extension -The-expansion-gradients add to Opera 11.1+. Ji bo ku pirtûka jorîn bigire, binivîse:
-o-linear-gradient (çep, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- dirêjkirina pelê pir mîna CSS3 xaniyê kar dike. Ji bo ku ji bo Safari 5.1+ an jî 10-ê Chrome-ê de ji we re binivîse,
-webkit-linear-gradient (çep, # 999999 0%, #ffffff 100%);
Vebijêrkeke kevntir ya ya dirêjkirina Webkit heye ku bi 2+ Chrome-ê û Safari 4+ dixebite. Di vê navnîşê de hûn ji nirxa mêjûyê wek nirxek nirxandin, ji bilî nav navê milkê. Ji bo vê dirêjkirina vê pelê bi rengê spî veşêre, binivîse:
-webkit-gradient (rûpela çepê, top top, reng-stop (0%, # 999999), reng-bend (100%, # ffffff));
Koda CSS-ya Full CSS3 Linear Gradient
Ji bo piştgiriya krîza gerdûnî ya ku hûn ji jorên spî yên spî yên spî re bigirin, divê hûn yekem ji rengên berbiçav binivîsin ji bo gerokên ku piştgiriya gradientsan nabin, û paşîn neyê divê ji bo gerokên CSS3-yê ku bi temamî re peyman in. Ji ber vê yekê hûn binivîse:
background: # 999999;
paşnav: -moz-linear-gradient (çep, # 999999 0%, #ffffff 100%);
paşnav: -webkit-gradient (rûpela çepê, top top, reng-stop (0%, # 999999), reng-bend (100%, # ffffff));
paşnav: -webkit-linear-gradient (çep, # 999999 0%, #ffffff 100%);
paşnav: -o-linear-gradient (çep, # 999999 0%, #ffffff 100%);
paşnav: -ms-linear-gradient (çep, # 999999 0%, #ffffff 100%);
fîlterê: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
paşnav: linear-gradient (çep, # 999999 0%, #ffffff 100%);
Vê rûpelên din di vê tutorial de parçeyên hûrgelan re bêtir agahdar kirin, û rûpelê paşîn paşê we ji bo amûreke baş e ku rêbazek herî baş e ku bixweberkirina CSS3 bixweber bike.
Vê gavê tenê bi CSS-ê di çalakiyê de binivîse.
02 of 04
Creating Diagonal Gradents - The Angle of Gradient
Nîşeyên destpêkê û rawestandina çepê pîvanê diyar dikin. Pirrjimarên herî linear ji ji jorên jêrîn an jî ji milê çepê ve têne. Lê ev yek e ku dibe ku avahiyek ku li ser rêza dagonê digerin. Di vê rûpelê de wêneyê hêsanek hêsan nîşan dide ku di çarçoveya çepê ya çepê de di çarçoveya 45degree de derbas dibe.
Angles ji bo Linea Gradient Define
Koçek li ser navendê elementek li ser çepek imagine ye. Xalên 0deg, 90deg xelet li rast, 180deg xist, û 270deg xala çepê. Hûn dikarin her cûreyek ji 0 to 359 dersînek diyar bike.
Divê hûn bîr bînin ku di çarçoveyê de, 45 dûr angle ji alîyê çepê çepê yê çepê ve diçin, lê di çarçoveya destpêkê de xalên destpêk û dawiyê hûrsê ne, wekî ku hûn di nav wêneyê de bibînin.
Riya gelemperî ku ji bo dakêşkek diagonal de diyar e, ew e ku kûçekek eşkere bike, wek rastê û çepê wê ji wê qaçayê re li ser kûçikê dijîn. Hûn dikarin bi pirtûka destpêkê ve bi kirdinên jêrîn binivîse:
- lûtik
- rast
- erd
- çep
- navîne
Û ew dikarin hevbeş bêtir taybetî be, wekî:
- rastê
- çepê top
- navenda navenda
- rast bin
- çepê jêrîn
- navenda navîn
- navenda rast
- navenda çepê
Li vir e ku ji bo pirtûka yek eşkere mîna rengek vekirî, raya ku spî ji bara rastê yê çepê jêrîn çepê ye:
paşnav: ## 901A1C;
paşnav-wêne: -moz-linear-gradient (rast top, # 901A1C 0%, # FFFFFF 100%);
paşnav-wêne: -webkit-gradient (linear, rast, topê çep, reng-reng (0, # 901A1C), reng-bind (1, #FFFFFF));
paşnav: -webkit-linear-gradient (rast top, # 901A1C 0%, #ffffff 100%);
paşnav: -o-linear-gradient (rast top, # 901A1C 0%, #ffffff 100%);
paşnav: -ms-linear-gradient (rast top, # 901A1C 0%, #ffffff 100%);
paşnav: linear-gradient (rast top, # 901A1C 0%, #ffffff 100%);
Hûn dikarin bihîstin ku di vê nimûneyê de IE filterên ne hene. Ji ber ku IE tenê du celebên destûr dide destnîşankirin: li jêr bi jêr (dakêşî) û çepê çepê (bi GradientType = 1 veguherîne).
Di vê çalakiyê de tenê bikaranîna CSS bikar bîne vê rengê diagonal diagonal de binêre.
03 of 04
Çandî
Bi grîjeyên CSS3-linear, hûn dikarin gelek rengên xwe bidin binavêjin ku bandorên hûrgelan jî jî çêbikin. Ji bo van rengan zêde bikin, hûn rengên din ên li dawiya xanî ya xwe zêde bikin, ji hêla komas ve vekirî. Divê divê hûn li ser rêza rengan jî divê dest pê bikin an jî dawî.
Internet explorer tenê ji hêla du rengê piştevaniya piştevanîya piştgiriyê dike, da ku hûn ku ev pirtir çêbikin, hûn tenê tenê yekemîn û du rengên ku tu dixwazî nîşan bidin.
Li vir jor 3-rengê jor e:
background: #ffffff;
paşnav: -Moz-linear-gradient (çep, #ffffff 0%, # 901A1C 51%, # 100ffffff 100%);
paşnavê: -webkit-gradient (rengê çepê, top-top, reng-reng (0%, # ffffff), reng-stop (51%, # 901A1C), reng-bend (100%, #ffffff));
paşnav: -webkit-linear-gradient (çep, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
paşnav: -o-linear-gradient (çep, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
paşnav: -ms-linear-gradient (çep, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fîlterê: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
paşnav: linear-gradient (çep, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Di vê rengê de rengê vê rengê bibînin, bi sê rengê re di çalakiyê de bi karanîna CSS re rawestîne.
04 of 04
Avakirina avakirina Gradients
Li her du malperên ku ez ji bo ku hûn çêbikin ku avahiyên avahiyê pêşniyar dikim hene, her yek ji wan re sûd û derengî hene, min hildariyek pêdivî ye ku tiştek her tiştî dike.
Gen Generation Gradient Ultimate
Ev generator pirtirkêmtir pir gelemperî ye, çimkî ew di heman awayî de çêbikin ku avahiyên avahiyên di bernameyên mîna Photoshop de pêk tê. Ez jî ji xwe hez dikir ji ber ku ew hemû pelên CSS-ê, tenê ne tenê Webkit û Mozilla. Pirsgirêka vê generator e ku ew tenê piştgirî dide horizontal û gertên vertical. Heke hûn bixwazin giyayan deagonal bikin, divê hûn pêşniyar bikin ez li gel geratorê din.
CSS3 Gradient Generator
Ev generator ji min re ji hêla veguhestineke min ve dirêj kir, lê ew piştgirî dide alîgirên ku diagonal.
Heke ji we re ji wan re ji hêla çêtirîn CSS-ê ya CSS-ê dizanin ku hûn ji wan çêtirtir, ji kerema xwe em bizanin .