የGradient ጀነሬተር

የCSS Gradient መሰረታዊ መርሆዎች

የCSS gradient በድር ዲዛይን ውስጥ ከአንድ ቀለም ወደ ሌላ ቀለም የሚደረግን ሽግግር በአሳሽ (browser) አማካኝነት በኮድ ለመሳል የሚያስችል ዘዴ ነው። ይህ ቴክኖሎጂ ምስሎችን ሳይጠቀሙ ቀላል እና ፈጣን የሆኑ የጀርባ ቀለሞችን (CSS background) ለመፍጠር ይረዳል። በCSS ውስጥ gradients በሶስት ዋና ዋና አይነቶች ይከፈላሉ፤ እነሱም linear፣ radial እና conic gradients ናቸው። እያንዳንዱ አይነት የራሱ የሆነ የቀለም ስርጭት እና አቅጣጫ መቆጣጠሪያ መንገዶች አሉት።

ይህንን የGradient ጀነሬተር በመጠቀም የgradient አይነትን በመምረጥ፣ አቅጣጫውን ወይም ቅርጹን በማስተካከል እና እስከ ስምንት የሚደርሱ የቀለም ማቆሚያዎችን (color stops) በመጨመር የሚፈልጉትን የጀርባ ቀለም መቅረጽ ይችላሉ።

---

የLinear Gradients አወቃቀር እና አቅጣጫ

Linear gradient ቀለሞችን በአንድ ቀጥተኛ መስመር ላይ የሚያዋህድ የgradient አይነት ነው። የዚህ መስመር አቅጣጫ የሚወሰነው በዲግሪ (degree) በሚለካ የአንግል ዋጋ ነው።

በመሳሪያው ላይ ያለው የአንግል ተንሸራታች (angle slider) አቅጣጫውን ለመወሰን የሚያገለግል ሲሆን የሚከተሉትን መርሆዎች ይከተላል፦

• 0° አቅጣጫውን በቀጥታ ወደ ላይ ያደርገዋል።
• 90° አቅጣጫውን ወደ ቀኝ ያደርገዋል።

በእነዚህ ዲግሪዎች መካከል ወይም ከዚያ በላይ ያሉ እሴቶችን በመጠቀም ቀለሞቹ የሚጓዙበትን መስመር ሙሉ በሙሉ መቆጣጠር ይቻላል።

---

የRadial Gradients ቅርጾች እና የቀለም ስርጭት

Radial gradient ቀለሞችን ከአንድ መካከለኛ ነጥብ በመነሳት ወደ ውጭ በክብ ቅርጽ የሚያሰፋ የgradient አይነት ነው። ከlinear gradient በተለየ መልኩ radial gradient የአንግል ዋጋን አይጠቀምም። ይልቁንስ ቀለሙ የሚሰራጭበትን ቅርጽ ለመወሰን ሁለት አማራጮች ጥቅም ላይ ይውላሉ፦

• ኤሊፕስ: ቀለሞቹ በሰፊ ወይም በጠባብ ሞላላ ቅርጽ እንዲሰራጩ ያደርጋል።
• ክብ: ቀለሞቹ በሁሉም አቅጣጫ እኩል በሆነ ፍጹም ክብ ቅርጽ እንዲስፋፉ ያደርጋል።

---

የConic Gradients አሰራር

Conic gradient ቀለሞችን በአንድ መካከለኛ ነጥብ ዙሪያ እንደ ቀለም ጎማ (color wheel) በመጥረግ የሚያዋህድ የgradient አይነት ነው። ቀለሞቹ የሚጀምሩት እና የሚሽከረከሩት በተወሰነ አንግል ላይ በመነሳት ነው። ለconic gradient የሚሰጠው የአንግል ዋጋ የመነሻ አቅጣጫውን የሚወስን ሲሆን፣ 0° ወደ ላይ የሚያመለክት እና 90° ወደ ቀኝ የሚያመለክት ይሆናል።

---

የቀለም ማቆሚያዎች (Color Stops) ሚና

የቀለም ማቆሚያዎች (color stops) በgradient መስመር ላይ የተወሰነ ቀለም እንዲቀመጥ የሚደረግበትን ቦታ የሚወስኑ ነጥቦች ናቸው። እያንዳንዱ ማቆሚያ ሁለት ዋና መረጃዎችን ይይዛል፦

1. የማቆሚያ ቀለም: የሚፈለገው ቀለም እሴት።
2. ቦታ (Position): ከ0% እስከ 100% የሚደርስ የፐርሰንት ዋጋ። 0% የgradient መጀመሪያን ሲያመለክት፣ 100% ደግሞ መጨረሻውን ያሳያል።

በመሳሪያው ውስጥ ያሉ ህጎች እና ባህሪያት፦

