CSS3 Linear Gradients

01 sa 04

Paghimo sa Linear Gradients sa Cross-Browser nga adunay CSS3

Usa ka yano nga linear gradient gikan sa wala ngadto sa tuo sa # 999 (itom nga gray) ngadto sa #fff (puti). J Kyrnin

Linear Gradients

Ang labing kasagaran nga matang sa gradient nga imong makita mao ang usa ka linear gradient sa duha ka mga kolor. Kini nagpasabot nga ang gradient molihok sa usa ka tul-id nga linya nga anam-anam nga mag-usab gikan sa unang kolor ngadto sa ikaduha nga linya. Ang hulagway niini nga panid nagpakita sa usa ka yano nga left-to-right nga gradient nga # 999 (itom nga gray) ngadto sa #fff (puti).

Ang linear gradients mao ang labing sayon ​​nga ipasabut, ug adunay labing suporta sa mga browser. Ang CSS3 linear gradients gisuportahan sa Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, ug Safari 4+. Ang Internet Explorer makadugang sa gradients gamit ang usa ka filter ug mosuporta kanila balik sa IE 5.5. Kini dili CSS3, apan kini usa ka opsyon alang sa cross-browser compatibility.

Kon imong ihulagway ang usa ka gradient kinahanglan nimo nga ipasabut ang nagkalainlain nga mga butang:

Aron ipasabut ang linear gradients gamit ang CSS3, imong isulat:

linear-gradient ( anggulo o kilid o eskina , paghunong sa kolor, paghunong sa kolor )

Busa, aron ipasabut ang gradient sa ibabaw sa CSS3, imong isulat:

