01 na 04
Samar da Gudanar da masu bincike tare da CSS3
Ƙwararren Lissafi
Mafi yawan wanda ya fi saurin digiri za ku gani shi ne mai layi na launi biyu. Wannan yana nufin cewa ƙwararren za ta motsa a cikin wata hanya madaidaiciya canza sauƙi daga launin farko zuwa na biyu tare da wannan layin. Hoto a kan wannan shafi yana nuna sauƙin hagu-dama-dama na # 999 (duhu launin toka) zuwa #fff (fari).
Ƙwararrun linzamin kwamfuta shine mafi sauki don ƙayyade, kuma suna da mafi goyon baya a cikin masu bincike. CSS3 linear gradients suna goyan bayan Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, da Safari 4+. Internet Explorer na iya ƙara matakan ta yin amfani da tacewa kuma yana goyon bayan su zuwa IE 5.5. Wannan ba CSS3 ba ne, amma yana da wani zaɓi don daidaitattun giciye.
Lokacin da ka ƙayyade wani digiri kana buƙatar ƙayyade abubuwa daban-daban:
- Wani nau'i na gradient shi ne- linzamin kwamfuta ko radial
- Inda ya kamata dan wasan ya fara
- Inda mai karža ya kamata ya daina
- Mene ne launuka a cikin digiri kuma inda ya kamata su fara da dakatar
Don ƙayyade ƙirar linzamin kwamfuta ta amfani da CSS3, kuna rubuta:
linzaminar-gradient ( kusurwa ko gefen ko kusurwa , launi na launin , launi na launin )
- Da farko ka ƙayyade irin ƙwararren digiri tare da layin linzamin sunan.
- Bayan haka, zaku bayyana mahimmanci da kuma dakatar da maki na gradient a cikin hanyoyi guda biyu: kusurwar layin a digiri daga 0 zuwa 359, tare da digiri na digiri a tsaye. Ko tare da aikin "gefen ko kusurwa", kamar hagu, dama, ƙasa, da kuma saman. Wadannan za'a bayyana su dalla-dalla a shafi na gaba. Idan ka bar waɗannan, mai digiri zai gudana daga sama zuwa kasa na kashi.
- Sa'an nan kuma ka ayyana launi yana tsayawa. Kuna bayyana launi yana tsayawa tare da lambar launi da kuma kashi na zaɓi. Yawan yana gaya wa mai bincike inda za'a fara ko ƙare tare da wannan launi. Da tsoho shine sanya launuka a ko'ina tare da layin. Za ku koyi game da launi na launin shafi na 3.
Don haka, don ayyana hoton da ke sama tare da CSS3, ku rubuta:
linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Kuma don saita shi a matsayin tushen wani DIV ka rubuta:
saki
Bayanan hoton: layi-gradient (hagu, # 999999 0%, #ffffff 100%;
}
Binciken Bincike don CSS3 Linear Gradients
Domin samun gradient don yin aiki na giciye, kana buƙatar amfani da kariyar mai bincike ga mafi yawan masu bincike da kuma tace don Internet Explorer 9 da ƙananan (ainihin 2 filtata). Dukkan waɗannan suna ɗaukan waɗannan abubuwa don ƙayyadadden digiri naka (sai dai kawai zaka iya ƙayyade 2-launi na launi a IE).
Filin Microsoft da Tsaro -Internet Explorer shine mafi kalubale don tallafawa, domin kuna buƙatar layi daban-daban don tallafawa sassan daban-daban. Don samun saman launin toka zuwa farar fata za ku rubuta:
/ * IE 5.5-7 * /
tace: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-tace: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz-tsawo yana aiki kamar kayan CSS3, kawai tare da -moz- tsawo. Domin samun digiri na sama don Firefox, rubuta:
-moz-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Extension Opera -The -o- tsawo ƙara da gradients zuwa Opera 11.1+. Domin samun digiri na sama, rubuta:
-o-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Ƙasashen yanar gizo -The -webkit-tsawo yana aiki da yawa kamar dukiya na CSS3. Don ayyana gradient na sama don Safari 5.1+ ko Chrome 10+ ka rubuta:
-didar-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Akwai kuma wani mazan version na Webkit tsawo cewa aiki tare da Chrome 2+ da Safari 4+. A cikin shi zaka ƙayyade nau'in gradient a matsayin darajar, maimakon a cikin sunan dukiya. Don samun launin launin toka zuwa farar fata tare da wannan tsawo, rubuta:
-disikar-digiri (linzamin kwamfuta, hagu na sama, hagu na sama, launi-launi (0%, # 999999), launi-launi (100%, # ffffff));
Full CSS3 Linear Gradient CSS Code
Domin cikakken goyan bayan giciye don samun launin toka zuwa farar fata a sama da ku ya kamata ku fara da launi mai laushi don masu bincike waɗanda ba su goyi bayan gradients, kuma abu na ƙarshe ya zama tsarin CSS3 don masu bincike waɗanda suka dace. Don haka, ku rubuta:
bayanan: # 999999;
bayanan: -moz-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Bayanin: -ddd-gradient (linzamin kwamfuta, hagu na sama, saman dama, launi-launi (0%, # 999999), launi-launi (100%, # ffffff));
bayanan: -ddd-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Bayanin: -o-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
Bayanin: -ms-linear-gradient (hagu, # 999999 0%, #ffffff 100%);
tace: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-tace: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
bayanan: layi-gradient (hagu, # 999999 0%, #ffffff 100%);
Shafuka na gaba a cikin wannan koyaswar sun bayyana sassa na wani digiri a cikin dalla-dalla, kuma shafi na ƙarshe yana nuna maka ga kayan aiki wanda shine hanya mai kyau don ƙirƙirar CSS3 gradients ta atomatik.
Duba wannan digiri na linzamin kwamfuta a cikin aikin ta amfani da CSS kawai.
02 na 04
Samar da Gwaninta na Diagonal-Angle na Gradient
Ƙarshen maɓallin dakatar da ƙayyadaddun ƙayyadaddun ƙwararrun. Yawancin ƙwararrun linzamin daga saman zuwa kasa ko hagu zuwa dama. Amma yana yiwuwa a gina gradient wanda ke motsawa a kan layi. Hoton da ke kan wannan shafi yana nuna wani mai sauƙi mai sauƙi wanda yake motsawa a cikin kwana 45degree a fadin hoton daga dama zuwa hagu.
Angles don ƙayyade Layin Lissafi
Hanya ita ce layi a kan wani maƙalli na tsakiya a tsakiya na kashi. 0deg nuna sama, 90deg maki zuwa dama, 180deg maki saukar, da kuma 270deg maki zuwa hagu. Zaka iya ayyana kowane kusurwa daga 0 zuwa 359 digiri.
Ya kamata ku lura da cewa a cikin faɗin wuri, kusurwoyi 45 na motsa daga kusurwar hagu zuwa kusurwar dama, amma a cikin rectangle farawa da ƙarshen ƙananan dan kadan a waje da siffar, kamar yadda kake gani a cikin hoton.
Hanya mafi mahimmanci don ƙayyade wani digiri na diagonal shi ne ya bayyana kusurwa, irin su saman dama da kuma gradient za su motsa daga wannan kusurwa zuwa kusurwa kusurwa. Za ka iya ƙayyade sakon farawa tare da kalmomi masu zuwa:
- saman
- dama
- kasa
- hagu
- cibiyar
Kuma za a iya haɗa su don zama ƙayyadaddun, kamar:
- saman dama
- saman hagu
- saman cibiyar
- kasa dama
- kasa hagu
- cibiyar tsakiya
- cibiyar dama
- cibiyar hagu
A nan ne CSS a matsayin mai gwargwadon jirgi mai kama da wanda aka kwatanta, ja zuwa fari yana motsawa daga kusurwar dama zuwa kusurwar hagu:
bayanan: ## 901A1C;
Hotuna: -moz-linear-gradient (dama a sama, # 901A1C 0%, # FFFFFF 100%);
Hotuna: -ddd-gradient (linzamin kwamfuta, hagu na sama, hagu na ƙasa, ƙarancin launi (0, # 901A1C), launi-launi (1, #FFFFFF));
Bayanin: -ddd-linear-gradient (dama saman, # 901A1C 0%, #ffffff 100%);
Bayanin: -o-linear-gradient (dama a saman, # 901A1C 0%, #ffffff 100%);
bayanan: -ms-linear-gradient (dama saman, # 901A1C 0%, #ffffff 100%);
Bayanin: layi-gradient (dama a saman, # 901A1C 0%, #ffffff 100%);
Kila ka lura cewa babu mai IE a cikin wannan misali. Wancan shine saboda IE kawai yana bada nau'i biyu na filters: sama zuwa kasa (tsoho) kuma hagu zuwa dama (tare da sauƙin GradientType = 1).
Dubi wannan digiri na linzamin diagonal a aiki ta amfani da CSS kawai.
03 na 04
Launi ta ƙare
Tare da ƙwararrun linzamin CSS3, za ka iya ƙara launuka masu yawa zuwa ga dan takararka don ƙirƙirar maɓallin fancier. Don ƙara waɗannan launi, za ka ƙara ƙarin launuka har zuwa ƙarshen dukiyarka, rabu da ƙira. Ya kamata ka hada inda a layin da launuka ya fara ko kawo karshen.
Masu bincike na Intanit kawai suna goyon bayan bayanan biyu, don haka lokacin da kake gina wannan digiri, ya kamata ka haɗa kawai da launuka na farko da na biyu da kake so ka nuna.
A nan ne CSS don samfurin 3-launi na sama:
Ƙari: #ffffff;
bayanan: -moz-linear-gradient (hagu, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Bayanin: -ddd-gradient (linzamin kwamfuta, hagu na sama, saman dama, launi-launi (0%, # ffffff), launi-launi (51%, # 901A1C), launi-launi (100%, # ffffff));
Bayanin: -ddd-linear-gradient (hagu, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Bayanin: -o-linear-gradient (hagu, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Bayanin: -ms-linear-gradient (hagu, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
tace: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
bayanan: layi-gradient (hagu, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Duba wannan digiri na linzamin kwamfuta tare da launin launi uku a cikin aiki ta amfani da CSS kawai.
04 04
Make Gina Masu Ginin Mafi Sauƙi
Akwai shafuka guda biyu na bayar da shawarar don taimaka maka ka gina gwaninta, kowannensu yana da amfanai da kuma kuskurensu, ban samu mai ginawa ba wanda ke aikata duk abin da yake.
Ultimate CSS Gradient Generator
Wannan janareren gwargwadon gwaninta yana da matukar shahara domin yana yin irin wannan hanya ga masu ginawa a cikin shirye-shirye kamar Photoshop. Har ila yau, ina son shi domin yana ba ku dukkan kariyar CSS, ba kawai Yanar Gizo da Mozilla ba. Matsalar wannan janareta ita ce kawai tana goyan bayan gradients da kuma tsaye gradients. Idan kana so ka yi kwakwalwa na sakonni, dole ka je zuwa sauran janareta na bada shawara.
Kwamfuta na CSS3 Mai Girma
Wannan janareta ya dauki ni dan lokaci kaɗan ya fahimta fiye da na farko, amma yana goyon bayan canza yanayin zuwa hanyar zane.
Idan kun san wani Generator Gradient Generator cewa kuna so mafi alhẽri daga waɗannan, don Allah bari mu sani .