01 ntawm 04
Tsim Tus Hla Txuam-Tawg Tsav Xaiv Tawm Nrog CSS3
Tawm Gradients
Qhov feem ntau hom gradient koj yuav pom yog ib qho gradient linear ntawm ob xim. Qhov no txhais tau hais tias qhov gradient yuav tsiv mus nyob rau hauv ib txoj kab ncaj hloov maj los ntawm thawj xim mus rau ob kab hauv kab ntawd. Cov duab ntawm nplooj ntawv no qhia tau tias yooj yim sab laug-rau-txoj cai gradient ntawm # 999 (tsaus grey) rau #fff (dawb).
Tawm gradients yog qhov yooj yim los txhais, thiab muaj feem ntau cov kev them nyiaj yug hauv browsers. CSS3 linear gradients yog txaus siab nyob rau hauv Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, thiab Safari 4+. Internet Explorer muaj peev xwm ntxiv cov gradients siv lub lim thiab txhawb lawv rov qab rau IE 5.5. Qhov no tsis yog CSS3, tab sis nws yog ib qho kev xaiv rau kev sib tshuam ntawm qhov browser.
Thaum koj txhais cov gradient koj yuav tsum txhais ntau ntau yam:
- Hom gradient nws yog - linear lossis radial
- Qhov chaw gradient yuav tsum pib
- Qhov twg qhov kev kub ntxhov yuav tsum nres
- Cov xim zoo li cas nyob hauv qhov gradient thiab qhov uas lawv yuav tsum pib thiab nres
Txhawm rau txhais cov qauv linear gradients siv CSS3, koj sau:
linear-gradient ( lub kaum sab xis los yog kaum sab xis , xim nres , xim nres )
- Ua ntej koj txhais cov hom gradient nrog lub npe linear -gradient.
- Tom qab ntawd, koj txhais tau cov pib thiab nres cov ntsiab lus ntawm qhov gradient hauv ib qho ntawm ob txoj kev: lub kaum sab xis ntawm txoj kab hauv 0 txog 359, nrog 0 degrees pointing ncaj. Los yog nrog lub "sab qaum teb", xws li sab laug, txoj cai, hauv qab, thiab saum toj. Cov no yuav raug muab piav qhia ntau ntxiv nyob rau nplooj ntawv tom ntej. Yog tias koj tawm cov no, qhov gradient yuav ntws los ntawm sab saum toj mus rau theem hauv qab.
- Tom qab ntawd koj txhais cov xim nres. Koj txhais cov xim nres nrog cov xim xim thiab ib feem pua ntawm koj xaiv. Qhov feem pua qhia rau qhov browser uas nyob rau ntawm kab pib los xaus nrog cov xim ntawd. Lub neej ntawd yog tso rau xim xim tusyees raws txoj kab. Koj yuav kawm ntau ntxiv txog cov xim nres nyob rau phab 3.
Yog li, txhawm rau txheeb cov saum toj no gradient nrog CSS3, koj sau:
linear-gradient (laug, # 999999 0%, #ffffff 100%);
Thiab kom nws teeb raws li keeb kwm ntawm ib DIV koj sau:
div {
tom qab duab: linear-gradient (sab laug, # 999999 0%, #ffffff 100%;
}
Browser Extensions rau CSS3 Tawm Gradients
Txhawm rau koj gradient mus ua hauj lwm khaub lig-browser, koj yuav tsum siv browser extensions rau feem ntau browsers thiab ib lim rau Internet Explorer 9 thiab qis dua (yeej 2 lim). Tag nrho cov no siv tib lub ntsiab los txheeb xyuas koj qhov gradient (tshwj tsis yog tias koj tuaj yeem txhais tau 2 xim xim gradients hauv IE).
Microsoft lim thiab Extension - Internet Explorer yog qhov nyuaj tshaj plaws los txhawb, vim tias koj xav tau peb txoj kab sib txawv los txhawb qhov txawv browser versions. Yog xav tau qhov saum toj grey mus dawb gradient koj yuav sau:
/ * IE 5.5-7 * /
lim: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-lim: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (laug, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- extension ua hauj lwm zoo li CSS3 cov khoom, nrog rau kev-txuas ntxiv. Yog xav tau cov lus sau rau Gradient rau Firefox, sau:
-moz-linear-gradient (laug, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- extension ntxiv gradients rau Opera 11.1+. Txhawm rau tau txais qhov siab tshaj saud, sau:
-o-linear-gradient (laug, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- extension ua haujlwm zoo li CSS3 cov khoom. Los txhais tau qhov saum toj no gradient rau Safari 5.1+ los sis Chrome 10+ koj sau:
-webkit-linear-gradient (laug, # 999999 0%, #ffffff 100%);
Muaj kuj yog ib tug laus version ntawm lub Webkit ncua ntxiv uas ua haujlwm nrog Chrome 2+ thiab Safari 4+. Nyob rau hauv nws koj txhais txog hom gradient raws li ib tug nqi, es tsis nyob hauv lub npe khoom. Yog xav tau qhov grey kom dawb gradient nrog qhov kev txuas ntxiv, sau:
-pebkit-gradient (linear, sab saum toj, sab saum toj, xim-nres (0%, # 999999), xim-nres (100%, # ffffff));
Tag nrho CSS3 Tawm Gradient CSS Code
Rau kev puv xais-browser txhawb kom tau qhov grey rau dawb gradient saum toj no koj yuav tsum xub muaj xws li cov xim thau xim rau browsers uas tsis txhawb gradients, thiab lub xeem yuav tsum yog CSS3 style rau browsers uas muaj siab raws. Yog li, koj sau:
tom qab: # 999999;
background: -moz-linear-gradient (laug, # 999999 0%, #ffffff 100%);
tom qab: -pebkit-gradient (linear, sab saum toj, sab saum toj, xim-nres (0%, # 999999), xim-nres (100%, # ffffff));
background: -webkit-linear-gradient (laug, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (laug, # 999999 0%, #ffffff 100%);
background: -ms-linear-gradient (laug, # 999999 0%, #ffffff 100%);
lim: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-lim: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: linear-gradient (laug, # 999999 0%, #ffffff 100%);
Cov nplooj ntawv tom ntej hauv phau ntawv nyeem no piav qhia txog seem ntawm gradient rau ntau yam, thiab nplooj ntawv kawg taw rau koj mus rau lub cuab tam uas yog ib qho zoo tshaj plaws los tsim cov CSS3 gradients tau.
Pom qhov kev teeb tsa gradient hauv tes hauj lwm uas siv CSS xwb.
02 ntawm 04
Tsim cov Diagonal Gradients-Lub Angle ntawm Gradient
Lub pib thiab nres cov ntsiab lus txiav txim siab lub kaum sab xis ntawm qhov gradient. Feem ntau cov duab gradients yog sab saum toj mus rau hauv qab los yog sab laug mus rau sab xis. Tab sis nws yog ua tau los tsim ib lub gradient uas txav ntawm kab pheeb ces kaum. Cov duab ntawm nplooj ntawv no qhia tau tias yooj yim gradient uas txav rau hauv ib txoj kab 45degree hla cov duab los ntawm sab xis.
Cov Phiaj Kom Txhais Tau Tus Txheej Txheem Zoo Tshaj Plaws
Lub kaum ntse ntse yog ib txoj kab ntawm lub voj voog xav hauv nruab nrab ntawm lub caij. 0deg ntsiab lus, 90deg ntsiab lus rau sab xis, 180deg cov ntsiab lus cia, thiab 270deg ntsiab lus rau sab laug. Koj tuaj yeem txhais txhua lub kaum sab xis ntawm 0 txog 359 degrees.
Koj yuav tsum nco ntsoov tias nyob rau hauv ib lub xwmfab, 45 degree ntawm lub kaum sab xis ntawm lub kaum sab xis saum toj kawg nkaus mus rau sab xis, tab sis nyob rau hauv ib lub duab plaub pib qhov pib thiab kawg cov ntsiab lus yog me ntsis sab nraum cov duab, raws li koj pom hauv daim duab.
Txoj kev xav paub ntau tshaj li tus kab pheeb ces kaum dav yog txhais kom pom lub ces kaum, xws li saum txoj cai thiab qhov gradient yuav tsiv tawm ntawm lub ces kaum mus rau nram qab kaum. Koj tuaj yeem txhais cov pib xa nrog cov keywords hauv qab no:
- saum toj
- txoj cai
- hauv qab
- sab laug
- chaw
Thiab lawv tuaj yeem ua ke los ua kom meej dua, xws li:
- saum toj kawg nkaus
- sab laug sab laug
- sab saum toj chaw
- hauv qab txoj cai
- hauv qab laug
- hauv qab nruab nrab
- txoj cai chaw
- sab laug chaw
Ntawm no yog CSS rau gradient zoo ib yam li ib daim duab, xim liab dawb mus rau saum toj kawg kiag sab laug mus rau sab laug:
tom qab: ## 901A1C;
tom qab duab: -moz-linear-gradient (sab saum toj, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (linear, sab saum toj, sab hauv qab, xim-nres (0, # 901A1C), xim-nres (1, #FFFFFF));
tom qab: -webkit-linear-gradient (sab saum toj, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (sab saum toj, # 901A1C 0%, #ffffff 100%);
tom qab: -ms-linear-gradient (sab saum toj, # 901A1C 0%, #ffffff 100%);
background: linear-gradient (sab saum toj, # 901A1C 0%, #ffffff 100%);
Koj yuav tau pom tias tsis muaj IE cov ntxaij lim dej hauv qhov piv txwv no. Yog vim IE tsuas pub ob hom kev lim: saum toj mus rau hauv qab (lub neej ntawd) thiab sab laug rau sab xis (nrog GradientType = 1 mus).
Pom kab no cov kab pheeb ces kaum tawm hauv kev ua haujlwm siv CSS xwb.
03 ntawm 04
Xim Nres
Nrog CSS3 linear gradients, koj tuaj yeem ntxiv ntau yam xim rau koj qhov kev loj hlob kom tsim tau cov teebmeem zoo nkauj. Ntxiv cov xim, koj ntxiv cov xim ntxiv rau qhov kawg ntawm koj lub vaj tse, sib cais los ntawm hnub. Koj yuav tsum muaj qhov chaw nyob ntawm kab uas cov xim yuav tsum pib lossis xaus thiab.
Internet Explorer cov ntxaij lim dej tsuas yog txhawb ob lub xim nres, yog li thaum koj tsim qhov teeb meem no, koj yuav tsum tsuas muaj cov xim thawj zaug thiab zaum thib ob uas koj xav tso kom pom.
Ntawm no yog CSS rau qhov saum toj no 3-xim gradient:
tom qab: #ffffff;
background: -moz-linear-gradient (laug, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
tom qab: -vebkit-gradient (linear, sab saum toj, sab saum toj, xim-nres (0%, # ffffff), xim-nres (51%, # 901A1C), xim-nres (100%, # ffffff));
background: -webkit-linear-gradient (sab laug, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear-gradient (sab laug, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
tom qab: -ms-linear-gradient (sab laug, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
lim: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: linear-gradient (sab laug, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Pom qhov kev teeb tsa zoo li no nrog peb qhov chaw nres ntawm kev siv cov CSS xwb.
04 ntawm 04
Ua kom tsev Gradients yooj yim
Muaj ob qhov chaw kuv pom zoo kom pab koj tsim cov gradients, lawv txhua tus tau txais txiaj ntsim thiab cuam tshuam rau lawv, Kuv tsis tau pom ib tus neeg tsim muaj qhov teeb meem uas ua txhua yam.
Qhov kawg CSS Gradient Generator
Qhov no gradient generator yog nrov heev vim hais tias nws ua tau zoo ib yam li cov gradient cov neeg tsim khoom hauv cov kev zov me nyuam zoo li Photoshop. Kuv tseem nyiam nws vim nws muab koj tag nrho cov CSS extensions, tsis yog Webkit thiab Mozilla. Qhov teeb meem nrog no generator yog tias nws tsuas txhawb kev tav toj thiab ntsug gradients. Yog hais tias koj xav ua cov kab pheeb ces kaum sib dhos, koj yuav tsum mus rau lwm cov generator kuv pom zoo.
CSS3 Gradient Generator
Cov generator no coj kuv mus ntev dua kom to taub dua thawj tus, tab sis nws txhawb txoj kev hloov mus rau ib kab pheeb ces kaum.
Yog tias koj paub lwm CSS Gradient Generator uas koj nyiam tshaj qhov no, thov qhia rau peb paub .