linear-gradient (wala, # 999999 0%, #ffffff 100%);

Ug ipahimutang kini ingon nga kaagi sa usa ka DIV imong isulat:

div {
background-image: linear-gradient (wala, # 999999 0%, #ffffff 100%;
}

Mga Extension sa Browser alang sa CSS3 Linear Gradient

Aron makuha ang imong gradient nga magtrabaho sa cross-browser, kinahanglan nimo gamiton ang mga extension sa browser alang sa kadaghanan sa mga browser ug usa ka filter alang sa Internet Explorer 9 ug ubos (tinuod nga 2 mga filter). Ang tanan niini magkuha sa susama nga mga elemento aron ipasabot ang imong gradient (gawas nga mahimo lamang nimo ipaila ang 2-kolor nga gradiente sa IE).

Ang Microsoft Filters ug Extension -Internet Explorer mao ang labing mahagiton sa pagsuporta, tungod kay nagkinahanglan ka og tulo ka nagkalainlain nga linya aron suportahan ang lain-laing bersyon sa browser. Aron makuha ang grey sa puti nga gradient sa ibabaw imong isulat:

/ * IE 5.5-7 * /
filter: 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 (wala, # 999999 0%, #ffffff 100%);

Ang Mozilla Extension -Ang -moz- extension nagtrabaho sama sa CSS3 property, uban lang sa -moz- extension. Aron makuha ang gradient sa ibabaw alang sa Firefox, isulat ang:

-moz-linear-gradient (wala, # 999999 0%, #ffffff 100%);

Ang Extension sa Opera- Ang -o nga extension nagdugang sa mga gradiente sa Opera 11.1+. Aron makuha ang gradient sa ibabaw, isulat:

-o-linear-gradient (wala, # 999999 0%, #ffffff 100%);

Ang Webkit Extension -The -webkit- extension daghan kaayo sama sa CSS3 property. Aron ipasabut ang gradient sa ibabaw alang sa Safari 5.1+ o Chrome 10+ imong isulat:

-webkit-linear-gradient (wala, # 999999 0%, #ffffff 100%);

Adunay usab usa ka mas daan nga bersyon sa extension sa Webkit nga nagtrabaho sa Chrome 2+ ug Safari 4+. Diha niini imong gipasabut ang matang sa gradient isip usa ka bili, kay sa ngalan sa propyedad. Aron makuha ang grey sa puti nga gradient uban niining extension, isulat:

-webkit-gradient (linear, wala sa ibabaw, tuo sa ibabaw, color-stop (0%, # 999999), color-stop (100%, # ffffff));

Full CSS3 Linear Gradient CSS Code

Alang sa bug-os nga cross-browser nga suporta aron makuha ang gray nga puti nga gradient sa ibabaw kinahanglan nga maglakip una sa usa ka fallback solid nga kolor alang sa mga browser nga wala mosuporta sa gradients, ug ang katapusan nga butang kinahanglan ang estilo sa CSS3 alang sa mga browser nga bug-os nga nagsunod. Busa, ikaw nagsulat:

background: # 999999;
background: -moz-linear-gradient (wala, # 999999 0%, #ffffff 100%);
background: -webkit-gradient (linear, wala sa ibabaw, tuo sa ibabaw, color-stop (0%, # 999999), color-stop (100%, # ffffff));
background: -webkit-linear-gradient (wala, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (wala, # 999999 0%, #ffffff 100%);
background: -ms-linear-gradient (wala, # 999999 0%, #ffffff 100%);
filter: 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 (wala, # 999999 0%, #ffffff 100%);

Ang sunod nga mga panid niini nga pagpatin-aw nagpatin-aw sa mga bahin sa gradient nga mas detalyado, ug ang katapusang panid nagatudlo kanimo sa himan nga usa ka labing maayo nga paagi sa paghimo sa CSS3 gradients awtomatikong.

Tan-awa kini nga linear gradient sa aksyon gamit ang CSS lang.

02 sa 04

Paghimo sa Diagonal Gradients-Ang Anghel sa Gradient

Usa ka gradient sa 45 degree angle. J Kyrnin

Ang pagsugod ug paghunong sa mga puntos nagtino sa anggulo sa gradient. Kadaghanan sa mga linear gradients gikan sa ibabaw ngadto sa ubos o wala ngadto sa tuo. Apan kini posible nga magtukod og usa ka gradient nga naglihok sa usa ka diagonal nga linya. Ang larawan sa niini nga panid nagpakita sa usa ka yano nga gradient nga naglihok sa usa ka 45degree anggulo tabok sa larawan gikan sa tuo ngadto sa wala.

Ang mga Anghel nga Nagpaila sa Linya sa Graderno

Ang anggulo usa ka linya sa hinanduraw nga lingin sa sentro sa elemento. 0deg puntos, 90deg puntos sa tuo, 180deg puntos, ug 270deg puntos sa wala. Mahimo nimo matino ang bisan unsang anggulo gikan sa 0 ngadto sa 359 degrees.

Kinahanglan nimo matikdan nga sa usa ka kuwadrado, ang usa ka anggulo nga 45 degree nagalihok gikan sa ibabaw nga bahin sa wala ngadto sa ubos sa tuo, apan diha sa usa ka rectangle ang mga punto sa pagsugod ug katapusan nga gamay sa gawas sa porma, ingon sa imong makita sa larawan.

Ang mas komon nga paagi sa paghulagway sa usa ka diagonal nga gradient mao ang pag-ila sa usa ka kanto, sama sa ibabaw sa tuo ug ang gradient molihok gikan niana nga eskina ngadto sa atbang nga suok. Mahimo nimong ipasabot ang pagsugod sa posisyon sa mosunod nga mga panid:

Ug mahimo kini nga mahimong mas espesipiko, sama sa:

Ania ang CSS alang sa usa ka gradient nga susama sa usa nga gihulagway, pula nga puti gikan sa ibabaw nga tuo nga kilid ngadto sa ubos nga wala:

background: ## 901A1C;
background-image: -moz-linear-gradient (tuo ibabaw, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (linear, tuo sa ibabaw, wala sa ubos, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));
background: -webkit-linear-gradient (tuo ibabaw, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (tuo ibabaw, # 901A1C 0%, #ffffff 100%);
background: -ms-linear-gradient (tuo ibabaw, # 901A1C 0%, #ffffff 100%);
background: linear-gradient (tuo ibabaw, # 901A1C 0%, #ffffff 100%);

Mahimo nimong namatikdan nga walay mga pagsala sa IE niini nga pananglitan. Kana tungod kay ang IE lamang nagtugot sa duha ka matang sa mga filter: ibabaw sa ubos (ang default) ug gibiyaan sa tuo (uban ang GradientType = 1 switch).

Tan-awa kining diagonal nga linear gradient sa aksyon gamit ang CSS lang.

03 of 04

Nagtandog ang Kolor

Usa ka gradient nga adunay tulo ka hunong sa kolor. J Kyrnin

Uban sa CSS3 linear gradients, mahimo ka makadugang sa daghang mga kolor sa imong gradient aron makahimo bisan sa mga mas hanap nga mga epekto. Aron idugang kini nga mga kolor, dugang nimo ang mga kolor sa katapusan sa imong propiedad, nga gibahin sa mga koma. Kinahanglan nimo ilakip kung diin sa linya ang mga kolor kinahanglan nga magsugod o matapos usab.

Ang pagsalipod sa Internet Explorer nagsuporta lamang sa duha ka hut-ong sa kolor, mao nga kon imong tukuron kini nga gradient, kinahanglan nimong ilakip ang una ug ikaduha nga mga kolor nga gusto nimo ipakita.

Ania ang CSS alang sa ibabaw 3-kolor nga gradient:

background: #ffffff;
background: -moz-linear-gradient (wala, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (linear, wala sa ibabaw, tuo sa ibabaw, color-stop (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));
background: -webkit-linear-gradient (wala, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -o-linear-gradient (wala, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -ms-linear-gradient (wala, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: linear-gradient (wala, #ffffff 0%, # 901A1C 51%, #ffffff 100%);

Tan-awa kini nga linear gradient nga adunay tulo ka hugna sa kolor nga gigamit gamit ang CSS.

04 sa 04

Himoa ang Mas Hinungdan nga Lohika

Ultimate CSS Gradient Generator. screenshot ni J Kyrnin sa maayong kabubut-on ColorZilla

Adunay duha ka mga dapit nga akong girekomendar alang sa pagtabang kanimo sa pagtukod og mga gradiente, matag usa kanila adunay mga kaayohan ug mga kahuyangan ngadto kanila, wala ako makakaplag sa usa ka gradient builder nga nagbuhat sa tanan pa.

Ultimate CSS Gradient Generator
Kini nga gradient generator popular kaayo tungod kay kini naghimo sa susama nga paagi sa gradient builders sa mga programa sama sa Photoshop. Ganahan usab ako tungod kay kini naghatag kanimo sa tanang mga extension sa CSS, dili lang Webkit ug Mozilla. Ang problema sa kini nga generator mao nga kini nagsuporta lamang sa pinahigda ug nagbarog nga mga gradiente. Kung gusto nimo nga maghimo sa diagonal gradients, kinahanglan nga moadto ka sa laing generator nga akong girekomendar.

CSS3 Gradient Generator
Kini nga generator midala kanako sa usa ka gamay aron masabtan kay sa una, apan kini nagsuporta sa pag-usab sa direksyon ngadto sa diagonal.

Kung nahibal-an nimo ang lain nga CSS Gradient Generator nga gusto nimo labaw pa niini, palihug ipahibalo kanamo .