• መሣሪያው በመጀመሪያ ሲከፈት ሁለት የቀለም ማቆሚያዎችን ይይዛል፤ እነሱም #6366f1 0% እና #ec4899 100% ናቸው።
• አዲስ የሚጨመሩ የቀለም ማቆሚያዎች በነባሪነት በ50% ቦታ (position) ላይ ይቀመጣሉ።
• በgradient ዲዛይንዎ ላይ እስከ ስምንት የሚደርሱ የቀለም ማቆሚያዎችን ማከል ይችላሉ።
• ስምንት የቀለም ማቆሚያዎች ሲሞሉ፣ ተጨማሪ ማቆሚያ እንዳይጨመር "ማቆሚያ (Stop) አክል" የሚለው ቁልፍ እንዳይሰራ ይደረጋል (disabled ይሆናል)።

---

የGradient ጀነሬተር አጠቃቀም መመሪያ

ይህንን መሳሪያ በመጠቀም የCSS ኮድ ለማመንጨት የሚከተሉትን ቅደም ተከተሎች ይከተሉ፦

1. የGradient አይነት ይምረጡ: በ"የGradient አይነት" ስር ካሉት "መስመራዊ"፣ "ክብ ቅርጽ" ወይም "ኮን ቅርጽ" አማራጮች አንዱን ይምረጡ።
2. አቅጣጫ ወይም ቅርጽ ያስተካክሉ: ለ"መስመራዊ" ወይም "ኮን ቅርጽ" የ"አንግል" ዋጋን በተንሸራታቹ ያስተካክሉ። ለ"ክብ ቅርጽ" ደግሞ "ኤሊፕስ" ወይም "ክብ" የሚለውን ቅርጽ ይምረጡ።
3. የቀለም ማቆሚያዎችን ያስተካክሉ: በእያንዳንዱ ማቆሚያ ስር "የማቆሚያ ቀለም" እና "ቦታ (Position)" እሴቶችን ይወስኑ። ተጨማሪ ቀለም ለመጨመር "ማቆሚያ (Stop) አክል" የሚለውን ቁልፍ ይጠቀሙ። አላስፈላጊ ቀለሞችን በ"ማቆሚያ አስወግድ" ቁልፍ ማጥፋት ይችላሉ።
4. ኮዱን ይቅዱ: በ"CSS" ክፍል ስር የተፈጠረውን ኮድ ለመውሰድ "CSS ቅዳ" የሚለውን ቁልፍ ይጫኑ። ኮፒ ሲደረግ የቁልፉ ጽሑፍ ወደ "Copied" ይቀየራል።

በመሳሪያው ላይ ለውጦችን በሚያደርጉበት ጊዜ፣ የgradient ምስላዊ መግለጫ በቀጥታ እይታ (live preview) ላይ ወዲያውኑ ይንጸባረቃል።

---

የግላዊነት እና የውሂብ አሰራር መግለጫ

በዚህ መሳሪያ ላይ የሚሰሩት ስራ ሙሉ በሙሉ በአካባቢዎ ኮምፒውተር ላይ የሚከናወን ነው። እያንዳንዱ gradient የሚሳለው በቀጥታ በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።

---

ተደጋግሞ የሚነሱ ጥያቄዎች (FAQ)

በlinear፣ radial እና conic gradients መካከል ያለው ልዩነት ምንድን ነው?
Linear gradient ቀለሞችን በአንግል በሚመሩት ቀጥተኛ መስመር ላይ ያዋህዳል። Radial gradient ቀለሞቹን ከመሃል ወደ ውጭ በክብ ወይም በኤሊፕስ ቅርጽ ያሰፋቸዋል። Conic gradient ደግሞ ቀለሞቹን እንደ ቀለም ጎማ በመሃል ዙሪያ ያሽከረክራቸዋል።

የቀለም ማቆሚያዎች (color stops) ምንድን ናቸው?
እያንዳንዱ የቀለም ማቆሚያ (color stop) በgradient መስመር ላይ የተወሰነ ቦታ ላይ የሚቀመጥ ቀለም ነው — 0% በመጀመሪያው ላይ፣ 100% በመጨረሻው ላይ። የቀለሙን ከፍተኛ ቦታ ለመቀየር ማቆሚያውን ያንቀሳቅሱት፣ ወይም ለበለጠ የቀለም ውህደት ተጨማሪ ማቆሚያዎችን ይጨምሩ። እስከ ስምንት ማቆሚያዎችን መጠቀም ይችላሉ።

አቅጣጫውን እንዴት እቆጣጠራለሁ?
ለlinear ወይም conic gradient፣ የአንግል ተንሸራታቹ አቅጣጫውን ይወስናል — 0° ወደ ላይ ሲያመለክት፣ 90° ደግሞ ወደ ቀኝ ያመለክታል። Radial gradient አንግል የለውም፤ ይልቁንስ እንዴት እንደሚሰፋ ለመቀየር የክብ (circle) ወይም የኤሊፕስ (ellipse) ቅርጽ ይምረጡ።