Dhaliyaha Gradient

Dhis gradient linear, radial, ama conic ah, ku dar istaagyada midabka oo dejiso jihada, ka dibna ku koobiyeey CSS-ka hal gujin.

Nooca Gradient-ka
Istaagyada midabka
CSS
Hagaaji istaagyada iyo jihada si aad u qaabayso gradient-kaaga.

Gradient kasta waxaa si toos ah loogu dhex dhalshaa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo

Muxuu yahay farqiga u dhexeeya gradients-ka linear, radial iyo conic?

Gradient toosan (linear) wuxuu isku daraa midabada xariiq toosan oo aad ku beegto xagal. Gradient wareegsan (radial) wuxuu uga fidiyaa dibadda laga bilaabo bartamaha qaab goobo ama ellipse ah. Gradient conic ah wuxuu ku wareejiyaa hareeraha bartamaha sida giraangirta midabka.

Waa maxay istaagyada midabku (color stops)?

Istaag kasta oo midab ah (color stop) waa midab lagu dhejiyay meel ku taal dhererka gradient-ka — 0% bilowga, 100% dhamaadka. Dhaqaaji istaagga si aad u beddesho meesha uu midabkiisu ugu sarreeyo, ama ku dar istaago badan si aad u hesho isku-dar qani ah. Waxaad isticmaali kartaa ilaa siddeed.

Sideen u xakameeyaa jihada?

Gradients-ka toosan (linear) ama conic-ga ah, jiidaha xagasha wuxuu dejiyaa jihada — 0° waxay tilmaamaysaa kor, 90° waxay tilmaamaysaa midig. Gradient-ka wareegsan (radial) ma laha xagal; dooro qaab goobo ama ellipse beddelkeeda si aad u beddesho sida uu u fidayo.

Waxaa qortay oo dib u eegtay kooxda tafatirka ee BroBroGo.Markii ugu dambaysay ee la cusboonaysiiyay:

Hordhaca Dhaliyaha Gradient

"Dhaliyaha Gradient" waa qalab kuu sahlaya inaad abuurto gradient CSS adoo dooranaya noociisa, hagaajinaya jihadiisa ama qaabkiisa, iyo adoo ku daraya ilaa siddeed istaag oo midab ah. Markaad isbeddellada samaynayso, waxaad si toos ah u arkaysaa hor-u-aragga gradient-ka, waxaadna ku koobiyayn kartaa koodka CSS ee dhashay hal gujin oo kaliya.

Qalabkani wuxuu si gaar ah waxtar u leeyahay:

  • Qof kasta oo raba inuu abuuro asalka CSS (CSS background).
  • Isticmaale u baahan inuu hagaajiyo labo midab iyo jiho si uu u sameeyo gradient.
  • Naqshadeeye ama horumariye mareegaha (front-end developer) oo u baahan inuu hagaajiyo nooca, booska, iyo istaagyo midabyo badan oo gradient ah.

Noocyada Gradient-ka ee CSS

Markaad isticmaalayso qalabka, waxaad dooran kartaa saddex nooc oo gradient ah oo hoos yimaada qaybta Nooca Gradient-ka:

  1. Linear (Toosan): Gradient-ka toosan wuxuu isku daraa midabada xariiq toosan, iyadoo xagashu ay go'aamiso jihada uu u socdo.
  2. Radial (Wareegsan): Gradient-ka wareegsan wuxuu midabada dibadda uga fidiyaa laga bilaabo bartamaha isagoo u fidayay qaab goobo ama ellipse ah.
  3. Conic: Gradient-ka conic-ga ah wuxuu midabada ku wareejiyaa hareeraha bartamaha sida giraangirta midabka.

Sida loo Dejiyo Jihada iyo Qaabka

Iyadoo ku xiran nooca gradient-ka aad doorato, waxaad xakameyn kartaa qaabka uu u fido:

  • Xagasha: Jiidaha xagasha ee loo isticmaalo gradients-ka Linear ama Conic wuxuu dejiyaa jihada, halkaas oo 0° ay tilmaamayso kor, 90°-na ay tilmaamayso midig.
  • Qaabka: Gradients-ka Radial ma isticmaalaan xagal. Beddelkeeda, waxaad dooran kartaa qaabka Ellipse ama Goobo si aad u go'aamiso qaabka uu u fidayo.

Maareynta Istaagyada Midabka (Color Stops)

Istaag kasta oo midab ah waa midab lagu dhejiyay meel gaar ah oo ku taal dhererka gradient-ka, iyadoo 0% ay tahay bilowga, 100%-na ay tahay dhammaadka.

  • Istaagyada bilowga ah: Gradient-ka bilowga ah wuxuu ka kooban yahay labo istaag oo midab ah oo kala ah: #6366f1 0% iyo #ec4899 100%.
  • Ku darista istaagyada: Waxaad ku dari kartaa ilaa siddeed istaag oo midab ah. Istaagyada cusub ee aad ku darto waxay si toos ah u qaadanayaan booska 50%.
  • Xaddidnaanta: Marka ay sideed istaag oo midab ahi ku jiraan qalabka, badhanka Ku dar istaag (Stop) waa la daminayaa (disabled) oo lama gujin karo.
  • Xogta istaag kasta: Istaag kasta wuxuu leeyahay Midabka istaagga (qiimaha midabka) iyo Booska (boqolley u dhaxeysa 0% ilaa 100%).

