01 o 04
Creu Graddfeydd Llinol Traws-Browser gyda CSS3
Graddiannau Llinol
Y math mwyaf cyffredin o raddiant y gwelwch chi yw graddiant llinellol o ddau liw. Golyga hyn y bydd y graddiant yn symud mewn llinell syth yn newid yn raddol o'r lliw cyntaf i'r ail ar hyd y llinell honno. Mae'r ddelwedd ar y dudalen hon yn dangos graddiant syml chwith i dde o # 999 (llwyd tywyll) i #fff (gwyn).
Graddiant llinol yw'r hawsaf i'w ddiffinio, a chanddo'r gefnogaeth fwyaf mewn porwyr. Cefnogir graddiannau llinellol CSS3 yn Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, a Safari 4+. Gall Internet Explorer ychwanegu graddiant gan ddefnyddio hidlydd a'u cefnogi yn ôl i IE 5.5. Nid yw hyn yn CSS3, ond mae'n opsiwn ar gyfer cydweddoldeb traws-borwr.
Pan fyddwch chi'n diffinio graddiant mae angen i chi ddiffinio sawl peth gwahanol:
- Pa fath o raddiant ei fod yn llinellol neu'n radial
- Lle dylai'r graddiant ddechrau
- Lle y dylai'r graddiant stopio
- Pa lliwiau sydd yn y graddiant a lle y dylent ddechrau a stopio
I ddiffinio graddau llinol gan ddefnyddio CSS3, rydych chi'n ysgrifennu:
graddiant llinol ( ongl neu ochr neu gornel , stop lliw , stop lliw )
- Yn gyntaf, rydych chi'n diffinio'r math o raddiant gyda'r enw linear -gradient.
- Yna, rydych chi'n diffinio pwyntiau cychwyn a stopio'r graddiant mewn un o ddwy ffordd: ongl y llinell mewn graddau o 0 i 359, gyda 0 gradd yn pwyntio'n syth. Neu gyda'r swyddogaeth "ochr neu gornel", fel y chwith, i'r dde, i'r gwaelod, a'r brig. Bydd y rhain yn cael eu hesbonio'n fanylach ar y dudalen nesaf. Os byddwch chi'n gadael y rhain allan, bydd y graddiant yn llifo o'r brig i waelod yr elfen.
- Yna rydych chi'n diffinio'r lliw yn dod i ben. Rydych chi'n diffinio'r lliw yn stopio gyda'r cod lliw a chanran ddewisol. Mae'r ganran yn dweud wrth y porwr ar y llinell i ddechrau neu ddiwedd y lliw hwnnw. Y rhagosod yw gosod y lliwiau yn gyfartal ar hyd y llinell. Byddwch yn dysgu mwy am stopio lliw ar dudalen 3.
Felly, i ddiffinio'r graddiant uchod gyda CSS3, rydych chi'n ysgrifennu:
graddiad llinol (chwith, # 999999 0%, #ffffff 100%);
Ac i'w osod fel cefndir DIV rydych chi'n ysgrifennu:
div {
cefndir-ddelwedd: graddiad llinellol (chwith, # 999999 0%, #ffffff 100%;
}
Estyniadau Porwr ar gyfer Graddau Llinol CSS3
I gael eich graddiant i weithio ar draws porwr, mae angen i chi ddefnyddio estyniadau porwr ar gyfer y rhan fwyaf o borwyr a hidlydd ar gyfer Internet Explorer 9 ac is (mewn gwirionedd 2 hidlydd). Mae'r rhain i gyd yn cymryd yr un elfennau i ddiffinio eich graddiant (ac eithrio mai dim ond graddiannau 2-lliw yn IE y gallwch eu diffinio).
Filters and Extension Microsoft -Internet Explorer yw'r cymorth mwyaf heriol, oherwydd mae angen tair llinell wahanol arnoch i gefnogi'r gwahanol fersiynau porwr. I gael y graddiant llwyd i wyn uchod, byddech yn ysgrifennu:
/ * IE 5.5-7 * /
hidlydd: 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 (chwith, # 999999 0%, #ffffff 100%);
Estyniad Mozilla -The -moz-estyniad yn gweithio fel eiddo CSS3, dim ond gyda'r -moz-estyniad. I gael y graddiant uchod ar gyfer Firefox, ysgrifennwch:
-moz-linear-gradient (chwith, # 999999 0%, #ffffff 100%);
Estyniad Opera - Mae'r estyniad -o- yn ychwanegu graddau i Opera 11.1+. I gael y graddiant uchod, ysgrifennwch:
-o-linell-raddiant (chwith, # 999999 0%, #ffffff 100%);
Estyniad Webkit -The -webkit- estyniad yn gweithio llawer fel eiddo CSS3. I ddiffinio'r graddiant uchod ar gyfer Safari 5.1+ neu Chrome 10+ rydych chi'n ysgrifennu:
-webkit-linear-gradient (chwith, # 999999 0%, #ffffff 100%);
Mae hefyd fersiwn hŷn o'r estyniad Webkit sy'n gweithio gyda Chrome 2+ a Safari 4+. Yma, rydych chi'n diffinio'r math o raddiant fel gwerth, yn hytrach nag yn enw'r eiddo. I gael y graddiant llwyd i wyn gyda'r estyniad hwn, ysgrifennwch:
-webkit-gradient (top llinellol, chwith, top dde, lliw-stop (0%, # 999999), lliw-stop (100%, # ffffff));
Côd CSS Graddfa Llinellol Llawn CSS3
I gael cymorth traws-borwr llawn i gael y graddiant llwyd i wyn uwch, dylech chi gynnwys lliw sych yn ôl ar gyfer porwyr nad ydynt yn cefnogi graddiant, a dylai'r eitem olaf fod yn arddull CSS3 ar gyfer porwyr sy'n cydymffurfio'n llwyr. Felly, rydych chi'n ysgrifennu:
cefndir: # 999999;
cefndir: -moz-linear-gradient (chwith, # 999999 0%, #ffffff 100%);
cefndir: -webkit-gradient (top llinellol, chwith, top dde, lliw-stop (0%, # 999999), lliw-stop (100%, # ffffff));
cefndir: -webkit-linear-gradient (chwith, # 999999 0%, #ffffff 100%);
cefndir: -o-linear-gradient (chwith, # 999999 0%, #ffffff 100%);
cefndir: -ms-linear-gradient (chwith, # 999999 0%, #ffffff 100%);
hidlydd: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
cefndir: llinell-graddiant (chwith, # 999999 0%, #ffffff 100%);
Mae'r tudalennau nesaf yn y tiwtorial hwn yn esbonio rhannau graddiant yn fwy manwl, ac mae'r dudalen olaf yn rhoi i chi offeryn sy'n ffordd ardderchog o greu graddau CSS3 yn awtomatig.
Gweler y graddiant llinellol hwn ar waith gan ddefnyddio CSS yn unig.
02 o 04
Creu Graddfeydd Diagonal - Angle y Graddiant
Mae'r pwyntiau cychwyn a stopio yn pennu ongl y graddiant. Mae'r rhan fwyaf o raddiantau llinol o'r top i'r gwaelod neu'r chwith i'r dde. Ond mae'n bosib adeiladu graddiant sy'n symud ar linell groeslin. Mae'r ddelwedd ar y dudalen hon yn dangos graddiant syml sy'n symud mewn ongl 45deg ar draws y ddelwedd o'r dde i'r chwith.
Anglau i Diffinio'r Llinell Graddiant
Mae'r ongl yn llinell ar gylch dychmygol yng nghanol yr elfen. 0deg o bwyntiau i fyny, 90deg o bwyntiau i'r dde, 180deg o bwyntiau i lawr, a 270deg o bwyntiau i'r chwith. Gallwch ddiffinio unrhyw ongl o 0 i 359 gradd.
Dylech nodi, mewn sgwâr, symudiad ongl 45 gradd o'r gornel chwith uchaf i'r dde ar y dde, ond mewn petryal mae'r pwyntiau cychwyn a diwedd ychydig ychydig y tu allan i'r siâp, fel y gwelwch yn y ddelwedd.
Y ffordd fwy cyffredin i ddiffinio graddiant groeslin yw diffinio cornel, megis y dde i'r dde a bydd y graddiant yn symud o'r gornel honno i'r gornel gyferbyn. Gallwch ddiffinio'r possiwn cychwyn gyda'r geiriau allweddol canlynol:
- top
- yn iawn
- gwaelod
- chwith
- canolfan
Ac fe ellir eu cyfuno i fod yn fwy penodol, megis:
- ar y dde i'r dde
- top chwith
- y ganolfan uchaf
- ar y dde i'r dde
- ar y chwith i'r chwith
- canolfan waelod
- canol iawn
- canol chwith
Dyma'r CSS ar gyfer graddiant tebyg i'r un yn y llun, coch i wyn yn symud o'r gornel dde uchaf i'r chwith i'r chwith:
cefndir: ## 901A1C;
cefndir-ddelwedd: -moz-linear-gradient (top dde, # 901A1C 0%, # FFFFFF 100%);
cefndir-ddelwedd: -webkit-gradient (llinell linell, top dde, gwaelod chwith, lliw-stop (0, # 901A1C), lliw-stop (1, #FFFFFF));
cefndir: -webkit-linear-gradient (top dde, # 901A1C 0%, #ffffff 100%);
cefndir: -o-linear-graddiant (top dde, # 901A1C 0%, #ffffff 100%);
cefndir: -ms-linear-gradient (top dde, # 901A1C 0%, #ffffff 100%);
cefndir: graddiad llinellol (top dde, # 901A1C 0%, #ffffff 100%);
Efallai eich bod wedi sylwi nad oes hidlwyr IE yn yr enghraifft hon. Y rheswm am hynny yw bod IE yn caniatáu dau fath o hidlwyr: uchaf i'r gwaelod (y rhagosodiad) ac i'r chwith i'r dde (gyda'r switsh GradientType = 1).
Gweler y graddiant llinelllin trawsliniol hwn ar waith gan ddefnyddio CSS yn unig.
03 o 04
Mae Lliw yn Gadael
Gyda graddiannau llinellol CSS3, gallwch ychwanegu lliwiau lluosog i'ch graddiant er mwyn creu effeithiau ffansi hyd yn oed. I ychwanegu'r lliwiau hyn, byddwch chi'n ychwanegu lliwiau ychwanegol i ddiwedd eich eiddo, wedi'u gwahanu gan gomiau. Dylech gynnwys ar y llinell y dylai'r lliwiau ddechrau neu ddod i ben hefyd.
Mae hidlwyr Internet Explorer ond yn cefnogi dau orffeniad lliw, felly pan fyddwch yn adeiladu'r graddiant hwn, dim ond y lliwiau cyntaf a'r ail y dymunwch eu dangos y dylech eu cynnwys.
Dyma'r CSS ar gyfer y graddiant 3-lliw uchod:
cefndir: #ffffff;
cefndir: -moz-linear-gradient (chwith, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
cefndir: -webkit-gradient (top llinellol, chwith, top dde, lliw-stop (0%, # ffffff), lliw-stop (51%, # 901A1C), lliw-stop (100%, # ffffff));
cefndir: -webkit-linear-gradient (chwith, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
cefndir: -o-linear-gradient (chwith, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
cefndir: -ms-linear-gradient (chwith, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
hidlydd: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
cefndir: llinell-graddiant (chwith, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Gwelwch y graddiant llinellol hwn gyda thri darn o liwiau ar waith gan ddefnyddio CSS yn unig.
04 o 04
Gwnewch Adeilad Graddau Hawsach
Mae yna ddau safle yr wyf yn eu hargymell i'ch helpu i adeiladu graddiant, mae gan bob un ohonynt fudd-daliadau ac anfanteision iddynt, nid wyf wedi dod o hyd i adeiladwr graddiant sy'n gwneud popeth eto.
Cynhyrchydd Graddio CSS Ultimate
Mae'r generadur graddiant hwn yn boblogaidd iawn oherwydd ei fod yn perfformio mewn modd tebyg i adeiladwyr graddiant mewn rhaglenni fel Photoshop. Rwyf hefyd yn ei hoffi gan ei fod yn rhoi holl estyniadau CSS i chi, nid yn unig Webkit a Mozilla. Y broblem gyda'r generadur hwn yw ei fod ond yn cefnogi graddiant llorweddol a fertigol. Os ydych chi eisiau gwneud graddiant croeslin, rhaid ichi fynd i'r generadur arall yr wyf yn ei argymell.
Generadur Graddfa CSS3
Cymerodd y generadur hwn ychydig yn hirach i'w ddeall na'r un cyntaf, ond mae'n cefnogi newid y cyfeiriad i groeslin.
Os ydych chi'n gwybod am Generadur Graddfa CSS arall yr hoffech chi yn well na'r rhain, rhowch wybod i ni .