ਮੁਫ਼ਤ CSS ਬਾਕਸ ਸ਼ੈਡੋ ਜਨਰੇਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

box-shadow ਜਨਰੇਟਰ ਪੂਰੀ ਤਰ੍ਹਾਂ client-side React ਟੂਲ ਹੈ — ਕੋਈ ਸਰਵਰ, ਕੋਈ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ। ਇਹ state ਵਿੱਚ shadow layer objects ਦੀ ਸੂਚੀ ਰੱਖਦਾ ਹੈ, ਹੱਥ ਨਾਲ ਲਿਖੇ rgba() formatter ਨਾਲ ਹਰ ਬਦਲਾਅ 'ਤੇ ਸਹੀ CSS box-shadow strings ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ React ਦੇ style prop ਰਾਹੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਸਿੱਧੇ ਝਲਕ element 'ਤੇ ਲਾਉਂਦਾ ਹੈ ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਪਣਾ rendering ਇੰਜਣ ਨਤੀਜਾ ਤੁਰੰਤ ਬਣਾਏ।

1. 1
   ਲੇਅਰ ਪੈਰਾਮੀਟਰ formatter ਨੂੰ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ

   ਹਰ shadow layer x/y offsets, blur, spread, ਇੱਕ hex ਰੰਗ, ਅਤੇ opacity ਮੁੱਲ ਰੱਖਦੀ ਹੈ। ਹਰ ਬਦਲਾਅ 'ਤੇ, ਇੱਕ ਛੋਟਾ shadowToCss function regex ਨਾਲ hex ਰੰਗ ਨੂੰ RGB ਹਿੱਸਿਆਂ ਵਿੱਚ ਬਦਲਦਾ ਹੈ, ਫਿਰ 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 ਇੰਜਣ ਤੁਰੰਤ ਪਰਛਾਵਾਂ ਰੰਗਦਾ ਹੈ — ਕੋਈ canvas ਜਾਂ WebGL ਨਹੀਂ, ਸਿਰਫ਼ ਮੂਲ CSS rendering।
3. 3
   ਖਿੱਚ ਕੇ ਥਾਂ ਬਦਲਣਾ Pointer Events API ਵਰਤਦਾ ਹੈ

   ਝਲਕ ਡੱਬੇ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਖਿੱਚਣ ਨਾਲ element 'ਤੇ setPointerCapture ਕਾਲ ਹੁੰਦਾ ਹੈ, ਫਿਰ onPointerMove ਫ਼ਰਕਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਕੇ ਸਰਗਰਮ layer ਦੇ x ਅਤੇ y offsets ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ। Shift ਦਬਾ ਕੇ ਰੱਖਣ ਨਾਲ ਬਾਰੀਕ ਥਾਂ-ਨਿਰਧਾਰਨ ਲਈ 0.25x ਪੈਮਾਨਾ ਲੱਗਦਾ ਹੈ।
4. 4
   ਆਉਟਪੁੱਟ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਹੁੰਦਾ ਹੈ

   ਟੂਲ ਉਸੇ layer ਡਾਟੇ ਤੋਂ ਦੋ ਆਉਟਪੁੱਟ ਫਾਰਮੈਟ ਬਣਾਉਂਦਾ ਹੈ: ਮਿਆਰੀ CSS box-shadow declaration, ਅਤੇ Tailwind arbitrary-value class (shadow-[...]) ਜਿੱਥੇ Tailwind ਦੇ ਸਿੰਟੈਕਸ ਨਿਯਮਾਂ ਅਨੁਸਾਰ ਸਪੇਸਾਂ ਦੀ ਥਾਂ underscores ਹੁੰਦੇ ਹਨ। ਇੱਕ-ਕਲਿੱਕ ਕਾਪੀ navigator.clipboard.writeText ਵਰਤਦੀ ਹੈ।

ਸੰਬੰਧਿਤ ਟੂਲ