01 nan 04
Kreye kwa-navigatè lineyè gradyan ak CSS3
Lineyè lineyè
Kalite ki pi komen nan gradyan ou pral wè se yon gradyan lineyè nan de koulè. Sa vle di ke gradyan la ap deplase nan yon liy dwat chanje piti piti soti nan premye koulè a dezyèm lan ansanm ki liy. Imaj la nan paj sa a montre yon senp gout-a-dwa gradyan nan # 999 (nwa gri) nan #fff (blan).
Pestiyè lineyè yo se pi fasil a defini, epi yo gen sipò ki pi nan navigatè. CSS3 lineyè pant yo sipòte nan Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, ak Safari 4+. Internet Explorer ka ajoute pant ki sèvi ak yon filtè ak sipòte yo tounen nan IE 5.5. Sa a se pa CSS3, men li se yon opsyon pou kwa-navigatè konpatibilite.
Lè ou defini yon gradyan ou bezwen defini plizyè bagay diferan:
- Ki kalite gradyan li se lineyè oswa radial
- Ki kote gradyan an ta dwe kòmanse
- Ki kote gradyan an ta dwe sispann
- Ki koulè yo nan gradyan la ak ki kote yo ta dwe kòmanse epi yo sispann
Pou defini lineyè lineyè lè l sèvi avèk CSS3, ou ekri:
lineyè-gradyan ( ang oswa kwen oswa kwen , arè koulè , arè koulè )
- Premye ou defini kalite a nan gradyan ak non lineyè- gradyan yo.
- Lè sa a, ou defini pwen yo kòmanse epi yo sispann nan gradyan la nan youn nan de fason: ang lan nan liy lan nan degre soti nan 0 rive 359, ak 0 degre montre dwat leve. Oswa avèk fonksyon "bò oswa kwen", tankou bò gòch, dwat, anba, ak tèt. Sa yo pral eksplike nan plis detay nan pwochen paj la. Si ou kite sa yo soti, gradyan la ap koule soti nan tèt la nan pati anba a nan eleman an.
- Lè sa a, ou defini koulè a sispann. Ou defini koulè a sispann ak kòd la koulè ak yon pousantaj si ou vle. Pousantaj la di navigatè a kote sou liy lan kòmanse oswa fini ak ki koulè. Default la se yo mete koulè yo respire ansanm liy lan. Ou pral aprann plis sou koulè kanpe sou paj 3.
Se konsa, defini gradyan ki anwo a ak CSS3, ou ekri:
lineyè-gradyan (agòch, # 999999 0%, #ffffff 100%);
Ak yo mete l 'kòm background nan nan yon DIV ou ekri:
div {
background-image: lineyè-gradyan (agòch, # 999999 0%, #ffffff 100%;
}}
Navigatè ekstansyon pou CSS3 lineyè gradyèl
Pou jwenn gradyan ou a travay kwa-navigatè, ou bezwen sèvi ak ekstansyon navigatè pou pifò navigatè ak yon filtè pou Internet Explorer 9 ak pi ba (aktyèlman 2 filtè). Tout moun sa yo pran eleman yo menm nan defini gradyan ou (eksepte ke ou ka sèlman defini 2-koulè pantabilite nan IE).
Microsoft Filtè ak ekstansyon - Entènèt Explorer se pi difisil pou sipòte, paske ou bezwen twa liy diferan pou sipòte vèsyon navigatè diferan yo. Pou jwenn gri ki anwo a nan gradyan blan ou ta ekri:
/ * IE 5.5-7 * /
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', fenColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filtre: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', fenColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-mi-lineyè-gradyan (agoch, # 999999 0%, #ffffff 100%);
Mozilla Ekstansyon -Moz-ekstansyon an ap travay tankou pwopriyete CSS3, jis ak ekstansyon -moz. Pou jwenn gradyan anwo a pou Firefox, ekri:
-moz-lineyè-gradyan (agoch, # 999999 0%, #ffffff 100%);
Opera Ekstansyon -The-ekstansyon ajoute pant pou Opera 11.1+. Pou jwenn gradyan anwo a, ekri:
-o-lineyè-gradyan (agòch, # 999999 0%, #ffffff 100%);
Webkit ekstansyon -The -webkit- ekstansyon travay yon anpil tankou pwopriyete a CSS3. Pou defini gradyan ki anwo a pou Safari 5.1+ oswa Chrome 10+ ou ekri:
-webkit-lineyè-gradyan (agoch, # 999999 0%, #ffffff 100%);
Genyen tou yon vèsyon ki pi gran nan ekstansyon an Webkit ki travay ak Chrome 2+ ak Safari 4+. Nan li ou defini kalite a nan gradyan kòm yon valè, olye ke nan non an pwopriyete. Pou jwenn gri a gradyan blan ak ekstansyon sa a, ekri:
-Webkit-gradyan (lineyè, tèt gòch, tèt dwat, koulè-sispann (0%, # 999999), koulè-sispann (100%, # ffffff));
Full CSS3 Lineyè Gradyan CSS Kòd
Pou sipò plen kwa-navigatè jwenn gri a gradyan blan anwo a ou ta dwe premye gen ladan yo yon koulè fallback solid pou navigatè ki pa sipòte pant, ak atik nan dènye yo ta dwe style la CSS3 pou navigatè ki konplètman konfòme. Se konsa, ou ekri:
background: # 999999;
background: -moz lineyè-gradyan (agoch, # 999999 0%, #ffffff 100%);
background: -webkit-gradyan (lineyè, tèt kite, tèt dwat, koulè-sispann (0%, # 999999), koulè-sispann (100%, # ffffff));
background: -webkit-lineyè-gradyan (agòch, # 999999 0%, #ffffff 100%);
background: -o-lineyè-gradyan (agoch, # 999999 0%, #ffffff 100%);
background: -ms-lineyè-gradyan (agoch, # 999999 0%, #ffffff 100%);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', fenColorstr = '# ffffff', GradientType = 1);
-ms-filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', fenColorstr = '# ffffff', GradientType = 1);
background: lineyè-gradyan (agoch, # 999999 0%, #ffffff 100%);
Paj kap vini yo nan Tutorial sa a eksplike pati pyès sa yo nan yon gradyan nan plis detay, ak dènye paj la pwen ou nan yon zouti ki se yon fason ekselan yo kreye CSS3 pant yo otomatikman.
Gade sa a gradyan lineyè nan aksyon lè l sèvi avèk jis CSS.
02 nan 04
Kreye dyagonal gradyan-Ang nan gradyan la
Kòmanse ak pwen yo detèmine ang lan nan gradyan la. Pifò pant lineyè yo soti nan tèt jouk anba oswa bò gòch a dwat. Men, li se posib yo bati yon gradyan ki deplase sou yon liy dyagonal. Imaj la nan paj sa a montre yon gradyan senp ki deplase nan yon ang 45 degre nan imaj la soti nan dwa a kite.
Ang yo defini liy lan gradyan
Kwen an se yon liy sou yon sèk imajinè nan sant la nan eleman an. 0deg pwen yo, 90deg pwen sou bò dwat la, pwen 180deg desann, ak pwen 270deg sou bò gòch la. Ou ka defini nenpòt ang ant 0 rive 359 degre.
Ou ta dwe sonje ke nan yon kare, yon ang 45 degre deplase soti nan kwen an tèt gòch nan dwa ki anba a, men nan yon rektang pwen yo kòmanse ak fen yo yon ti kras deyò fòm nan, jan ou ka wè nan imaj la.
Fason ki pi komen nan defini yon gradyan dyagonal se defini yon kwen, tankou tèt dwa ak gradyan la ap deplase soti nan ki kwen nan kwen opoze a. Ou ka defini peman an kòmanse ak mo sa yo:
- tèt
- dwa
- anba
- kite
- sant
Apre sa, yo ka konbine yo dwe plis espesifik, tankou:
- tèt dwat
- tèt gòch
- tèt sant
- anba dwat
- anba gòch la
- sant anba
- dwa sant
- kite sant lan
Isit la se CSS la pou yon gradyan menm jan ak foto a yon sèl, wouj nan blan deplase soti nan kwen an tèt dwat nan pati anba a kite:
background: ## 901A1C;
background-image: -moz-lineyè-gradyan (tèt dwat, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradyan (lineyè, dwat tèt, gòch anba, koulè-sispann (0, # 901A1C), koulè-sispann (1, #FFFFFF));
background: -webkit-lineyè-gradyan (tèt dwat, # 901A1C 0%, #ffffff 100%);
background: -o-lineyè-gradyan (tèt dwat, # 901A1C 0%, #ffffff 100%);
background: -ms-lineyè-gradyan (tèt dwat, # 901A1C 0%, #ffffff 100%);
background: lineyè-gradyan (tèt dwat, # 901A1C 0%, #ffffff 100%);
Ou ka remake ke pa gen filtè IE nan egzanp sa a. Sa se paske IE sèlman pèmèt de kalite filtè: tèt anba (default la) ak bò gòch a dwat (avèk gradyanType a = 1 switch).
Al gade nan dyagonal gradyan lineyè nan aksyon lè l sèvi avèk jis CSS.
03 nan 04
Koulè sispann
Avèk CSS3 lineyè pant, ou ka ajoute koulè miltip gradyan ou yo kreye menm efè fancier. Pou ajoute koulè sa yo, ou ajoute koulè adisyonèl sou nan fen pwopriyete w la, separe pa komas. Ou ta dwe gen ladan kote sou liy lan koulè yo ta dwe kòmanse oswa fini tou.
Internet Explorer filtè sèlman sipò de koulè sispann, se konsa lè ou bati sa a gradyan, ou ta dwe sèlman gen ladan koulè yo premye ak dezyèm ou vle montre.
Isit la se CSS la pou pi wo a 3-koulè gradyan:
background: #ffffff;
background: -moz lineyè-gradyan (agòch, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -Webkit-gradyan (lineyè, tèt gòch, tèt dwat, koulè-sispann (0%, # ffffff), koulè-sispann (51%, # 901A1C), koulè-sispann (100%, # ffffff));
background: -webkit-lineyè-gradyan (agòch, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-lineyè-gradyan (agòch, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -mi-lineyè-gradyan (agòch, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', fenColorstr = '# ffffff', GradientType = 1);
background: lineyè-gradyan (agòch, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Gade sa a gradyan lineyè ak twa koulè sispann nan aksyon lè l sèvi avèk jis CSS.
04 nan 04
Fè gradyasyon bilding pi fasil
Gen de sit mwen rekòmande pou ede ou bati pant, yo chak gen benefis ak dezavantaj yo, mwen pa te jwenn yon mason gradyan ki fè tout bagay ankò.
Ultim CSS Gradyan ak dèlko
Sa a dèlko gradyan se trè popilè paske li fè nan yon fason menm jan ak bòs mason gradyan nan pwogram tankou fotoschop. Mwen menm mwen renmen li paske li ba ou tout ekstansyon yo CSS, pa sèlman Webkit ak Mozilla. Pwoblèm nan ak dèlko sa a se ke li sèlman sipòte orizontal ak vètikal pant. Si ou vle fè pasyan dyagonal, ou gen pou ale nan dèlko a lòt mwen rekòmande.
CSS3 Gradyan ak dèlko
Dèlko sa a te pran m 'yon ti tan ankò pou konprann pase yon sèl nan premye, men li sipòte chanje direksyon an nan yon dyagonal.
Si ou konnen yon lòt CSS gradyan dèlko ke ou renmen pi bon pase sa yo, tanpri fè nou konnen .