Dhaliyaha Box Shadow

Jiid 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.

Lakabyada hooska
Lakabka 1
CSS
Hagaaji jiidadaha si aad u qaabayso hooskaaga.

Hoos kasta waxaa lagu dhalshaa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo

Maxay dhab ahaantii xakameeyaan offset, blur, iyo spread?

Offset wuxuu hooska u dhaqaajiyaa bidix/midig iyo kor/hoos, blur wuxuu jilciyaa geesaha, spread-kuna wuxuu weyneeyaa ama yareeyaa hooska ka hor intaanan la blur-garayn. Spread taban (negative spread) wuxuu hooska u soo jiidaa gudaha, taas oo waxtar u leh hoos cidhiidhi ah oo dhow.

Muxuu qabtaa doorashada inset-ku?

Hooska caadiga ah wuxuu ku dhacaa bannaanka walbaha, sida iftiinka ka dambeeya kaadh kor loo qaaday. Inset wuxuu u rogaa gudaha beddelkeeda, si walbuhu u yeesho muuqaal hoos u riixan — aad u anfacaya sanduuqyada wax lagu qoro ee hoos u deggen ama badhamada la riixay.

Maxay tahay sababta la isugu dul raddo in ka badan hal lakab oo hoos ah?

Hoos keliya wuxuu u muuqdaa mid fidsan marka uu cabbir gaar ah dhafo. Sare u qaadista dhabta ah badanaa waxay isku dawaysaa hoos madow oo cidhiidhi ah iyo mid jilicsan oo ballaaran — ku dar lakab labaad oo mid kasta si gooni ah u hagaaji si aad u hesho saamayntaas.

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

Fahanka Habka CSS box-shadow

Habka box-shadow ee CSS wuxuu suurtageliyaa in hoos lagu daro walxaha ku dhex jira bogga internetka. Hooskani wuxuu wax weyn ka beddelaa sida loo arko qaabka iyo qoto-dheeraanta walxahaas, isagoo u oggolaanaya naqshadeeyayaasha iyo horumariyayaasha mareegaha inay abuuraan muuqaal saddex-cabbir ah. Qalabkani wuxuu kuu sahlayaa inaad si toos ah u qaabayso hooska adigoo isticmaalaya jiidayaal kala duwan, kuwaas oo beddelaya qiyamka dhabta ah ee CSS ee go'aamiya muuqaalka hooska.

Marka la naqshadaynayo hooska, waxaa jira dhowr arrimood oo saameeya sida isha bini'aadamku u aragto masaafada iyo iftiinka. Hoos dhow oo cidhiidhi ah wuxuu muujinayaa in walaxdu ay aad ugu dhow dahay dusha dambe, halka hoos jilicsan oo ballaaran uu muujinayo in walaxdu ay kor u kacday. Isticmaalka saxda ah ee qiyamka hooska wuxuu caawiyaa in la kala saaro qaybaha kala duwan ee bogga, sida kaadhadhka macluumaadka, badhamada, iyo sanduuqyada wax lagu qoro.

Qiyamka Muhiimka ah ee Hooska iyo Saamayntooda

Si loo abuuro hoos sax ah, qalabku wuxuu bixiyaa dhowr jiidayaal oo xakameeya sifooyinka aasaasiga ah ee hooska:

  • Dhaqdhaqaaqa jiifka (Offset X): Jiidahan wuxuu hooska u dhaqaajiyaa bidix ama midig. Qiyaastiisu waxay u dhaxeysaa -50px ilaa 50px. Haddii qiimuhu yahay togan, hoosku wuxuu u guuraa midigta; haddii uu yahay taban, wuxuu u guuraa bidixda.
  • Dhaqdhaqaaqa taagan (Offset Y): Jiidahan wuxuu hooska u dhaqaajiyaa kor ama hoos. Qiyaastiisu waxay u dhaxeysaa -50px ilaa 50px. Qiimaha togan wuxuu hooska u riixaa hoos, halka qiimaha taban uu u qaado kor.
  • Caddayn-tir (Blur): Wuxuu jilciyaa geesaha hooska. Qiyaastiisu waxay u dhaxeysaa 0px ilaa 100px. Markay eber tahay, hoosku wuxuu yeelanayaa gees adag oo la mid ah walaxda lafteeda, laakiin marka qiimaha la kordhiyo, geesuhu waxay noqonayaan kuwo fidsan oo jilicsan.
  • Fidinta (Spread): Wuxuu weyneeyaa ama yareeyaa hooska ka hor intaanan la marin caddayn-tirka. Qiyaastiisu waxay u dhaxeysaa -50px ilaa 50px. Qiimaha togan wuxuu hooska ka dhigaa mid ka weyn walaxda, halka qiimaha taban uu hooska u soo jiido gudaha.

Farqiga u dhexeeya Hooska Caadiga ah iyo Hooska Gudaha (Inset)

Hooska caadiga ah wuxuu ka muuqdaa bannaanka walaxda, taas oo ka dhigaysa in walaxdu ay u muuqato mid kor uga kacday dusha dambe. Tani waxay aad ugu fiican tahay kaadhadhka macluumaadka ama badhamada caadiga ah ee u baahan in la muujiyo.

