CSS ബോക്സ് ഷാഡോ പ്രോപ്പർട്ടിയുടെ ഘടന
വെബ് ഡിസൈനിൽ എലമെന്റുകൾക്ക് ചുറ്റും നിഴലുകൾ സൃഷ്ടിക്കുന്നതിനാണ് box-shadow എന്ന CSS പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നത്. ഈ പ്രോപ്പർട്ടി കൃത്യമായി മനസ്സിലാക്കുന്നതിന് അതിന്റെ വിവിധ ഘടകങ്ങൾ എങ്ങനെയെല്ലാം പ്രവർത്തിക്കുന്നു എന്ന് പരിശോധിക്കേണ്ടതുണ്ട്. ഒരു ബോക്സ് ഷാഡോ രൂപപ്പെടുത്തുമ്പോൾ പ്രധാനമായും താഴെ പറയുന്ന ഘടകങ്ങളാണ് ക്രമീകരിക്കേണ്ടത്:
- ഹൊറിസോണ്ടൽ ഓഫ്സെറ്റ്: നിഴലിനെ ഇടത്തോട്ടും വലത്തോട്ടും നീക്കുന്നതിനുള്ള അളവാണിത്.
- വെർട്ടിക്കൽ ഓഫ്സെറ്റ്: നിഴലിനെ മുകളിലോട്ടും താഴോട്ടും നീക്കുന്നതിനുള്ള അളവാണിത്.
- ബ്ലർ (Blur): നിഴലിന്റെ അരികുകളുടെ കാഠിന്യം കുറച്ച് അതിനെ മൃദുവാക്കാൻ ഇത് സഹായിക്കുന്നു.
- സ്പ്രെഡ്: ബ്ലർ ചെയ്യുന്നതിന് മുൻപ് നിഴലിന്റെ വ്യാപ്തി കൂട്ടാനോ കുറയ്ക്കാനോ ഇത് ഉപയോഗിക്കുന്നു.
- ഷാഡോ നിറം: നിഴലിനായി അനുയോജ്യമായ നിറം തിരഞ്ഞെടുക്കാൻ ഇത് സഹായിക്കുന്നു.
- ഒപാസിറ്റി: നിഴലിന്റെ സുതാര്യത ക്രമീകരിക്കുന്നതിനുള്ള അളവാണിത്.
ഈ ഘടകങ്ങളെല്ലാം കൃത്യമായ അളവിൽ സംയോജിപ്പിച്ചാണ് വെബ് പേജുകളിലെ കാർഡുകൾക്കും ബട്ടണുകൾക്കും മറ്റ് എലമെന്റുകൾക്കും ആവശ്യമായ നിഴലുകൾ നിർമ്മിക്കുന്നത്.
ഓഫ്സെറ്റ്, ബ്ലർ, സ്പ്രെഡ് എന്നിവയുടെ പ്രവർത്തനം
ഒരു നിഴലിന്റെ ആകൃതിയും സ്ഥാനവും നിർണ്ണയിക്കുന്നതിൽ ഓഫ്സെറ്റ്, ബ്ലർ, സ്പ്രെഡ് എന്നിവയ്ക്ക് വലിയ പങ്കുണ്ട്. ഈ ടൂളിൽ നൽകിയിരിക്കുന്ന സ്ലൈഡറുകൾ ഉപയോഗിച്ച് ഇവയുടെ മൂല്യങ്ങൾ തത്സമയം മാറ്റാൻ സാധിക്കും.
| ഘടകം | സ്ലൈഡർ പരിധി | പ്രവർത്തന രീതി |
|---|---|---|
| ഹൊറിസോണ്ടൽ ഓഫ്സെറ്റ് | -50px മുതൽ 50px വരെ | പോസിറ്റീവ് മൂല്യങ്ങൾ നിഴലിനെ വലത്തോട്ടും നെഗറ്റീവ് മൂല്യങ്ങൾ ഇടത്തോട്ടും നീക്കുന്നു. |
| വെർട്ടിക്കൽ ഓഫ്സെറ്റ് | -50px മുതൽ 50px വരെ | പോസിറ്റീവ് മൂല്യങ്ങൾ നിഴലിനെ താഴോട്ടും നെഗറ്റീവ് മൂല്യങ്ങൾ മുകളിലോട്ടും നീക്കുന്നു. |
| ബ്ലർ | 0px മുതൽ 100px വരെ | പൂജ്യം ആയിരിക്കുമ്പോൾ നിഴലിന്റെ അരികുകൾ കടുപ്പമുള്ളതായിരിക്കും. മൂല്യം കൂടുന്തോറും അരികുകൾ കൂടുതൽ മൃദുവായി മാറുന്നു. |
| സ്പ്രെഡ് | -50px മുതൽ 50px വരെ | പോസിറ്റീവ് മൂല്യങ്ങൾ നിഴലിനെ പുറത്തേക്ക് വ്യാപിപ്പിക്കുന്നു. നെഗറ്റീവ് മൂല്യങ്ങൾ നിഴലിനെ ഉള്ളിലേക്ക് വലിക്കുന്നു. |
നെഗറ്റീവ് സ്പ്രെഡ് ഉപയോഗിക്കുന്നത് വഴി എലമെന്റിന്റെ യഥാർത്ഥ അതിരുകളേക്കാൾ ചെറിയ നിഴലുകൾ നിർമ്മിക്കാൻ സാധിക്കും. ഇത് കടുപ്പമുള്ളതും എന്നാൽ എലമെന്റിനോട് ചേർന്നുനിൽക്കുന്നതുമായ നിഴലുകൾക്ക് വളരെ അനുയോജ്യമാണ്.
ഇൻസെറ്റ് ഷാഡോയും സാധാരണ ഷാഡോയും തമ്മിലുള്ള വ്യത്യാസം
സാധാരണയായി ഒരു ബോക്സ് ഷാഡോ എലമെന്റിന്റെ പുറത്താണ് ദൃശ്യമാകുന്നത്. ഇത് എലമെന്റ് പേജിൽ നിന്ന് ഉയർന്നുനിൽക്കുന്നതുപോലെയുള്ള ഒരു അനുഭവം നൽകുന്നു. എന്നാൽ ഇതിൽ നിന്നും വ്യത്യസ്തമായി നിഴൽ എലമെന്റിന്റെ ഉള്ളിലേക്ക് വീഴാൻ ഇൻസെറ്റ് ഷാഡോ ഉപയോഗിക്കാം.
ടൂളിലെ ഇൻസെറ്റ് ഷാഡോ ടോഗിൾ ഓൺ ചെയ്യുമ്പോൾ നിഴൽ എലമെന്റിന്റെ ഉള്ളിലേക്ക് തിരിയുന്നു. ഒരു എലമെന്റ് ഉള്ളിലേക്ക് അമർന്നിരിക്കുന്നതായി കാണിക്കാൻ ഈ രീതി ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, വെബ് ഫോമുകളിലെ കുഴിഞ്ഞ ഇൻപുട്ടുകൾ (sunken inputs) അല്ലെങ്കിൽ അമർത്തിയ അവസ്ഥയിലുള്ള ബട്ടണുകൾ (pressed buttons) എന്നിവ രൂപകൽപ്പന ചെയ്യാൻ ഇൻസെറ്റ് ഷാഡോ വളരെ സഹായകരമാണ്.
ഒന്നിലധികം ലെയറുകൾ ഉപയോഗിച്ച് ആഴം വർദ്ധിപ്പിക്കൽ
ഒരു നിശ്ചിത പരിധിക്ക് മുകളിൽ ഒരൊറ്റ ഷാഡോ ലെയർ മാത്രം ഉപയോഗിക്കുമ്പോൾ അത് പലപ്പോഴും സ്വാഭാവികതയില്ലാത്തതും പരന്നതുമായി അനുഭവപ്പെടാം. യഥാർത്ഥ ലോകത്തിലെ പ്രകാശ ക്രമീകരണത്തിന് സമാനമായ ആഴം വെബ് ഡിസൈനിൽ കൊണ്ടുവരുന്നതിന് ഒന്നിലധികം ഷാഡോ ലെയറുകൾ ഒന്നിനുമീതെ ഒന്നായി അടുക്കി ഉപയോഗിക്കേണ്ടതുണ്ട്.
ഈ ടൂളിൽ ഒരേസമയം ഒന്നിലധികം ലെയറുകൾ ചേർക്കാനും അവയുടെ മൂല്യങ്ങൾ വെവ്വേറെ ക്രമീകരിക്കാനും സാധിക്കും. ടൂൾ തുറക്കുമ്പോൾ തന്നെ അഞ്ച് ലെയറുകൾ മുൻകൂട്ടി ക്രമീകരിച്ചിട്ടുണ്ടാകും. ഇതിൽ ആദ്യത്തെ ലെയറിന് ഡിഫോൾട്ടായി 0 8 24 -4 എന്ന മൂല്യവും 18% സുതാര്യതയുള്ള കറുപ്പ് നിറവും നൽകിയിരിക്കുന്നു. ബാക്കിയുള്ള ലെയറുകൾ തുടക്കത്തിൽ മറഞ്ഞിരിക്കുന്ന അവസ്ഥയിലായിരിക്കും.
പുതിയ ലെയർ ചേർക്കാനും ആവശ്യമില്ലാത്തവ നീക്കം ചെയ്യാനും താഴെ പറയുന്ന ബട്ടണുകൾ ഉപയോഗിക്കാം:
- ലെയർ ചേർക്കുക: ഡിഫോൾട്ട് മൂല്യങ്ങളുള്ള ഒരു പുതിയ ഷാഡോ ലെയർ നിർമ്മിക്കുന്നു.
- ലെയർ നീക്കം ചെയ്യുക: നിലവിൽ തിരഞ്ഞെടുത്ത ഷാഡോ ലെയർ പൂർണ്ണമായി ഒഴിവാക്കുന്നു.
ഒന്നിലധികം ലെയറുകൾ ഉപയോഗിക്കുമ്പോൾ ജനറേറ്റ് ചെയ്യപ്പെടുന്ന CSS കോഡിൽ ഓരോ ലെയറിന്റെയും മൂല്യങ്ങൾ കോമ (comma) ഉപയോഗിച്ച് വേർതിരിച്ചാണ് കാണിക്കുന്നത്. ഒരു കടുപ്പമുള്ള ചെറിയ നിഴലും അതിനൊപ്പം മൃദുവായ വീതിയേറിയ മറ്റൊരു നിഴലും ലെയറുകളായി സംയോജിപ്പിക്കുന്നതിലൂടെ മികച്ച ത്രിമാന അനുഭവം സൃഷ്ടിക്കാൻ സാധിക്കും.
ഡാറ്റാ പ്രോസസ്സിംഗും സ്വകാര്യതയും
ഈ ടൂൾ ഉപയോഗിക്കുമ്പോൾ നിങ്ങളുടെ സ്വകാര്യത പൂർണ്ണമായും സംരക്ഷിക്കപ്പെടുന്നു. നിങ്ങൾ സ്ലൈഡറുകളിലൂടെ വരുത്തുന്ന മാറ്റങ്ങളും ഷാഡോ ക്രമീകരണങ്ങളും പൂർണ്ണമായും നിങ്ങളുടെ വെബ് ബ്രൗസറിലാണ് റെൻഡർ ചെയ്യുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്ന ഒരു വിവരവും BroBroGo-ലേക്ക് അപ്ലോഡ് ചെയ്യപ്പെടുന്നില്ല.
പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ (FAQ)
ഓഫ്സെറ്റ്, ബ്ലർ, സ്പ്രെഡ് എന്നിവ യഥാർത്ഥത്തിൽ എന്താണ് നിയന്ത്രിക്കുന്നത്?
ഓഫ്സെറ്റ് ഷാഡോയെ ഇടത്തോട്ടും വലത്തോട്ടും മുകളിലോട്ടും താഴോട്ടും നീക്കുന്നു, ബ്ലർ അതിന്റെ അരികുകളെ മൃദുവാക്കുന്നു, സ്പ്രെഡ് ബ്ലർ ചെയ്യുന്നതിന് മുൻപ് അതിനെ വലുതാക്കുകയോ ചെറുതാക്കുകയോ ചെയ്യുന്നു. നെഗറ്റീവ് സ്പ്രെഡ് ഷാഡോയെ ഉള്ളിലേക്ക് വലിക്കുന്നു, ഇത് കടുപ്പമുള്ളതും അടുത്തുള്ളതുമായ ഷാഡോയ്ക്ക് ഉപയോഗപ്രദമാണ്.
ഇൻസെറ്റ് ഓപ്ഷൻ എന്താണ് ചെയ്യുന്നത്?
ഒരു സാധാരണ ഷാഡോ എലമെന്റിന് പുറത്താണ് വീഴുന്നത്, ഉയർത്തിപ്പിടിച്ച കാർഡിന് പിന്നിലെ വെളിച്ചം പോലെ. ഇൻസെറ്റ് (inset) അതിനെ ഉള്ളിലേക്ക് തിരിക്കുന്നു, അതിനാൽ എലമെന്റ് അമർന്നിരിക്കുന്നതായി തോന്നുന്നു — ഇത് കുഴിഞ്ഞ ഇൻപുട്ടുകൾക്കോ അമർത്തിയ ബട്ടണുകൾക്കോ ഉപയോഗപ്രദമാണ്.
എന്തുകൊണ്ടാണ് ഒന്നിലധികം ഷാഡോ ലെയറുകൾ അടുക്കുന്നത്?
ഒരു നിശ്ചിത വലുപ്പത്തിന് ശേഷം ഒരൊറ്റ ഷാഡോ ഫ്ലാറ്റായി തോന്നും. യഥാർത്ഥ എലിവേഷൻ സാധാരണയായി ഒരു കടുപ്പമുള്ള ഇരുണ്ട ഷാഡോയും മൃദുവായ വീതിയേറിയ ഷാഡോയും സംയോജിപ്പിക്കുന്നു — ആ പ്രഭാവം ലഭിക്കുന്നതിന് രണ്ടാമതൊരു ലെയർ ചേർത്ത് ഓരോന്നും സ്വതന്ത്രമായി ട്യൂൺ ചെയ്യുക.