ശുദ്ധമായ CSS3 ഫോം സ്റ്റൈലിംഗ് കൂടുതൽ ജനപ്രിയമാവുകയാണ്. അതിന്റെ പോരായ്മകൾ ഉണ്ട്, എന്നാൽ പരമ്പരാഗത ജെഎസ് ഓവർലേയിൽ നിന്ന് വർദ്ധിച്ച ലോഡിംഗ് സമയം നിങ്ങളുടെ മുഴുവൻ ഓഡിയൻസ് പരമാവധി ഒപ്റ്റിമൈസ് കുറിച്ച് സംസാരിക്കുമ്പോൾ സെക്കന്റുകൾ പാഴാക്കുന്നു. മിക്ക ഫോമുകളും സാമാന്യം നേർരേഖയുള്ളവയാണ്, സ്വന്തമായി വെല്ലുവിളി സൃഷ്ടിക്കുന്ന റേഡിയോകളും ചെക്ക് ബോക്സുകളും ഉപയോഗിക്കുന്നതിന് പകരം ഇൻപുട്ടുകളും ടെക്സ്റ്റ് ഏരിയകളും മാത്രമാണ് ഉപയോഗിക്കുന്നത്.
താഴെ യുള്ള ഉദാഹരണ കോഡ് നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയുന്നതിന്റെ ഒരു ചെറിയ സാമ്പിൾ മാത്രമാണ്. നിങ്ങളുടെ ഫോമിലേക്ക് പശ്ചാത്തല ഗ്രേഡിയന്റുകളോ നിറമോ ചേർക്കാൻ ഭയപ്പെടേണ്ടതില്ല. ഞാൻ കളർ നിർദ്ദിഷ്ട എന്നതിനേക്കാൾ കൂടുതൽ വിശാലമായ പ്രേക്ഷകരെ തൃപ്തിപ്പെടുത്തുന്നതിനാൽ, മിക്ക ഘടകങ്ങൾക്കും ഒരു സാധാരണ ഗ്രേ ലുക്ക് ഫോക്കസ് ചെയ്യുന്നു. നിങ്ങളുടെ വെബ് സൈറ്റിലേക്ക് തികച്ചും വ്യത്യസ്തമായ ലുക്ക് ചേർക്കുന്നതിന് നിങ്ങൾക്ക് നിഴലും പശ്ചാത്തല നിറവും ഉപയോഗിച്ച് കളിക്കാം. നിങ്ങൾക്ക് ഒരു ഡാർക്ക് വെബ് സൈറ്റ് ഉണ്ടെങ്കിൽ, ഒരു ഇരുണ്ട പശ്ചാത്തലത്തിൽ മിക്സ് ചെയ്യാനും പോപ്പ് ചെയ്യാനും CSS ഫോം കോഡ് സ്വാപ്പ് ചെയ്യാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു. ഏതു രൂപവും ഉടനടി സ്റ്റൈൽ ചെയ്യുന്നതിന് ഈ CSS നിങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിലേക്ക് ചേർക്കുക.
input {
padding: 10px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
അതിർത്തി- ആരം: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
ബോക്സ്-നിഴൽ: 0 0 3px #444;
അതിർത്തി: 1px സോളിഡ് #fff;
}
textarea {
padding: 15px;
അതിർത്തി: 1px സോളിഡ് #fff;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
അതിർത്തി- ആരം: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-shadow: 0 0 5px #444;
ബോക്സ്-നിഴൽ: 0 0 10px #444;
}
input:[type="text"]hover, textarea:hover {
അതിർത്തി: 1px സോളിഡ് #233567;
}
സിഎസ്എസ് ഇല്ലാത്ത ഡിഫോൾട്ട് ഫോം. എനിക്ക് ബോറടിപ്പിക്കുന്ന രൂപം പോലെ തോന്നുന്നു!
ഇപ്പോൾ ഞങ്ങൾ CSS ചേർത്താൽ, ഫോമിന്റെ മൊത്തത്തിലുള്ള ലുക്ക് മെച്ചപ്പെടുത്താൻ കഴിയും. ഈ ഫോം കൂടുതൽ ആവേശകരമാണ്! വൃത്താകൃതിയിലുള്ള മൂലകളും മൃദുവായ നിഴലും കൂടുതൽ കൂടുതൽ മതിപ്പു നൽകുന്ന പാഡിംഗ് എന്നിവയോട് കൂടുതൽ ആധുനികവും ആധുനികവുമായ ഒരു ഫീൽ ഇത് നൽകുന്നു. ഈ രീതി പല വെബ്സൈറ്റുകൾക്കും അനുയോജ്യമാണ്, എന്നാൽ തീർച്ചയായും അത് എല്ലാ വെബ് സൈറ്റുകൾക്കും അനുയോജ്യമല്ല. ഈ ഫോം നിങ്ങളുടെ അഭിരുചിക്കനുസരിച്ച് ഇഷ്ടാനുസൃതമാക്കുന്നത് നിങ്ങൾ ആസ്വദിക്കുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.
ഫോമിലെ CSS നിങ്ങളുടെ വെബ് രൂപത്തിന് വലിയ സ്വാധീനം ചെലുത്തുന്നു. നിങ്ങളുടെ ഫോം കൂടുതൽ മെച്ചപ്പെടുത്താൻ നിങ്ങൾ താൽപ്പര്യപ്പെടുന്നെങ്കിൽ, ഇവിടെ ട്യൂട്ടോറിയലുകളിൽ നിങ്ങൾ കാണുന്ന മറ്റ് ഗുണഗണങ്ങൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്: പശ്ചാത്തല നിറം, ഗ്രേഡിയന്റ്, പാഡിംഗ് അല്ലെങ്കിൽ ഒരു ചിത്രം പോലും, എന്നാൽ നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റിലേക്ക് ഒരു ചെറിയ CSS ചേർക്കുന്നതിലൂടെ നിങ്ങൾക്ക് സംതൃപ്തി ലഭിക്കും എന്ന് ഞാൻ കരുതുന്നു.