01 ta '04
Ħolqien ta 'Gradients Lineari Cross-Browser ma' CSS3
Gradjenti lineari
L-aktar tip komuni ta 'xaqliba li se tara huwa xaqliba lineari ta' żewġ kuluri. Dan ifisser li l-gradjent se jimxi f'linja dritta li tinbidel gradwalment mill-ewwel kulur għat-tieni tul dik il-linja. L-immaġni f'din il-paġna turi gradjent sempliċi mix-xellug għal-lemin ta '# 999 (griż skur) għal #fff (abjad).
Gradients lineari huma l-aktar faċli biex jiddefinixxu, u għandhom l-aktar appoġġ fil-browsers. Il-gradjenti lineari CSS3 huma appoġġjati f'U Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, u Safari 4+. Internet Explorer jista 'jżid gradjenti bl-użu ta' filtru u jappoġġjahom lura għal IE 5.5. Din mhix CSS3, iżda hija għażla għall-kompatibilità bejn il-browser.
Meta tiddefinixxi gradjent għandek tiddefinixxi bosta affarijiet differenti:
- X'tip ta 'xaqliba huwa lineari jew radjali
- Fejn il-pendil għandu jibda
- Fejn ix-xaqliba għandha tieqaf
- Liema kuluri huma fil-gradjent u fejn għandhom jibdew u jieqfu
Biex tiddefinixxi gradjenti lineari bl-użu ta 'CSS3, tikteb:
gradjent lineari ( angolu jew ġenb jew kantuniera , waqfien tal- kulur , waqfien tal-kulur )
- L-ewwel inti tiddefinixxi t-tip ta 'gradjent bl-isem ta' grad lineari .
- Imbagħad, tiddefinixxi l-punti tal-bidu u tal-waqfien tal-gradjent f'wieħed miż-żewġ modi: l-angolu tal-linja fi gradi minn 0 sa 359, b'0 gradi li jindikaw straight up. Jew bil-funzjoni "ġenb jew kantuniera", bħalma huma xellug, dritt, qiegħ, u quċċata. Dawn se jiġu spjegati f'aktar dettall fuq il-paġna li jmiss. Jekk tħallihom barra, il-gradjent jaqa 'minn fuq għal isfel ta' l-element.
- Imbagħad inti tiddefinixxi l-waqfiet tal-kulur. Tiddefinixxi l-waqfiet tal-kulur bil-kodiċi tal-kulur u perċentwal fakultattiv. Il-persentaġġ jgħidlek lill-browser fejn fuq il-linja tibda jew tispiċċa b'dak il-kulur. L-inadempjenza hija li tpoġġi l-kuluri indaqs matul il-linja. Għandek titgħallem aktar dwar waqfiet tal-kulur fil-paġna 3.
Għalhekk, biex tiddefinixxi l-gradjent ta 'hawn fuq ma' CSS3, tikteb:
gradjent lineari (ix-xellug, # 999999 0%, #ffffff 100%);
U biex tqiegħdha bħala l-isfond ta 'DIV tikteb:
div {
immaġni ta 'sfond: gradjent lineari (xellug, # 999999 0%, #ffffff 100%;
}
Estensjonijiet tal-Browser għal gradjenti Lineari CSS3
Biex tikseb il-pendil tiegħek taħdem bejn il-brawżer, għandek tuża estensjonijiet tal-brawżers għall-biċċa l-kbira tal-browsers u filtru għall-Internet Explorer 9 u inqas (fil-fatt 2 filtri). Dawn kollha jieħdu l-istess elementi biex jiddefinixxu l-pendil tiegħek (ħlief li tista 'tiddefinixxi biss gradjenti b'2 kuluri f'IE).
Filtri u Estensjoni tal-Microsoft -Internet Explorer hija l-aktar sfida għall-appoġġ, għax għandek bżonn tliet linji differenti biex tappoġġja l-verżjonijiet tal-browser differenti. Biex tikseb l-griż ta 'fuq għal gradjent abjad tikteb:
/ * IE 5.5-7 * /
filtru: 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-lineari-gradjent (xellug, # 999999 0%, #ffffff 100%);
Estensjoni ta 'Mozilla - L- estensjoni ta' -moz- jaħdem bħall-proprjetà CSS3, biss bl-estensjoni -moz-. Biex tikseb il-gradjent ta 'hawn fuq għal Firefox, ikteb:
-moz-lineari-gradient (xellug, # 999999 0%, #ffffff 100%);
L-Estensjoni tal-Opera - L- estensjoni -o- żżid gradjenti għall-Opera 11.1+. Biex tikseb ix-xaqliba ta 'hawn fuq, ikteb:
-o-lineari-gradjent (xellug, # 999999 0%, #ffffff 100%);
Estensjoni tal-Webkit-L- estensjoni tal-internet taħdem ħafna bħall-proprjetà CSS3. Biex tiddefinixxi l-gradjent ta 'hawn fuq għal Safari 5.1+ jew Chrome 10+ tikteb:
-webkit-linear-gradient (xellug, # 999999 0%, #ffffff 100%);
Hemm ukoll verżjoni anzjana tal-estensjoni tal-Webkit li taħdem ma 'Chrome 2+ u Safari 4+. Fiha tiddefinixxi t-tip ta 'gradjent bħala valur, aktar milli fl-isem tal-proprjetà. Biex tikseb l-gradjent griż għal abjad ma 'din l-estensjoni, ikteb:
-webkit-gradient (lineari, fuq ix-xellug, fuq tal-lemin, kulur-waqfien (0%, # 999999), kulur-waqfien (100%, # ffffff));
Kodiëi CSS Gradwali Lineari sħiħ CSS3
Għal appoġġ full cross-browser biex tikseb l-griż għal gradjent abjad t'hawn fuq int għandek l-ewwel tinkludi kulur solidu alternattiv għal browsers li ma jsostnux gradjenti, u l-aħħar oġġett għandu jkun l-istil CSS3 għal browsers li huma kompletament konformi. Allura, tikteb:
isfond: # 999999;
isfond: -moz-linear-gradient (xellug, # 999999 0%, #ffffff 100%);
isfond: -webkit-gradient (lineari, fuq ix-xellug, fuq tal-lemin, kulur-waqfien (0%, # 999999), kulur stop (100%, #ffffff));
isfond: -webkit-linear-gradient (xellug, # 999999 0%, #ffffff 100%);
sfond: -o-lineari-gradjent (xellug, # 999999 0%, #ffffff 100%);
isfond: -ms-lineari-gradjent (xellug, # 999999 0%, #ffffff 100%);
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
sfond: gradjent lineari (xellug, # 999999 0%, #ffffff 100%);
Il-paġni li jmiss f'dan it-tutorja jispjegaw il-partijiet ta 'gradjent f'aktar dettall, u l-aħħar paġna tindika li inti għodda li hija mod eċċellenti biex toħloq gradjenti CSS3 awtomatikament.
Ara dan il-gradjent lineari fl-azzjoni billi tuża biss CSS.
02 ta '04
Ħolqien ta 'Gradwati Diagonali - L-Angolu tal-Gradjent
Il-punti tal-bidu u tal-waqfien jiddeterminaw l-angolu tal-gradjent. Il-biċċa l-kbira tal-gradjenti lineari huma minn fuq għal isfel jew fuq ix-xellug għal-lemin. Iżda huwa possibbli li nibnu xaqliba li timxi fuq linja dijagonali. L-immaġni f'din il-paġna turi xaqliba sempliċi li timxi b'angolu ta '45 grad tul l-immaġni minn fuq il-lemin għax-xellug.
Angoli biex Tiddefinixxi l-Linja Gradjenti
L-angolu huwa linja fuq ċirku immaġinarju fiċ-ċentru ta 'l-element. 0deg punti sa, 90deg punti lejn il-lemin, 180deg punti 'l isfel, u 270deg punti lejn ix-xellug. Tista 'tiddefinixxi kwalunkwe angolu minn 0 sa 359 gradi.
Għandek tinnota li f'angolu kwadru, angolu ta '45 grad jiċċaqlaq mir-rokna tax-xellug ta' fuq lejn il-lemin tal-qiegħ, iżda f'rettangolu l-punti tal-bidu u tat-tmiem huma kemxejn barra mill-forma, kif tista 'tara fl-immaġini.
L-aktar mod komuni biex tiġi definita xaqliba dijagonali huwa li tiddefinixxi kantuniera, bħal fuq id-dritt tal-lemin u l-gradjent se jimxi minn dik il-kantuniera sal-kantuniera opposta. Tista 'tiddefinixxi l-post tal-bidu bil-kliem prinċipali li ġejjin:
- top
- dritt
- qiegħ
- xellug
- ċentru
U jistgħu jingħaqdu biex ikunu aktar speċifiċi, bħal:
- fuq nett
- fuq ix-xellug
- ċentru ta 'fuq
- isfel fuq il-lemin
- qiegħ ix-xellug
- ċentru tal-qiegħ
- ċentru tad-dritt
- ċentru tax-xellug
Hawn hu l-CSS għal xaqliba simili għal dik stampa, aħmar għal abjad li jiċċaqlaq mill-kantuniera tal-lemin sa qiegħ ix-xellug:
isfond: ## 901A1C;
immaġni ta 'sfond: -moz-linear-gradient (lemin ta' fuq, # 901A1C 0%, # FFFFFF 100%);
immaġni tal-isfond: -webkit-gradient (lineari, fuq tal-lemin, qiegħ ix-xellug, kulur-waqfien (0, # 901A1C), kulur-waqfien (1, #FFFFFF));
isfond: -webkit-lineari-gradient (top tal-lemin, # 901A1C 0%, #ffffff 100%);
isfond: -o-lineari-gradjent (lemin ta 'fuq, # 901A1C 0%, #ffffff 100%);
sfond: -ms-lineari-gradjent (lemin ta 'fuq, # 901A1C 0%, #ffffff 100%);
sfond: lineari-gradjent (lemin ta 'fuq, # 901A1C 0%, #ffffff 100%);
Jista 'jkollok innutat li m'hemm l-ebda filtru IE f'dan l-eżempju. Dan minħabba li l-IE jippermetti biss żewġ tipi ta 'filtri: minn fuq għal isfel (l-inadempjenza) u minn fuq ix-xellug għal-lemin (bit-GradientType = swiċċ 1).
Ara dan il-gradjent djagonali lineari fl-azzjoni billi tuża biss CSS.
03 ta '04
L-Istands tal-Kulur
Bil-gradjenti lineari CSS3, tista 'żżid kuluri multipli mal-gradjent tiegħek biex toħloq effetti anke aktar fancier. Biex iżżid dawn il-kuluri, inti żid kuluri addizzjonali fuq l-aħħar tal-propjetà tiegħek, separati b'kommijiet. Għandek tinkludi fejn fuq il-linja l-kuluri għandhom jibdew jew jispiċċaw ukoll.
Il-filtri tal-Internet Explorer biss jappoġġaw żewġ waqfiet tal-kulur, għalhekk meta tibni dan il-gradjent, għandek tinkludi biss l-ewwel u t-tieni kuluri li trid turi.
Hawn hu s-CSS għall-pendil ta '3 kuluri t'hawn fuq:
isfond: #ffffff;
isfond: -moz-linear-gradient (xellug, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
isfond: -webkit-gradient (lineari, fuq ix-xellug, fuq tal-lemin, kulur-waqfien (0%, # ffffff), kulur-waqfien (51%, # 901A1C), kulur waqfien (100%, #ffffff));
isfond: -webkit-linear-gradient (xellug, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
isfond: -o-lineari-gradjent (xellug, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
sfond: -ms-lineari-gradjent (xellug, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
isfond: gradjent lineari (xellug, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Ara dan il-gradjent lineari bi tliet waqfiet tal-kulur fl-azzjoni billi tuża biss CSS.
04 ta '04
Agħmel Gradjenti tal-Bini eħfef
Hemm żewġ siti nirrakkomandalek li tgħinek tibni gradjenti, kull wieħed minnhom għandu benefiċċji u żvantaġġi għalihom, ma sibtx gradient bennej li jagħmel dak kollu s'issa.
Ultimate CSS Gradient Generator
Dan il-ġeneratur gradjent huwa popolari ħafna minħabba li jwettaq b'mod simili għal bennejja tal-gradjent fi programmi bħal Photoshop. Nixtieq ukoll għaliex tagħtik l-estensjonijiet kollha tas-CSS, mhux biss Webkit u Mozilla. Il-problema ma 'dan il-ġeneratur hija li tappoġġja biss gradjenti orizzontali u vertikali. Jekk trid tagħmel gradjenti djagonali, trid tmur fil-ġeneratur l-ieħor nirrakkomanda.
CSS3 Gradient Generator
Dan il-ġeneratur ħa lili ftit itwal biex nifhemh minn l-ewwel wieħed, iżda jappoġġa t-tibdil tad-direzzjoni għal dijagonali.
Jekk taf ta 'Ġeneratur Gradjent CSS ieħor li tixtieq aħjar minn dawn, għarrafna .