01 of 04
Abuuritaanka Iskeelka-Jaan-qaadaha Dareemo toosan oo leh CSS3
Dareemayaal toosan
Nooca ugu caansan ee baaxad-weynaha aad arki doontid waa xajmiga toosan ee laba midab. Tani waxay ka dhigan tahay in jajabku u dhaqaaqi doono xariiq toosan oo si tartiib tartiib ah u beddelaya midabka koowaad ilaa kan labaad ee xadka. Sawirka boggan wuxuu muujinayaa xajmiga bidix-ka-saxda ah ee # 999 (mugdi madow) ilaa #fff (cad).
Dareemayaasha toosan ayaa ah kuwa ugu fudud ee lagu qeexo, waxayna leeyihiin taageerada ugu badan ee daalacashada. CSS3 heerarka toosan ayaa lagu taageeraa Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, iyo Safari 4+. Internet Explorer waxay ku dari kartaa dufan adoo isticmaalaya shaandheyn waxayna ku taageeri karaan IE 5.5. Tani ma aha CSS3, laakiin waa ikhtiyaar udhexaadinta iskudhufka iskutallaabta.
Markaad qeexdo shaxanka waxaad u baahan tahay inaad qeexdo waxyaalo kala duwan:
- Waa noocee xajmiga uu yahay - linear or radial
- Meelaha duufaanku bilaabmayo
- Meelaha duufaanku istaago
- Midabada ay ku jiraan xajmiga iyo meesha ay tahay inay bilaabaan oo joogsadaan
Si aad u qeexdo duufaanada toosan adoo isticmaalaya CSS3, waxaad u qortaa:
xagasha toosan ( xagasha ama dhinac ama gees , durug midab leh , istaagid midab )
- Ugu horreyn waxaad ku qeexaysaa nooca xajmiga leh ee magaca qadka toosan .
- Kadibna, waxaad qeexaysaa dhibcooyinka bilawga iyo istaagida shaxanka mid ka mid ah labada siyaabood: xagasha qadka ee heerarka 0 ilaa 359, oo leh 0 darajo toos ah. Ama waxqabadka "dhinac ama gees", sida bidix, midig, hoose, iyo sare. Kuwaas waxaa lagu sharxi doonaa faahfaahin dheeraad ah bogga soo socda. Haddii aad kuwan ka baxdid, dufcaddu waxay ka soo baxaysaa dusha sare ee hoose.
- Kadibna waxaad ku qeexdaa joojinta midabka. Waxaad qeexaysaa istaagiska midabka midabka midabka iyo boqolda xulasho. Boqolkiiba wuxuu ku tilmaamayaa barta shabakada meesha ku taal khadka si uu u bilaabo ama u dhamaado midabkaas. Qalabka ayaa ah in si siman loo dhigo xariiqda. Waxaad baran doontaa wax badan oo ku saabsan joogsiga midabada bogga 3aad.
Marka, si aad u qeexdo korantada kor ku xusan ee CSS3, waxaad ku qortaa:
qiyaasta toosan (bidix, # 999999 0%, #ffffff 100%);
Iyo inaad u dhigto asalka asalka ah ee DIV aad qori kartid:
div {
sawir-muuqaal: gadaasheed (bidix, # 999999 0%, #ffffff 100%;
}
Fududeeyaha Browser ee CSS3 Dareemo toosan
Si aad u hesho shaashaddaada si aad u shaqeyso shabakada iskutallaabta ah, waxaad u baahan tahay inaad isticmaasho ballaarinta browserka badiyaa daalacashada iyo shaashadda Internet Explorer 9 oo hooseeya (dhab ahaantii laba shaandheyn). Dhamaan kuwan waxay qaataan walxo isku mid ah si ay u qeexaan heerka xajmigaaga (marka laga reebo inaad kaliya ku qeexi karto gradient-2 midabka IE).
Microsoft Filters iyo Extension - Shabakadda Internetka ayaa ah kuwa ugu dhib badan inay taageeraan, sababtoo ah waxaad u baahan tahay sadex siyaabood oo kala duwan si ay u taageeraan qaababka kala duwan ee shabakadaha. Si aad u hesho calaamadda kor ku xusan si aad u xajisato waxaad cadeyn laheyd:
/ * IE 5.5-7 * /
sheyga: 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 (bidix, # 999999 0%, #ffffff 100%);
Mozilla Extension - Qalabka-kordhinta wuxuu u shaqeeyaa sida hantida CSS3, oo kaliya marka la dheereeyo. Si aad u hesho shaxanka kor ku xusan Firefox, qor:
-moz-linear-gradient (bidix, # 999999 0%, #ffffff 100%);
Farsamaynta Farsamada -How-kordhinta wuxuu kordhiyaa dufcadii Opera 11.1+. Si aad u hesho jajab sare, qor:
-o-linear-gradient (bidix, # 999999 0%, #ffffff 100%);
Kordhinta Webkit -Waxbarashada-kordhinta waxay u shaqeysaa sida CSS3 hantida. Si aad u qeexdo xajmiga kor ku xusan Safari 5.1+ ama Chrome 10+ waxaad ku qortaa:
-webkit-linear-gradient (bidix, # 999999 0%, #ffffff 100%);
Waxaa sidoo kale jira version hore ee Webkit extension oo la shaqeeya Chrome 2+ iyo Safari 4+. Halkaas waxaad ku qeexday nooca gradient sida qiimaha, halkii laga heli lahaa magaca hantida. Si aad u hesho cawlka caanaha leh ee cadaankiisu sarreeyo, qor:
-webkit-gradient (linear, sagxada sare, sagaalka sare, midab-joojin (0%, # 999999), midab-istaag (100%, # ffffff));
Full CSS3 Code CSS Xeerka toosan
Wixii taageero buuxda oo shabakad ah si aad u hesho muraayad korantada heerka sare ka hor waa inaad ku dartaa midab adag oo loogu talagalay daalacayaasha aan taageersan digriyadaha, iyo sheyada ugu dambeysa waa in ay ahaato qaabka CSS3 ee daalacayaasha si buuxda u waafaqsan. Marka, waxaad qori:
asalka: # 999999;
asalka: -moz-linear-gradient (bidix, # 999999 0%, #ffffff 100%);
Jaantuska: -webkit-gradient (qoorta, korka bidix, sare ee midig, midab-furan (0%, # 999999), midab-istaag (100%, # ffffff));
asalka: -webkit-linear-gradient (bidix, # 999999 0%, #ffffff 100%);
asalka: -o-linear-gradient (bidix, # 999999 0%, #ffffff 100%);
asalka: -ms-linear-gradient (bidix, # 999999 0%, #ffffff 100%);
sheyga: Progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: Progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
asalka: asal-xajin (bidix, # 999999 0%, #ffffff 100%);
Boggaga soo socda ee casharkan ayaa sharxaya qaybaha shaxanka ee faahfaahin dheeraad ah, bogga ugu dambeeya wuxuu kuu tilmaamayaa qalab kaas oo ah habka ugu wanaagsan ee loo abuuro dufcadaha CSS3 si toos ah.
Fiiri xajmigaan toosan ee ficil ahaan adigoo isticmaalaya CSS kaliya.
02 of 04
Abuuritaanka Diagonal Gradients-Xaglaha Dufcadda
Dhibcooyinka bilawga iyo istaagida waxay go'aamiyaan xagasha heerka xajmiga. Inta badan garaafyada toosan ayaa ka soo koraya ilaa hoose ama bidix illaa midig. Laakiin waxaa suurtogal ah in la dhiso shaxan oo u dhaqaaqa xariijinta xargaha. Sawirka ku yaal boggan wuxuu muujinayaa xajmiga fudud oo u guuraya xagal 45degree ah oo ku yaala sawirka midigta bidixda.
Xuduudaha si ay u Qeexaan Khadka Dabiiciga ah
Xagasha waa xariiq ku wareegsan goobada khayaaliga ah ee ku yaal bartamaha qaybta. 0deg dhibcood, 90deg dhibcood dhinaca midig, 180deg dhibcood, iyo 270deg dhibcaha bidix. Waxaad qeexi kartaa xagal kasta 0 ilaa 359 digrii.
Waa in aad xusuusataa in wareega, xagasha 45 darajo ka socdo dhinaca bidixda sare ee dhinaca midigta, laakiin leydi waa in leydiinka bilawga iyo dhammaadka dhibcaha uu ka baxsan yahay qaabka, sida aad u arki karto sawirka.
Habka ugu badan ee lagu qeexayo xajmiga xajmiga ayaa ah inuu qeexo geeska, sida midigta sare iyo jajabkuna wuxuu ka dhaqaaqi doonaa geeska gees ilaa geeska ka soo horjeeda. Waxaad qeexi kartaa boostada bilawga ah ee ereyada muhiimka ah ee soo socda:
- sare
- sax
- hoose
- bidix
- xarun
Waxaana lagu dari karaa si gaar ah, sida:
- dhinaca sare
- bidix sare
- xarun sare
- dhinaca hoose
- hoose ee bidix
- xarun hoose
- xarun sax ah
- xariiqda bidix
Halkan waxaa ah CSS-ga garbaha oo la mid ah midka sawir leh, casaan cad oo ka soo guuraya dhinaca midigta sare ee dhanka bidixda bidix:
asalka: ## 901A1C;
sawir-muuqaal: -moz-linear-gradient (top top, # 901A1C 0%, # FFFFFF 100%);
sawir-muuqaal: -webkit-gradient (linear, sagaal sare, hoose bidix, midab-istaag (0, # 901A1C), midab-joojin (1, #FFFFFF));
asalka: -webkit-linear-gradient (top top, # 901A1C 0%, #ffffff 100%);
asalka: -o-linear-gradient (top top, # 901A1C 0%, #ffffff 100%);
asalka: -ms-linear-gradient (top top, # 901A1C 0%, #ffffff 100%);
asalka: qaab-toosan (dusha sare, # 901A1C 0%, #ffffff 100%);
Waxaa laga yaabaa inaad ogaatay in aysan jirin sifooyinka IE ee tusaalahan. Taasi waa sababta oo ah IE wuxuu kaliya u oggolaanayaa laba nooc oo shaandhayn ah: kore ilaa hoose (default) iyo bidixda midig (oo leh GradientType = 1 badalasho).
Fiiri xajmiga xajmiga xaglaha ah ee ficil ahaan adigoo adeegsanaya CSS kaliya.
03 04
Midabada Midabka
Iyada oo CSS3 dareenka toosan, waxaad ku dari kartaa midabo kala duwan si aad u abuurto saameyn xiif leh. Si loo daro midabadaas, waxaad ku dartaa midabyo dheeraad ah ilaa dhamaadka alaabtaada, adoo kala tagay. Waa inaad ku dartaa meesha xariiqda ee midabada midabada ay tahay inuu bilaabo ama dhamaado.
Isticmaalka Internet Explorer wuxuu taageeraa oo kaliya laba meelood oo midabeysan, marka marka aad dhisto shaxan, waa inaad ku dartaa oo kaliya midabada koowaad iyo labaad ee aad rabto inaad muujiso.
Halkan waxaa ah CSS-ga kor ku xusan heerka 3-da midabka:
asalka: #ffffff;
asalka: -moz-linear-gradient (bidix, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Jaantuska-gebgit-gradient (qadka tooska ah, sare ee sare, midka sare, midab-joojin (0%, # ffffff), midab-joojin (51%, # 901A1C), midab-joojin (100%, # ffffff));
asalka: -webkit-linear-gradient (bidix, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
asalka: -o-linear-gradient (bidix, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
asalka: -ms-linear-gradient (bidix, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
sheyga: Progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
asalka: jaangooye-toosan (bidix, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Fiiri xajmigaan toosan oo leh saddex meelood oo istaag ah oo ficil ah iyadoo la adeegsanayo CSS kaliya.
04 04
Samee Heerarka Dhismaha Dhibcaha
Waxaa jira laba goobood oo aan kugula talineyno in aan kaa caawiyo sidii aad u dhisi lahayd daadad, iyaga oo mid waliba faa'iido u yeesho iyo waxyeello iyaga u gaar ah, ma aanan helin dhismaha xajmiga oo wax walba sameeya.
Ultimate CSS Gradient Generator
Jeneraytani waa mid aad u jecel, sababtoo ah waxay u egtahay qaab isku mid ah oo lagu dhisi karo barnaamijyada sida Photoshop. Sidoo kale waan jeclahay sababta oo ah waxay ku siinaysaa dhammaan ballaadhinta CSS, ma ahan kaliya Webkit iyo Mozilla. Dhibaatada ka dhalata koronto-dhaliyuhu waa in ay taageerto oo kaliya taageerada dusha sare iyo midigba. Haddii aad rabto in aad sameysatid xajmiga garaaca, waa inaad aadaa jeneraalka kale ee aan kugula taliyo.
CSS3 Gradient Generator
Koronto-dhaliyuhu wuxuu igu qaadey muddo ka dheer sidii aan u fahmi lahaa tan koowaad, laakiin waxa uu taageerayaa isbeddelka jihada ee xariiqda.
Haddii aad ogtahay CSS Gradient Generator kale oo aad jeceshahay tan ka fiican, fadlan nala soo socodsii .