01 ya 04
Kujenga Gradients Linear Browser na CSS3
Gradients Linear
Aina ya kawaida ya gradient utayoona ni gradient linear ya rangi mbili. Hii inamaanisha kuwa gradient itaenda kwa mstari wa moja kwa moja kubadilisha hatua kwa hatua kutoka rangi ya kwanza hadi ya pili pamoja na mstari huo. Picha kwenye ukurasa huu inaonyesha rahisi ya kushoto na kulia ya # 999 (giza nyeusi) hadi #fff (nyeupe).
Gradients ya mstari ni rahisi kuelezea, na kuwa na msaada zaidi katika vivinjari. CSS3 gradients linear hutumiwa katika Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, na Safari 4+. Internet Explorer inaweza kuongeza gradients kwa kutumia kichujio na inawasaidia kurejea kwa IE 5.5. Hii sio CSS3, lakini ni chaguo kwa utangamano wa browser-msalaba.
Unapofafanua fadhila unahitaji kufafanua mambo kadhaa tofauti:
- Ni aina gani ya gradient ni ya mstari au ya radial
- Ambapo gradient inapaswa kuanza
- Ambapo gradient inapaswa kuacha
- Je, ni rangi gani ambazo zipo kwenye hali ya juu na ni wapi wanapaswa kuanza na kuacha
Ili kufafanua gradients linear kwa kutumia CSS3, unaandika:
gradient line ( angle au upande au kona , rangi ya kuacha , rangi ya kuacha )
- Kwanza unatafanua aina ya gradient na jina linalojitokeza.
- Kisha, unafafanua alama za mwanzo na za kuacha katika moja ya njia mbili: angle ya mstari kwa digrii kutoka 0 hadi 359, na digrii 0 zinazoelekeza moja kwa moja. Au kwa kazi ya "upande au kona", kama kushoto, kulia, chini, na juu. Hizi zitaelezwa kwa undani zaidi kwenye ukurasa unaofuata. Ukiacha haya nje, gradient itapita kati hadi chini ya kipengele.
- Kisha unafafanua kuacha rangi. Unafafanua rangi huacha na kanuni ya rangi na asilimia ya hiari. Asilimia inamwambia kivinjari ambapo kwenye mstari kuanza au kumaliza na rangi hiyo. Kichapishaji ni kuweka rangi sawasawa kwenye mstari. Utajifunza zaidi kuhusu kuacha rangi kwenye ukurasa wa 3.
Kwa hiyo, ili kufafanua gradient hapo juu na CSS3, unaandika:
gradient line (kushoto, # 999999 0%, #ffffff 100%);
Na kuiweka kama historia ya DIV unayoandika:
div {
background-image: linear gradient (kushoto, # 999999 0%, #ffffff 100%;
}
Viendelezi vya Kivinjari kwa CSS3 Gradients Linear
Ili kupata gradient yako ili kufanya kazi kwa kivinjari-msalaba, unahitaji kutumia upanuzi wa kivinjari kwa vivinjari vingi na chujio kwa Internet Explorer 9 na chini (kwa kweli filters 2). Zote hizi huchukua vipengele vingine vya kufafanua fadhila yako (isipokuwa kwamba unaweza kufafanua tu gradients 2-rangi katika IE).
Filters za Microsoft na Upanuzi -Internet Explorer ni changamoto zaidi kuunga mkono, kwa sababu unahitaji mistari mitatu tofauti ili kusaidia matoleo tofauti ya kivinjari. Ili kupata kijivu kilicho juu hapo juu unaweza kuandika:
/ * IE 5.5-7 * /
chujio: Programu: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-mshujio: "Programu: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (kushoto, # 999999 0%, #ffffff 100%);
Upanuzi wa Mozilla -The -moz-extension unafanya kazi kama mali ya CSS3, tu na-ya ziada. Ili kupata gradient hapo juu kwa Firefox, andika:
-masi-linear-gradient (kushoto, # 999999 0%, #ffffff 100%);
Upanuzi wa Opera -The -o- inaongeza gradients kwa Opera 11.1 +. Ili kupata gradient hapo juu, andika:
-o-linear-gradient (kushoto, # 999999 0%, #ffffff 100%);
Ugani wa Webkit -The -webkit-extension unafanya kazi kama mali ya CSS3. Ili kufafanua gradient hapo juu kwa Safari 5.1 + au Chrome 10+ unayoandika:
gradient -webkit-linear (kushoto, # 999999 0%, #ffffff 100%);
Pia kuna toleo la zamani la kiendelezi cha wavuti kinachofanya kazi na Chrome 2+ na Safari 4+. Katika hiyo unafafanua aina ya gradient kama thamani, badala ya jina la mali. Ili kupata kijivu kwa mwelekeo mweupe na ugani huu, andika:
-bb-gradient (linear, juu ya kushoto, juu ya juu, rangi-stop (0%, # 999999), rangi-stop (100%, # ffffff));
Kanuni kamili ya CSS3 ya Gradient CSS
Kwa usaidizi kamili wa kivinjari-kivinjari ili kupata kijivu kwenye dhahabu nyeupe zaidi ya lazima iwe na kwanza rangi ya imara ya kuanguka kwa wasifu ambao haukuunga mkono gradients, na kipengee cha mwisho kinapaswa kuwa mtindo wa CSS3 kwa wavuti wanaozingatia kikamilifu. Kwa hivyo, unaandika:
background: # 999999;
background: -moz-linear-gradient (kushoto, # 999999 0%, #ffffff 100%);
background: -webkit-gradient (linear, juu ya kushoto, juu ya juu, rangi-stop (0%, # 999999), rangi-stop (100%, # ffffff));
background: -webkit-linear-gradient (kushoto, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (kushoto, # 999999 0%, #ffffff 100%);
background: -ms-linear-gradient (kushoto, # 999999 0%, #ffffff 100%);
chujio: Programu: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-mu-chujio: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: gradient line (kushoto, # 999999 0%, #ffffff 100%);
Kurasa zifuatazo katika mafunzo haya zinaelezea sehemu za gradient kwa undani zaidi, na ukurasa wa mwisho unakuelezea kwenye chombo ambacho ni njia bora ya kuunda gradients ya CSS3 moja kwa moja.
Angalia kipengee hiki cha mstari katika hatua kwa kutumia CSS tu.
02 ya 04
Kujenga Gradients Diagonal-Angle ya Gradient
Kuanza na kuacha pointi huamua angle ya gradient. Vipande vingi vya mstari vinaanzia juu hadi chini au kushoto kwenda kulia. Lakini inawezekana kujenga gradient inayohamia kwenye mstari wa diagonal. Picha kwenye ukurasa huu inaonyesha mwelekeo rahisi unaosababisha angle ya daraja 45 kwenye picha kutoka kulia kwenda kushoto.
Angles kuelezea Mstari Mzuri
Pembe ni mstari kwenye mzunguko wa kufikiri katikati ya kipengele. 0deg inakaribia, pointi 90deg ya kulia, pointi 180 mbali, na pointi 270deg upande wa kushoto. Unaweza kufafanua angle yoyote kutoka digrii 0 hadi 359.
Unapaswa kutambua kuwa katika mraba, angle ya shahada ya 45 huenda kutoka kona ya juu kushoto hadi kulia chini, lakini katika mstatili alama za mwanzo na za mwisho ni kidogo nje ya sura, kama unaweza kuona katika picha.
Njia ya kawaida zaidi ya kufafanua gradient diagonal ni kufafanua kona, kama vile juu ya juu na gradient kuondoka kutoka kona hiyo na kona kinyume. Unaweza kufafanua uwezekano wa kuanzia kwa maneno yafuatayo:
- juu
- haki
- chini
- kushoto
- kituo
Na zinaweza kuunganishwa kuwa maalum zaidi, kama vile:
- juu ya kulia
- juu kushoto
- kituo cha juu
- chini ya kulia
- chini kushoto
- kituo cha chini
- kituo cha haki
- kituo cha kushoto
Hapa ni CSS kwa gradient sawa na ile iliyoonyeshwa, nyekundu na nyeupe kusonga kutoka kona ya juu kulia hadi kushoto ya chini:
background: ## 901A1C;
background-image: -moz-linear-gradient (juu ya juu, # 901A1C 0%, # FFFFFF 100%);
image-background: -webkit-gradient (linear, juu ya juu, kushoto chini, rangi-stop (0, # 901A1C), rangi-stop (1, #FFFFFF));
background: -webkit-linear-gradient (juu ya juu, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (juu ya juu, # 901A1C 0%, #ffffff 100%);
background: -ms-linear-gradient (juu ya juu, # 901A1C 0%, #ffffff 100%);
background: gradient line (juu ya juu, # 901A1C 0%, #ffffff 100%);
Huenda umeona kuwa hakuna filters za IE katika mfano huu. Hiyo ni kwa sababu IE inaruhusu tu aina mbili za filters: juu na chini (default) na kushoto kwenda kulia (kwa GradientType = 1 switch).
Angalia hii diagonal linear gradient katika hatua kwa kutumia CSS tu.
03 ya 04
Rangi la Kuacha
Pamoja na gradients ya CSS3, unaweza kuongeza rangi nyingi kwa fadhila yako ili kuunda hata madhara ya fancier. Ili kuongeza rangi hizi, unayoongeza rangi ya ziada hadi mwishoni mwa mali yako, ikitenganishwa na vito. Unapaswa kujumuisha wapi kwenye mstari rangi zinapaswa kuanza au kuishia pia.
Filters Internet Explorer inasaidia tu kuacha rangi mbili, hivyo wakati wewe kujenga gradient hii, unapaswa tu ni pamoja na rangi ya kwanza na ya pili unataka kuonyesha.
Hapa ni CSS kwa gradient ya juu ya 3:
background: #ffffff;
background: -moz-linear-gradient (kushoto, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (linear, juu ya kushoto, juu ya juu, rangi-stop (0%, # ffffff), rangi-stop (51%, # 901A1C), rangi-stop (100%, # ffffff));
background: -webkit-linear-gradient (kushoto, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear-gradient (kushoto, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -ms-linear-gradient (kushoto, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Chuja: Programu: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: gradient line (kushoto, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Angalia hii gradient linear na ataacha rangi tatu katika hatua kwa kutumia CSS tu.
04 ya 04
Fanya Gradients ya Kujenga Rahisi
Kuna maeneo mawili ambayo ninapendekeza kukusaidia kujenga gradients, kila mmoja ana faida na vikwazo kwao, sijapata mjenzi wa gradient ambaye anafanya kila kitu bado.
Jumuiya ya mwisho ya CSS Gradient
Jenereta hii ya gradient inajulikana sana kwa sababu inafanya kwa namna ileile kwa wajenzi wa gradient katika programu kama Photoshop. Pia ninaipenda kwa sababu inakupa upanuzi wa CSS wote, sio tu Webkit na Mozilla. Tatizo na generator hii ni kwamba inasaidia tu gradients usawa na wima. Ikiwa unataka kufanya gradients diagonal, una kwenda jenereta nyingine mimi kupendekeza.
CSS3 Generator Gradient
Jenereta hii imechukua muda mfupi kuelewa kuliko ya kwanza, lakini inasaidia kubadilisha kubadilisha mwelekeo.
Ikiwa unajua ya jenereta nyingine ya CSS ya Jumuiya ambayo unapenda bora zaidi kuliko haya, tafadhali tujulishe .