CSS Box Shadow ജനറേറ്റർ
CSS Box Shadow എന്താണ്?
CSS box-shadow പ്രോപ്പർട്ടി ഒരു എലമെന്റിന്റെ ഫ്രെയിമിന് ചുറ്റും നിഴൽ ഇഫക്റ്റുകൾ ചേർക്കുന്നു. നിഴലുകൾ ഓഫ്സെറ്റ്, ബ്ലർ, സ്പ്രെഡ്, വർണ്ണം, inset (ആന്തരിക നിഴൽ) ആയി ക്രമീകരിക്കാം. കോമ-വേർതിരിച്ച ഒന്നിലധികം നിഴലുകൾ സമൃദ്ധ ഇഫക്റ്റുകൾക്കായി അടുക്കി വെക്കാം. ഈ ജനറേറ്റർ നിങ്ങൾക്ക് സങ്കീർണ്ണമായ ഒന്നിലധികം-ലെയർ നിഴലുകൾ ദൃശ്യപരമായി നിർമ്മിക്കാനും ക്ലിപ്ബോർഡിലേക്ക് ഒട്ടിക്കാൻ തയ്യാറായ CSS പകർത്താനും അനുവദിക്കുന്നു.
Box Shadow ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം
-
നിഴൽ സ്ഥാനം നിർണ്ണയിക്കാനും ആകൃതി നൽകാനും Offset X/Y, Blur, Spread സ്ലൈഡറുകൾ ക്രമീകരിക്കുക.
-
നിഴലിന്റെ നിറം തിരഞ്ഞെടുക്കാൻ കളർ സ്വോച്ചിൽ ക്ലിക്ക് ചെയ്യുക, സുതാര്യതയ്ക്ക് Opacity സ്ലൈഡർ ഉപയോഗിക്കുക.
-
ആന്തരിക തിളക്കം അല്ലെങ്കിൽ അമർത്തിയ ഇഫക്റ്റ് സൃഷ്ടിക്കാൻ 'Inset' ടോഗിൾ ചെയ്യുക.
-
ഒന്നിലധികം നിഴലുകൾ അടുക്കി വെക്കാൻ '+ ലെയർ ചേർക്കുക' ക്ലിക്ക് ചെയ്യുക.
-
ജനറേറ്റ് ചെയ്ത CSS പകർത്തി നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റിൽ ഒട്ടിക്കുക.
പതിവായി ചോദിക്കപ്പെടുന്ന ചോദ്യങ്ങൾ
box-shadow ഉം drop-shadow ഫിൽട്ടറും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്? box-shadow ഘടകത്തിന്റെ ദീർഘചതുര അതിർത്തി പെട്ടിക്കിന് ചുറ്റും നിഴലുകൾ ചേർക്കുകയും inset നിഴലുകളെ പിന്തുണയ്ക്കുകയും ചെയ്യുന്നു. CSS filter: drop-shadow() ഘടകത്തിന്റെ വിഷ്വൽ ആകൃതിയിലേക്ക് (സ്വച്ഛത ഉൾപ്പെടെ) പ്രയോഗിക്കപ്പെടുന്നു, ഇത് സ്വച്ഛ പശ്ചാത്തലമുള്ള PNG പോലെ ദീർഘചതുര അല്ലാത്ത രൂപരേഖകൾ പിന്തുടരുന്നു.
Material Design കാർഡ് എലിവേഷൻ ഇഫക്ട് എങ്ങനെ സൃഷ്ടിക്കാം? രണ്ട് box-shadow സ്തരീകരിക്കുക: മൃദു അനുബന്ധ നിഴൽ (വലിയ ബ്ലർ, കുറഞ്ഞ അതാര്യത, ചെറിയ spread) കൂടാതെ കീ നിഴൽ (ചെറിയ ബ്ലർ, ഉയർന്ന അതാര്യത, ദിശാ ഓഫ്സെറ്റ്). ഉദാഹരണത്തിന്: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
box-shadow പേജ് ലേഔട്ടിനെ ബാധിക്കുന്നുണ്ടോ? ഇല്ല. box-shadow ഘടകത്തിന്റെ വലിപ്പ് അല്ലെങ്കിൽ ഡോക്യുമെന്റ് ഫ്ലോയിലെ സ്ഥാനത്തെ ബാധിക്കുന്നില്ല. outline ന് വിപരീതമായി, ഇത് ലേഔട്ട് സ്ഥലം പിടിച്ചെടുക്കുന്നില്ല കൂടാതെ മറ്റ് ഘടകങ്ങളെ നീക്കും.
box-shadow അനിമേറ്റ് ചെയ്യാൻ കഴിയുന്നുണ്ടോ? അതെ. box-shadow CSS transitions കൂടാതെ animations ന്റെ മാധ്യമത്തിൽ അനിമേറ്റ് ചെയ്യാവുന്നതാണ്. പ്രകടനത്തിനായി, ആവശ്യമായിരിക്കുമ്പോൾ മാത്രം box-shadow സംക്രമണം ആഗ്രഹിക്കുക — ബ്രൗസർ transform അല്ലെങ്കിൽ opacity പോലെ box-shadow പരിവർത്തനങ്ങൾ കാര്യക്ഷമതയോടെ GPU ത്വരിത ചെയ്യാൻ കഴിയില്ല.
Keywords: CSS box shadow ജനറേറ്റർ, box-shadow CSS, CSS നിഴൽ ടൂൾ, CSS drop shadow, inset shadow, മൾട്ടി-ലെയർ നിഴൽ, CSS shadow ഓൺലൈൻ