የBorder Radius ጀነሬተር ምን ይሰራል?
ይህ መሳሪያ የሳጥን ማዕዘኖች ምን ያህል መክበብ እንዳለባቸው ለማስተካከል ያስችልዎታል። እያንዳንዱን ማዕዘን ለየብቻ መቆጣጠር ወይም ሁሉንም በአንድ ላይ ማገናኘት ይችላሉ፤ እንዲሁም በፒክሰል ወይም በፐርሰንት ዩኒቶች መካከል መምረጥ ይቻላል። በተጨማሪም፣ ለእያንዳንዱ ማዕዘን የተለየ አግድም እና አቀባዊ ራዲየስ በመስጠት ለስላሳ እና ይበልጥ ተፈጥሯዊ የሆኑ ቅርጾችን ለመፍጠር የሚያስችል የኤሊፕቲካል ሁነታን ያቀርባል። መሳሪያው ለንድፍዎ የሚስማማውን የCSS ኮድ ወዲያውኑ ያመነጫል።
ይህ መሳሪያ በተለይ ለሚከተሉት ፍላጎቶች ጠቃሚ ነው፦
- ለዌብ ዲዛይን የሳጥን ማዕዘኖችን በፍጥነት መክበብ ለሚፈልግ ሰው።
- ከካሬ ኤለመንት ፍጹም የሆነ ክብ ቅርጽ ለመስራት ለሚፈልግ ሰው።
- የእንክብል ቅርጽ ቁልፍ (pill-shaped button) ለሚነድፍ ሰው።
- ለንድፍ ስራው ለስላሳ እና ተፈጥሯዊ የ"blob" ቅርጾችን ለመፍጠር ለሚፈልግ ሰው።
- ለተበጁ የቦርደር ራዲየሶች የCSS ኮድ ማመንጨት ለሚፈልግ ሰው።
የመሳሪያው ግብዓቶች እና መቆጣጠሪያዎች
በጀነሬተሩ ላይ የሚከተሉትን ግብዓቶች በመጠቀም ቅርጾችን ማስተካከል ይችላሉ፦
- ተንሸራታቾች፦ የማዕዘኖቹን ክብነት ለመቆጣጠር ያገለግላሉ። የተንሸራታቾች መለኪያ ክልል ከ0 እስከ 100 ነው።
- ማዕዘኖቹ ሲገናኙ፣ "ሁሉም ማዕዘኖች" የሚል ስያሜ ያለው አንድ ተንሸራታች አራቱንም ማዕዘኖች በአንድ ላይ ይቆጣጠራል።
- ማዕዘኖቹ ሲላቀቁ፣ "ላይ ግራ"፣ "ላይ ቀኝ"፣ "ታች ቀኝ"፣ እና "ታች ግራ" የሚሉ ስያሜዎች ያሏቸው አራት ተንሸራታቾች ይቀርባሉ።
- በኤሊፕቲካል ሁነታ፣ እያንዳንዱ ማዕዘን ተጨማሪ "አግድም" እና "አቀባዊ" ተንሸራታች ይኖረዋል።
- ዩኒት መምረጫ (ዩኒት)፦ በ"px" (ፒክሰል) እና "%" (ፐርሰንት) መካከል ለመቀያየር ያገለግላል።
- ሁሉንም ማዕዘኖች አገናኝ ማብሪያ/ማጥፊያ፦ የማዕዘን ማስተካከያዎችን ለማገናኘት ወይም ለመለየት ያገለግላል።
- ኤሊፕቲካል ማዕዘኖች ማብሪያ/ማጥፊያ፦ የኤሊፕቲካል ሁነታን ለማብራት ወይም ለማጥፋት ያገለግላል።
- ቅድመ-ማስተካከያዎች፦ "ሹል"፣ "የተከበበ"፣ "ክብ"፣ "ብሎብ"፣ እና "ቅጠል" የሚሉ ስያሜዎች ያሏቸው አዝራሮች ናቸው።
የውጤት ማሳያ እና የCSS ኮድ ማመንጫ
መሳሪያው የሚከተሉትን ውጤቶች ያሳያል፦
- ቅድመ-እይታ፦ የተተገበረው የቦርደር ራዲየስ በሳጥኑ ላይ እንዴት እንደሚታይ የሚያሳይ ምስላዊ መግለጫ ነው።
- CSS፦ የተፈጠረው የCSS ኮድ "CSS" በሚለው ርዕስ ስር ይታያል።
- የኮድ መቅጃ አዝራር፦ "CSS ቅዳ" የሚል ስያሜ ያለው ኮዱን በቀላሉ ለመውሰድ የሚያስችል አዝራር ነው።
የመሳሪያው መነሻ የተንሸራታች እሴት 24 ሲሆን፣ ይህም border-radius: 24px; የሚል ውጤት ይሰጣል።
የአሰራር ህጎች እና ልዩ ሁኔታዎች
የማዕዘን ማስተካከያዎችን በሚያደርጉበት ጊዜ የሚከተሉት ህጎች ይተገበራሉ፦
- አራቱ የማዕዘን ተንሸራታቾች በሰዓት አቅጣጫ ከላይ-ግራ፣ ከላይ-ቀኝ፣ ከታች-ቀኝ፣ እና ከታች-ግራ ማዕዘኖች ጋር ይገናኛሉ።
- በፒክሰል (px) ዩኒት ሲሆን፣ ማዕዘኑ በቋሚ መጠን ይከበባል።
- በፐርሰንት (%) ዩኒት ሲሆን፣ ማዕዘኑ ከሳጥኑ አንጻር ይከበባል፤ አግድም ፐርሰንት ስፋቱን ሲከተል፣ አቀባዊ ፐርሰንት ደግሞ ከፍታውን ይከተላል።
- በፐርሰንት ዩኒት ሁሉንም ማዕዘኖች 50% ማድረግ ካሬን ወደ ፍጹም ክብ ይቀይረዋል።
- የኤሊፕቲካል ሁነታ ሲበራ፣ እያንዳንዱ ማዕዘን የተለየ አግድም እና አቀባዊ ራዲየስ ያገኛል። በዚህ ጊዜ ጀነሬተሩ ባለ ሁለት እሴት ስላሽ (slash) ፎርማት ያለው የCSS ኮድ ይጽፋል።
- የኤሊፕቲካል ሁነታ ሲጠፋ፣ እያንዳንዱ ማዕዘን አንድ ራዲየስ ብቻ ያለው የክብ አራተኛ ክፍል ይሆናል። ማዕዘኖቹ እንደገና ክብ ሲሆኑ ጀነሬተሩ ወደ አጭሩ የCSS ፎርማት ይመለሳል።
- ፍጹም ክብ ለመስራት ማዕዘኖቹን ማገናኘት፣ ወደ ፐርሰንት (%) መቀየር እና እሴቱን 50% ማድረግ ያስፈልጋል። የ"ክብ" ቅድመ-ማስተካከያም ሁሉንም ማዕዘኖች 50% ያደርጋል።
- የእንክብል ቅርጽ ቁልፍ ለመስራት ፒክሰል (px) ላይ በማድረግ አንዱን ማዕዘን ከቁልፉ ግማሽ ከፍታ በላይ መጎተት ያስፈልጋል፤ በዚህ ጊዜ ጎኖቹ በማንኛውም ስፋት ላይ ሙሉ በሙሉ ክብ ሆነው ይቆያሉ。
የግል ሚስጥራዊነት እና መረጃ አያያዝ
የእርስዎ ግላዊነት የተጠበቀ ነው። እያንዳንዱ ማዕዘን የሚሳለው በቀጥታ በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።
ተደጋግሞ የሚነሱ ጥያቄዎች (FAQ)
አራቱ ማዕዘኖች እና px ከ % ጋር እንዴት ይሰራሉ?
አራቱ ተንሸራታቾች በሰዓት አቅጣጫ ከላይ-ግራ፣ ከላይ-ቀኝ፣ ከታች-ቀኝ እና ከታች-ግራ ማዕዘኖች ጋር ይገናኛሉ። በፒክሰል (px) ሲሆን ማዕዘኑ በቋሚ መጠን ይከበባል፤ በፐርሰንት (%) ሲሆን ግን ከሳጥኑ አንጻር ይከበባል — አግድም ፐርሰንት ስፋቱን ሲከተል፣ አቀባዊ ፐርሰንት ደግሞ ከፍታውን ይከተላል፤ ስለዚህ 50% ካሬን ወደ ክብ ይቀይረዋል።
የኤሊፕቲካል (elliptical) ሁነታ ምን ይሰራል?
ሲጠፋ፣ እያንዳንዱ ማዕዘን አንድ ራዲየስ ያለው የክብ አራተኛ ክፍል ይሆናል። ሲያበሩት ግን እያንዳንዱ ማዕዘን የተለየ አግድም እና አቀባዊ ራዲየስ ያገኛል፤ ይህ ለስላሳ እና ተፈጥሯዊ የ"blob" ቅርጾችን ለመስራት ይጠቅማል። ጀነሬተሩ ባለ ሁለት እሴት ስላሽ (slash) ፎርማቱን ይጽፍልዎታል፣ ማዕዘኖቹ እንደገና ክብ ሲሆኑ ደግሞ ወደ አጭሩ ፎርማት ይመለሳል።
እንዴት ፍጹም ክብ ወይም የእንክብል ቅርጽ መስራት እችላለሁ?
ማዕዘኖቹን ያገናኙ፣ ወደ ፐርሰንት (%) ይቀይሩ እና 50% ያድርጉት፤ በዚህ ጊዜ ካሬው ወደ ክብ ይቀየራል። ለእንክብል ቅርጽ ቁልፍ (pill-shaped button) ግን በፒክሰል (px) ላይ በማድረግ አንዱን ማዕዘን ከቁልፉ ግማሽ ከፍታ በላይ ይጎትቱት — በዚህ ጊዜ ጎኖቹ በማንኛውም ስፋት ላይ ሙሉ በሙሉ ክብ ሆነው ይቆያሉ። የክብ ቅድመ-ማስተካከያው የመጀመሪያውን አማራጭ በአንድ ጠቅታ ያዘጋጅልዎታል።