મફત CSS બોક્સ શેડો જનરેટર

આ કેવી રીતે કાર્ય કરે છે

Box-shadow જનરેટર સંપૂર્ણપણે client-side React સાધન છે — કોઈ સર્વર, કોઈ લાઇબ્રેરી નહીં. તે state માં shadow layer ઑબ્જેક્ટ્સની યાદી જાળવે છે, હાથે લખેલા rgba() formatter વાપરીને દરેક ફેરફારે માન્ય CSS box-shadow strings એસેમ્બલ કરે છે, અને React ના style prop દ્વારા સીધા preview એલિમેન્ટ પર લાગુ કરે છે જેથી બ્રાઉઝરનું પોતાનું rendering એન્જિન તરત જ પરિણામ દોરે.

1. 1
   Layer પેરામીટર્સ formatter ને ફીડ કરે છે

   દરેક shadow layer x/y offsets, blur, spread, hex color, અને opacity મૂલ્ય સાચવે છે. દરેક ફેરફારે, એક નાનું shadowToCss ફંક્શન regex સાથે hex color ને RGB components માં કન્વર્ટ કરે છે, પછી rgba() string એસેમ્બલ કરે છે — ઉદાહરણ તરીકે, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). બહુવિધ layers કોમા સાથે જોડાય છે.
2. 2
   બ્રાઉઝર જીવંત પ્રિવ્યૂ રેન્ડર કરે છે

   એસેમ્બલ કરેલી string ને JSX માં સીધા div એલિમેન્ટની boxShadow style property ને assign કરવામાં આવે છે. React DOM attribute અપડેટ કરે છે, અને બ્રાઉઝરનું CSS એન્જિન તરત જ shadow પેઇન્ટ કરે છે — કોઈ canvas કે WebGL સામેલ નથી, ફક્ત native CSS rendering.
3. 3
   Drag-to-position Pointer Events API વાપરે છે

   Preview box પર ક્લિક કરવા અને ખેંચવાથી એલિમેન્ટ પર setPointerCapture કૉલ થાય છે, પછી active layer ના x અને y offsets ને રીયલ ટાઇમમાં અપડેટ કરવા માટે onPointerMove deltas ટ્રેક કરે છે. Shift પકડી રાખવાથી ફાઇન-ગ્રેઇન્ડ positioning માટે 0.25x scale factor લાગુ થાય છે.
4. 4
   આઉટપુટ ક્લિપબોર્ડ પર કૉપિ થાય છે

   સાધન એક જ layer ડેટામાંથી બે આઉટપુટ ફોર્મેટ બનાવે છે: પ્રમાણભૂત CSS box-shadow declaration, અને Tailwind arbitrary-value class (shadow-[...]) જ્યાં Tailwind ના syntax rules પ્રમાણે spaces ને underscores થી બદલવામાં આવે છે. One-click copy navigator.clipboard.writeText વાપરે છે.

સંબંધિત સાધનો