የBox Shadow ጀነሬተር

box-shadow ለመቅረጽ ተንሸራታቾችን ይጎትቱ፣ ለጥልቀት ንብርብሮችን ይደረድሩ፣ እና የተጠናቀቀውን CSS ወዲያውኑ ይቅዱ።

የጥላ ንብርብሮች
ንብርብር 1
CSS
ጥላዎን ለመቅረጽ ተንሸራታቾቹን ያስተካክሉ።

እያንዳንዱ ጥላ የሚሰራው በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።

በተደጋጋሚ የሚነሱ ጥያቄዎች

በእርግጥ offset፣ blur እና spread ምንን ይቆጣጠራሉ?

Offset ጥላውን ወደ ግራ/ቀኝ እና ወደ ላይ/ታች ያንቀሳቅሳል፣ blur ጠርዞቹን ያለሰልሳል፣ እና spread ደግሞ ሳይደበዝዝ በፊት ጥላውን ያሰፋዋል ወይም ያጠብበዋል። ኔጌቲቭ spread ጥላውን ወደ ውስጥ ይስበዋል፣ ይህም ለጠበቁ ጥላዎች ጠቃሚ ነው።

የinset አማራጭ ምን ይሰራል?

የተለመደ ጥላ ከኤለመንቱ ውጭ ያርፋል፣ ልክ ከፍ ካለ ካርድ በስተጀርባ እንዳለ ብርሃን። Inset ግን ጥላውን ወደ ውስጥ ይገለብጠዋል፤ በዚህም ኤለመንቱ ወደ ውስጥ የተጫነ ይመስላል — ይህ ወደ ውስጥ ለገቡ የግቤት ሳጥኖች (inputs) ወይም ለተጫኑ ቁልፎች በጣም ጠቃሚ ነው።

ለምን ከአንድ በላይ የጥላ ንብርብሮችን እንደራርባለን?

አንድ ነጠላ ጥላ ከተወሰነ መጠን በላይ ሲሆን ጠፍጣፋ ይመስላል። እውነተኛ ጥልቀት ለመፍጠር ብዙውን ጊዜ ጥብቅና ጥቁር ጥላን ከሌላ ሰፊና ለስላሳ ጥላ ጋር ማጣመር ያስፈልጋል — ሁለተኛ ንብርብር በመጨመር እያንዳንዱን ለየብቻ በማስተካከል ይህንን ውጤት ማግኘት ይችላሉ።

የCSS Cubic Bezier ጀነሬተርየeasing ኩርባን ለመቅረጽ ሁለቱን እጀታዎች ይጎትቱ፣ ነጥቡ ከቋሚው ጋር ሲወዳደር ይመልከቱ፣ እና የcubic-bezier() እሴቱን ይቅዱ።የGradient ጀነሬተርlinear, radial, ወይም conic gradient ይገንቡ፣ የቀለም ማቆሚያዎችን ይጨምሩ እና አቅጣጫውን ያስተካክሉ፣ ከዚያም CSS ኮዱን በአንድ ጠቅታ ይቅዱ።የBorder Radius ጀነሬተርእያንዳንዱን ማዕዘን በተንሸራታቾች ይክቡ፣ በኤሊፕቲካል ሁነታ ተፈጥሯዊ የblob ቅርጾችን ይስሩ፣ እና CSS ኮዱን ወዲያውኑ ይቅዱ።የFlexbox ጀነሬተርበምስላዊ መቆጣጠሪያዎች የflex ኮንቴይነር እና አይተሞቹን ያዘጋጁ፣ አቀማመጡ በቀጥታ ሲለወጥ ይመልከቱ፣ እና CSS ኮዱን በአንድ ጠቅታ ይቅዱ።የCSS Grid ጀነሬተርአምዶችዎን እና ረድፎችዎን ያዘጋጁ፣ አይተሞችን ለማስቀመጥ በሴሎች ላይ ይጎትቱ፣ እና የgrid CSS ኮዱን ከተዛማጅ HTML ጋር በአንድ ጠቅታ ይቅዱ።የCSS clamp() ካልኩሌተርለአነስተኛ እና ትላልቅ ስክሪኖች መጠን ያስገቡ እና በመካከላቸው በተለዋዋጭ ሁኔታ የሚያድግ የclamp() እሴት ያግኙ — ለጽሑፍ መጠኖች፣ padding፣ margins ወይም gaps።የቀለም መቀየሪያቀለሞችን በHEX, RGB, HSL, HSV, CMYK እና LAB መካከል ይቀይሩ — አንዱን ሳጥን ሲያስተካክሉ ሌሎቹ አብረው ይዘመናሉ።CSS ማስዋቢያ እና ማሳነሻየተዘበራረቀ CSS በቀላሉ ለማንበብ ክፍተቶችን ያስተካክሉ፣ ወይም ደንቦችዎን በጭራሽ በማይቀይር አስተማማኝ ሁነታ አሳንሰው ያዘጋጁ።የንፅፅር መመርመሪያ (Contrast Checker)የWCAG ንፅፅር መጠንን እና የትኞቹ የAA እና AAA ደረጃዎች እንደሚያልፉ ለማየት የጽሑፍ እና የጀርባ ቀለም ያስገቡ።