Marka la shido Hooska gudaha (Inset), qaabka hoosku wuxuu isku beddelaa gudaha walaxda. Tani waxay abuurtaa muuqaal ah in walaxdu ay hoos u riixan tahay ama ay ku dhex qotonto dusha bogga. Saamayntan waxaa badanaa loo isticmaalaa sanduuqyada wax lagu qoro (inputs) si ay u muuqdaan kuwo godan, ama badhamada marka la riixo si loo muujiyo in ficilku dhacay.

Isticmaalka Lakabyo Badan si loo Helo Qoto-dheer

Mid ka mid ah hababka ugu horumarsan ee naqshadaynta hooska waa isku-dul-rididda lakabyo badan. Hoos keliya oo fudud badanaa wuxuu u muuqdaa mid aan dabiici ahayn marka uu weynaado. Si loo helo hoos dabiici ah oo u eg kan nolosha dhabta ah, waxaa la isku daraa dhowr lakab oo hoos ah.

Qalabkani wuxuu kuu oggolaanayaa inaad ku darto lakabyo dheeraad ah adigoo isticmaalaya badhanka Ku dar lakab. Waxaad sidoo kale ka saari kartaa lakab kasta adigoo isticmaalaya badhanka Ka saar lakabka. Marka la isticmaalo lakabyo badan, CSS-ka ka dhasha wuxuu u qorayaa qiyamka lakab kasta isagoo u kala saaraya hakad (comma-separated values).

Qalabku wuxuu horay u diyaariyaa shan lakab, iyadoo lakabka ugu horreeya uu leeyahay qiyamka caadiga ah ee ah 0 8 24 -4 iyo midab madow ah oo leh 18% opacity, halka lakabyada kale ay markii hore qarsoon yihiin. Waxaad u habayn kartaa lakab kasta si gooni ah si aad u dhaliso saameyn qoto-dheer oo dhab ah.

Sida Loo Isticmaalo Qalabka

  1. Hagaajinta Jiidayaasha: Isticmaal jiidayaasha Dhaqdhaqaaqa jiifka (Offset X), Dhaqdhaqaaqa taagan (Offset Y), Caddayn-tir (Blur), iyo Fidinta (Spread) si aad u qaabayso qaabka hooska.
  2. Xulashada Midabka iyo Muuqaalka: Dooro Midabka hooska adigoo isticmaalaya xushaha midabka, ka dibna hagaaji Muuqaalka (Opacity) si aad u xakamayso hufnaanta hooska.
  3. Maareynta Lakabyada: Haddii aad u baahan tahay hoos ka dabiicisan, guji Ku dar lakab si aad u dhaliso lakab cusub oo leh qiyamka caadiga ah. Waxaad u kala beddeli kartaa lakabyada si aad mid kasta goonidiisa u beddesho.
  4. Koobiyeynta CSS: Markaad dhammayso naqshadaynta, guji badhanka Koobiyeey CSS si aad u koobiyeyso koodka dhalanaya oo aad ugu isticmaasho mashaariicdaada.

Badbaadada iyo Habaynta Xogta

Markaad isticmaalayso qalabkan, dhammaan habaynta iyo dhalinta hooska waxay si toos ah uga dhacaysaa biraawsarkaaga. Ma jiraan xog ama dejin aad samaysay oo loo soo gudbiyo BroBroGo. Tani waxay hubinaysaa in naqshadayntaada iyo shaqadaada ay ku koobnaato oo keliya aaladdaada.

Su'aalaha Badanaa La Is Weydiiyo (FAQ)

Maxay dhab ahaan xakameeyaan offset, blur, iyo spread?
Offset wuxuu hooska u dhaqaajiyaa bidix/midig iyo kor/hoos, blur wuxuu jilciyaa geesaha, spread-kuna wuxuu weyneeyaa ama yareeyaa hooska ka hor intaanan la blur-garayn. Spread taban (negative spread) wuxuu hooska u soo jiidaa gudaha, taas oo waxtar u leh hoos cidhiidhi ah oo dhow.

Muxuu qabtaa doorashada inset-ku?
Hooska caadiga ah wuxuu ku dhacaa bannaanka walbaha, sida iftiinka ka dambeeya kaadh kor loo qaaday. Inset wuxuu u rogaa gudaha beddelkeeda, si walbuhu u yeesho muuqaal hoos u riixan — aad u anfacaya sanduuqyada wax lagu qoro ee hoos u deggen ama badhamada la riixay.

Maxay tahay sababta la isugu dul raddo in ka badan hal lakab oo hoos ah?
Hoos keliya wuxuu u muuqdaa mid fidsan marka uu cabbir gaar ah dhafo. Sare u qaadista dhabta ah badanaa waxay isku dawaysaa hoos madow oo cidhiidhi ah iyo mid jilicsan oo ballaaran — ku dar lakab labaad oo mid kasta si gooni ah u hagaaji si aad u hesho saamayntaas.

Sideen u koobiyeynaa koodka CSS ee ka dhasha qalabka?
Markaad ku qanciso muuqaalka hooska aad naqshadaysay, waxaad si fudud u gujin kartaa badhanka Koobiyeey CSS si aad koodka ugu kaydiso clipboard-kaaga, ka dibna aad ugu dhejiso faylkaaga CSS.

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 GradientDhis gradient linear, radial, ama conic ah, ku dar istaagyada midabka oo dejiso jihada, ka dibna ku koobiyeey CSS-ka hal gujin.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.