LibraTool logoLibraTool

സൗജന്യ CSS ബോക്സ് ഷാഡോ ജനറേറ്റർ

ലൈവ് പ്രിവ്യൂ, മൾട്ടി-ലെയർ സ്റ്റാക്കിംഗ്, കളർ പിക്കർ, ഇൻസെറ്റ് ടോഗിൾ, ഒറ്റ-ക്ലിക്ക് കോപ്പി എന്നിവയോടെ CSS box-shadow-ന് വിഷ്വൽ ബിൽഡർ. Material, ന്യൂമോർഫിസം, ഗ്ലോ പ്രീസെറ്റുകൾ ഉൾപ്പെടുന്നു.

ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ ഓഫ്‌ലൈനിൽ പ്രവർത്തിക്കുന്നു
പ്രിവ്യൂ പശ്ചാത്തലം

സജീവ ലെയറിന്റെ ഷാഡോ സ്ഥാനപ്പെടുത്താൻ ബോക്സ് വലിക്കുക - സൂക്ഷ്മ നിയന്ത്രണത്തിന് Shift അമർത്തിപ്പിടിക്കുക

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

പ്രീസെറ്റുകൾ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ബോക്സ്-ഷാഡോ ജനറേറ്റർ ഒരു പൂർണ്ണ ക്ലയന്റ്-സൈഡ് React ടൂൾ ആണ് — സെർവറില്ല, ലൈബ്രറിയില്ല. ഇത് സ്റ്റേറ്റിൽ ഷാഡോ ലേയർ ഒബ്ജക്റ്റുകളുടെ ഒരു ലിസ്റ്റ് സൂക്ഷിക്കുന്നു, ഓരോ മാറ്റത്തിലും ഒരു കൈകൊണ്ട് എഴുതിയ rgba() ഫോർമാറ്റർ ഉപയോഗിച്ച് സാധുവായ CSS box-shadow സ്ട്രിംഗുകൾ കൂട്ടിച്ചേർക്കുന്നു, React-ന്റെ style പ്രോപ്പ് വഴി ഒരു പ്രിവ്യൂ എലമെന്റിൽ നേരിട്ട് പ്രയോഗിക്കുന്നു, അതിനാൽ ബ്രൗസറിന്റെ സ്വന്തം റെൻഡറിംഗ് എഞ്ചിൻ ഫലം തൽക്ഷണം വരയ്ക്കുന്നു.

  1. 1
    ലേയർ പാരാമീറ്ററുകൾ ഫോർമാറ്ററിലേക്ക് ഫീഡ് ചെയ്യുന്നു
    ഓരോ ഷാഡോ ലേയറും x/y ഓഫ്സെറ്റുകൾ, ബ്ലർ, സ്പ്രെഡ്, ഒരു ഹെക്സ് നിറം, ഒരു ഒപാസിറ്റി മൂല്യം സൂക്ഷിക്കുന്നു. ഓരോ മാറ്റത്തിലും, ഒരു ചെറിയ shadowToCss ഫംഗ്ഷൻ ഹെക്സ് നിറത്തെ ഒരു regex ഉപയോഗിച്ച് RGB ഘടകങ്ങളാക്കി മാറ്റുന്നു, പിന്നെ rgba() സ്ട്രിംഗ് കൂട്ടിച്ചേർക്കുന്നു — ഉദാഹരണത്തിന്, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). ഒന്നിലധികം ലേയറുകൾ കോമകൾ കൊണ്ട് ചേർത്തിരിക്കുന്നു.
  2. 2
    ബ്രൗസർ ലൈവ് പ്രിവ്യൂ റെൻഡർ ചെയ്യുന്നു
    കൂട്ടിച്ചേർത്ത സ്ട്രിംഗ് JSX-ൽ നേരിട്ട് ഒരു div എലമെന്റിന്റെ boxShadow സ്റ്റൈൽ പ്രോപ്പർട്ടിയിലേക്ക് അസൈൻ ചെയ്യുന്നു. React DOM ആട്രിബ്യൂട്ട് അപ്ഡേറ്റ് ചെയ്യുന്നു, ബ്രൗസറിന്റെ CSS എഞ്ചിൻ ഉടനടി ഷാഡോ പെയിന്റ് ചെയ്യുന്നു — കാൻവാസോ WebGL-ഓ ഉൾപ്പെട്ടിട്ടില്ല, വെറും നേറ്റീവ് CSS റെൻഡറിംഗ് മാത്രം.
  3. 3
    വലിച്ച്-സ്ഥാനം മാറ്റൽ Pointer Events API ഉപയോഗിക്കുന്നു
    പ്രിവ്യൂ ബോക്സ് ക്ലിക്ക് ചെയ്ത് വലിക്കുന്നത് എലമെന്റിൽ setPointerCapture വിളിക്കുന്നു, പിന്നെ സജീവ ലേയറിന്റെ x, y ഓഫ്സെറ്റുകൾ തത്സമയം അപ്ഡേറ്റ് ചെയ്യാൻ onPointerMove ഡെൽറ്റകൾ ട്രാക്ക് ചെയ്യുന്നു. Shift അമർത്തിപ്പിടിക്കുന്നത് സൂക്ഷ്മ-ഗ്രെയിൻ പൊസിഷനിംഗിന് ഒരു 0.25x സ്കെയിൽ ഫാക്ടർ പ്രയോഗിക്കുന്നു.
  4. 4
    ഔട്ട്പുട്ട് ക്ലിപ്ബോർഡിലേക്ക് പകർത്തുന്നു
    ഒരേ ലേയർ ഡാറ്റയിൽ നിന്ന് ടൂൾ രണ്ട് ഔട്ട്പുട്ട് ഫോർമാറ്റുകൾ നിർമ്മിക്കുന്നു: ഒരു സ്റ്റാൻഡേർഡ് CSS box-shadow പ്രഖ്യാപനം, ഒരു Tailwind ഇഷ്ടാനുസൃത-മൂല്യ ക്ലാസ് (shadow-[...]) Tailwind-ന്റെ സിന്റാക്സ് നിയമങ്ങൾ പ്രകാരം സ്പേസുകൾ അണ്ടർസ്കോറുകൾ കൊണ്ട് മാറ്റപ്പെടുന്നു. ഒറ്റ-ക്ലിക്ക് പകർത്തൽ navigator.clipboard.writeText ഉപയോഗിക്കുന്നു.

