የCSS Box Shadow መዋቅር እና መሰረታዊ መርሆዎች
በድር ዲዛይን ውስጥ box-shadow የተባለው የCSS ባህሪ ለዕቃዎች ጥልቀትን፣ ልኬትን እና እውነታዊነትን ለመስጠት የሚያገለግል ወሳኝ መሳሪያ ነው። ይህ ባህሪ በአንድ የድር ኤለመንት ዙሪያ ጥላ ለመፍጠር የሚያስችሉ በርካታ መለኪያዎችን ይይዛል። የጥላውን አቀማመጥ፣ ልስላሴ እና ስፋት ለመወሰን የሚከተሉትን መሰረታዊ መለኪያዎች መረዳት ያስፈልጋል፦
- አግድም Offset: ጥላው ወደ ግራ ወይም ወደ ቀኝ የሚንቀሳቀስበትን ርቀት ይወስናል። እሴቱ ከ -50px እስከ 50px ባለው ክልል ውስጥ የሚስተካከል ሲሆን፣ ፖዘቲቭ እሴት ጥላውን ወደ ቀኝ፣ ኔጌቲቭ እሴት ደግሞ ወደ ግራ ያንቀሳቅሰዋል።
- አቀባዊ Offset: ጥላው ወደ ላይ ወይም ወደ ታች የሚንቀሳቀስበትን ርቀት ይወስናል። ይህ መለኪያም ከ -50px እስከ 50px ባለው ክልል ውስጥ የሚስተካከል ሲሆን፣ ፖዘቲቭ እሴት ጥላውን ወደ ታች፣ ኔጌቲቭ እሴት ደግሞ ወደ ላይ ያንቀሳቅሰዋል።
- ብዥታ (Blur): የጥላውን ጠርዞች ልስላሴ ይቆጣጠራል። ከ 0px (በጣም ስለታም ጠርዝ) እስከ 100px (በጣም የደበዘዘ ጠርዝ) ድረስ ማስተካከል ይቻላል።
- ስርጭት: ጥላው ከመደበዝቁ በፊት የሚኖረውን መጠን ያሰፋል ወይም ያጠባል። ከ -50px እስከ 50px ባለው ክልል ውስጥ የሚሰራ ሲሆን፣ ኔጌቲቭ እሴት ጥላውን ወደ ውስጥ ይስበዋል።
እነዚህን መለኪያዎች ከተገቢው የጥላ ቀለም እና ግልጽነት (Opacity) ጋር በማጣመር የተለያየ የብርሃን እና የጥላ እይታ መፍጠር ይቻላል።
የውጭ ጥላ እና የውስጥ ጥላ (Inset) ልዩነት
ጥላዎች በሁለት ዋና ዋና መንገዶች ሊሰሩ ይችላሉ። የመጀመሪያው እና መደበኛው መንገድ ጥላው ከኤለመንቱ ውጭ እንዲያርፍ ማድረግ ሲሆን፣ ይህም ኤለመንቱ ከገጹ ላይ ከፍ ብሎ እንዲታይ ያደርጋል። ይህ በተለይ ለካርዶች (cards) እና ለተንሳፋፊ ቁልፎች (buttons) ተመራጭ ነው።
ሁለተኛው መንገድ ደግሞ የውስጥ ጥላ (Inset) አማራጭን መጠቀም ነው። ይህንን አማራጭ ሲያነቁ ጥላው ወደ ኤለመንቱ ውስጥ ይገለበጣል። በዚህ ጊዜ ኤለመንቱ ወደ ውስጥ የተጫነ ወይም የሰመጠ ይመስላል። ይህ ዘዴ በተለይ ወደ ውስጥ ለገቡ የግቤት ሳጥኖች (inputs) ወይም ለተጫኑ ቁልፎች እውነታዊ እይታን ለመስጠት በሰፊው ጥቅም ላይ ይውላል።
በበርካታ የጥላ ንብርብሮች ጥልቀትን መፍጠር
አንድ ነጠላ ጥላ ብቻ መጠቀም አንዳንድ ጊዜ ጠፍጣፋ እና ሰው ሰራሽ የሆነ እይታ ሊሰጥ ይችላል። እውነተኛ እና ለስላሳ ጥልቀት ለመፍጠር ከአንድ በላይ የጥላ ንብርብሮችን መደርደር (stacking) አስፈላጊ ነው።
ይህ መሳሪያ እስከ አምስት የሚደርሱ የጥላ ንብርብሮችን አስቀድሞ ያዘጋጃል። የመጀመሪያው ንብርብር በነባሪነት 0 8 24 -4 በሆነ እሴት እና በ18% ግልጽነት ባለው ጥቁር ቀለም የተቀናበረ ሲሆን፣ ቀሪዎቹ አራት ንብርብሮች መጀመሪያ ላይ ተደብቀው ይቆያሉ። ተጠቃሚዎች "ንብርብር አክል" የሚለውን ቁልፍ በመጫን አዳዲስ ንብርብሮችን በነባሪ እሴቶች መፍጠር እና እያንዳንዱን ንብርብር ለየብቻ ማስተካከል ይችላሉ። እንዲሁም የማያስፈልገውን ንብርብር "ንብርብር አስወግድ" በሚለው ቁልፍ ማጥፋት ይቻላል።
በርካታ ንብርብሮች በሚኖሩበት ጊዜ፣ የመሳሪያው የCSS ውጤት እያንዳንዱን ንብርብር በነጠላ ሰረዝ (comma) በመለየት በአንድ ላይ ያወጣቸዋል። ለምሳሌ፣ አንድ ጥብቅና ጥቁር ጥላን ከሌላ ሰፊና ለስላሳ ጥላ ጋር በማጣመር እጅግ ማራኪ እና እውነታዊ የጥልቀት ውጤት መፍጠር ይቻላል።
የመሳሪያው አጠቃቀም እና የውሂብ አያያዝ
ይህ የBox Shadow ጀነሬተር ተጠቃሚዎች ያለምንም ውስብስብ የኮዲንግ እውቀት የፈለጉትን ጥላ እንዲቀርጹ ይረዳል። በተንሸራታቾቹ ላይ የሚደረጉ ማናቸውም ለውጦች የCSS ኮዱን ወዲያውኑ በቅጽበት (real-time) ያሻሽሉታል። የተጠናቀቀውን ኮድ "CSS ቅዳ" የሚለውን ቁልፍ በመጫን በቀጥታ ወደ ፕሮጀክትዎ መውሰድ ይችላሉ።
ስለ ግላዊነት እና የውሂብ አያያዝ ስጋት ሊኖርዎት አይገባም። እያንዳንዱ ጥላ የሚሰራው በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።
ተደጋግሞ የሚነሱ ጥያቄዎች (FAQ)
በእርግጥ offset፣ blur እና spread ምንን ይቆጣጠራሉ?
Offset ጥላውን ወደ ግራ/ቀኝ እና ወደ ላይ/ታች ያንቀሳቅሳል፣ blur ጠርዞቹን ያለሰልሳል፣ እና spread ደግሞ ሳይደበዝዝ በፊት ጥላውን ያሰፋዋል ወይም ያጠብበዋል። ኔጌቲቭ spread ጥላውን ወደ ውስጥ ይስበዋል፣ ይህም ለጠበቁ ጥላዎች ጠቃሚ ነው።
የinset አማራጭ ምን ይሰራል?
የተለመደ ጥላ ከኤለመንቱ ውጭ ያርፋል፣ ልክ ከፍ ካለ ካርድ በስተጀርባ እንዳለ ብርሃን። Inset ግን ጥላውን ወደ ውስጥ ይገለብጠዋል፤ በዚህም ኤለመንቱ ወደ ውስጥ የተጫነ ይመስላል — ይህ ወደ ውስጥ ለገቡ የግቤት ሳጥኖች (inputs) ወይም ለተጫኑ ቁልፎች በጣም ጠቃሚ ነው።
ለምን ከአንድ በላይ የጥላ ንብርብሮችን እንደራርባለን?
አንድ ነጠላ ጥላ ከተወሰነ መጠን በላይ ሲሆን ጠፍጣፋ ይመስላል። እውነተኛ ጥልቀት ለመፍጠር ብዙውን ጊዜ ጥብቅና ጥቁር ጥላን ከሌላ ሰፊና ለስላሳ ጥላ ጋር ማጣመር ያስፈልጋል — ሁለተኛ ንብርብር በመጨመር እያንዳንዱን ለየብቻ በማስተካከል ይህንን ውጤት ማግኘት ይችላሉ።
በመሳሪያው ውስጥ ያሉት ተንሸራታቾች ወሰን ምን ያህል ነው?
አግድም Offset፣ አቀባዊ Offset እና ስርጭት ከ -50px እስከ 50px ባለው ክልል ውስጥ የሚሰሩ ሲሆን፣ ብዥታ (Blur) ደግሞ ከ 0px እስከ 100px ባለው ክልል ውስጥ ይስተካከላል።