Soo-saarka iyo Koobiyeynta CSS

Qalabku wuxuu si toos ah u soo saaraa labo natiijo oo muhiim ah:

  1. Hor-u-arag (Preview): Muuqaal toos ah oo muujinaya sida gradient-kaagu u eg yahay markaad isbeddellada samaynayso.
  2. CSS: Koodka CSS ee la soo saaray ee gradient-kaas.

Markaad gujiso badhanka Koobiyeey CSS, xaaladda badhankaas waxay isku beddelaysaa "Copied" si ay kuu xaqiijiso in koodka la koobiyey.

Ilaalinta Khaaska ah iyo Falanqaynta Xogta

Nabadgelyada xogtaada aad bay muhiim u tahay. Gradient kasta waxaa si toos ah loogu dhex dhalshaa biraawsarkaaga, waxba oo aad halkan ku dejisana looma soo gudbiyo BroBroGo.

Su'aalaha Badanaa La Isweydiiyo (FAQ)

Muxuu yahay farqiga u dhexeeya gradients-ka linear, radial iyo conic? Gradient toosan (linear) wuxuu isku daraa midabada xariiq toosan oo aad ku beegto xagal. Gradient wareegsan (radial) wuxuu uga fidiyaa dibadda laga bilaabo bartamaha qaab goobo ama ellipse ah. Gradient conic ah wuxuu ku wareejiyaa hareeraha bartamaha sida giraangirta midabka.

Waa maxay istaagyada midabku (color stops)? Istaag kasta oo midab ah (color stop) waa midab lagu dhejiyay meel ku taal dhererka gradient-ka — 0% bilowga, 100% dhamaadka. Dhaqaaji istaagga si aad u beddesho meesha uu midabkiisu ugu sarreeyo, ama ku dar istaago badan si aad u hesho isku-dar qani ah. Waxaad isticmaali kartaa ilaa siddeed.

Sideen u xakameeyaa jihada? Gradients-ka toosan (linear) ama conic-ga ah, jiidaha xagasha wuxuu dejiyaa jihada — 0° waxay tilmaamaysaa kor, 90° waxay tilmaamaysaa midig. Gradient-ka wareegsan (radial) ma laha xagal; dooro qaab goobo ama ellipse beddelkeeda si aad u beddesho sida uu u fidayo.

Dhaliyaha CSS Cubic BezierJiid labada gacan si aad u qaabayso qalooca, daawo dhibic raacaysa marka la barbardhigo mid joogto ah, oo koobiyeey qiimaha cubic-bezier().Dhaliyaha Box ShadowJiid jiidadaha si aad u qaabayso box-shadow, isku dul radd lakabyo si aad u hesho qoto-dheer, oo si degdeg ah u koobiyeey CSS-ka dhammaaday.Dhaliyaha Border RadiusU wareeji gees kasta adigoo isticmaalaya jiidado, ku qaabeey qaabab dabiici ah habka elliptical-ka, oo si degdeg ah u koobiyeey CSS-ka.Dhaliyaha FlexboxU diyaari weel flex ah iyo walxihiisa adigoo isticmaalaya xakamaynta muuqaalka, daawo qaabka oo si toos ah u falcelinaya, oo ku koobiyeey CSS-ka hal gujin.Dhaliyaha CSS GridDejiso tiirarkaaga iyo safarkaaga, ku jiid unugyada dushooda si aad u dhigto walxaha, oo ku koobiyeey grid CSS-ka iyo HTML-ka u dhigma hal gujin.Xisaabiyaha CSS clamp()Geli cabbir loogu talagalay shaashadaha yaryar iyo kuwa waaweyn si aad u hesho qiimo dabiici ah oo clamp() ah oo si habsmooth ah ugu dhex miisaamaya — ee cabbirrada farta, padding, margins ama gaps.Beddelaha MidabkaU beddel midabada HEX, RGB, HSL, HSV, CMYK iyo LAB — wax ka beddel goob kasta oo inta kale ayaa cusboonaysiismaya markaad gasho.CSS Qurxiye & YareeyeDib u habee CSS-ka qasan si aad u akhrido, ama u yaree si aad u dirto — adoo adeegsanaya hab badbaado leh oo aan marna dib u habayn ku samaynayn xeerarkaaga.Hubiyaha Ka Duwanaanshaha (Contrast Checker)Geli midabka qoraalka iyo asalka si aad u aragto saamiga ka duwanaanshaha WCAG iyo heerarka AA iyo AAA ee uu baasay.