അനുബന്ധ ടൂളുകൾ

◖

CSS ബോർഡർ റേഡിയസ് ജനറേറ്റർ

ഓരോ കോണിലും സ്വതന്ത്ര നിയന്ത്രണത്തോടെ വൃത്താകൃതിയിലുള്ള കോണുകൾ വിഷ്വലായി ഡിസൈൻ ചെയ്യുക. ഓർഗാനിക് ബ്ലോബ് ആകൃതികൾക്കായി എലിപ്റ്റിക്കൽ X/Y സിന്റാക്സ് പിന്തുണയ്ക്കുന്നു.

പരീക്ഷിച്ചു നോക്കൂ
🟦

CSS ഗ്രിഡ് ജനറേറ്റർ

CSS ഗ്രിഡ് ദൃശ്യപരമായി ഡിസൈൻ ചെയ്യുക — ട്രാക്കുകൾ, യൂണിറ്റുകൾ, ഗ്യാപ്പുകൾ — തുടർന്ന് ജനറേറ്റ് ചെയ്ത CSS-ഉം HTML-ഉം കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ
↔️

CSS ഫ്ലെക്സ്ബോക്സ് ജനറേറ്റർ

ലൈവ് ഐറ്റങ്ങളിൽ flex direction, wrap, justify, align എന്നിവ പരീക്ഷിക്കുക — CSS കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