ነፃ CSS Box Shadow ፈጣሪ

እንዴት እንደሚሠራ

box-shadow generator ሙሉ በሙሉ client-side React tool ነው — ምንም አገልጋይ የለም፣ ምንም ላይብረሪ የለም። በstate ውስጥ የshadow layer objects ዝርዝርን ይይዛል፣ በእያንዳንዱ ለውጥ ላይ በእጅ-የተጻፈ rgba() formatter በመጠቀም ትክክለኛ CSS box-shadow strings ይገነባል፣ እና React's style prop በኩል በቀጥታ ወደ ቅድመ-እይታ element ይተገብራቸዋል ስለዚህ የአሳሹ የራሱ rendering engine ውጤቱን ወዲያውኑ ይስላል።

1. 1
   የLayer parameters ፎርማተሩን ይመግባሉ

   እያንዳንዱ shadow layer x/y offsets, blur, spread, hex color, እና opacity value ያከማቻል። በእያንዳንዱ ለውጥ ላይ፣ ትንሽ shadowToCss function hex colorን ወደ RGB components በregex ይቀይራል፣ ከዚያ rgba() stringውን ይገነባል — ለምሳሌ, 0px 4px 12px 0px rgba(0, 0, 0, 0.15)። በርካታ layers በኮማዎች ይጣመራሉ።
2. 2
   አሳሹ ቀጥታ ቅድመ-እይታውን ያሳያል

   የተገነባው string በJSX ውስጥ በቀጥታ ወደ div element boxShadow style property ይመደባል። React DOM attributeን ያዘምናል፣ እና የአሳሹ CSS engine ጥላውን ወዲያውኑ ይቀባል — ምንም canvas ወይም WebGL የለም፣ የተፈጥሮ CSS rendering ብቻ ነው።
3. 3
   ወደ-ቦታ-ጎትት Pointer Events APIን ይጠቀማል

   ቅድመ-እይታ ሳጥኑን ጠቅ ማድረግ እና መጎተት setPointerCaptureን በንጥረ ነገሩ ላይ ይጠራል፣ ከዚያ ንቁ layerውን x እና y offsets በእውነተኛ ጊዜ ለማዘመን onPointerMove deltasን ይከታተላል። Shiftን መያዝ ለጥሩ-ደረጃ አቀማመጥ 0.25x scale factor ይተገብራል።
4. 4
   ውጤቱ ወደ ቅንጥብ ሰሌዳ ይቀዳል

   መሳሪያው ከተመሳሳይ layer data ሁለት የውጤት ቅርጸቶችን ያመርታል፦ መደበኛ CSS box-shadow declaration፣ እና Tailwind arbitrary-value class (shadow-[...]) ክፍተቶች በTailwind's syntax rules መሰረት በ underscores ተተኩ። አንድ-ጠቅታ ቅዳ navigator.clipboard.writeTextን ይጠቀማል።

ተዛማጅ መሳሪያዎች