आपली वेबसाइट पहा सुधारण्यासाठी जाणून घ्या
सीएसएस सह शैली फॉर्म कसे शिकत आपल्या वेबसाइट देखावा सुधारण्यासाठी एक चांगला मार्ग आहे. बहुतांश वेब पेजेसवर HTML फॉर्म हे सर्वात वाईट गोष्टींमध्ये असल्याची खात्री करून घेतात. ते सहसा कंटाळवाणे आणि उपयुक्ततावादी असतात आणि शैलीच्या बाबतीत बरेच काही देत नाहीत.
CSS सह, जे बदलू शकते अधिक प्रगत फॉर्म टॅगसह CSS चे मिश्रण करणे काही छान दिसणारे फॉर्म देऊ शकते.
रंग बदला
मजकूर प्रमाणेच, आपण फॉर्ग्राऊंड आणि बॅकग्राउंड कलर फॉर्म एलिमेंटस बदलू शकता.
जवळजवळ प्रत्येक फॉर्म घटकाचा पार्श्वभूमी रंग बदलण्याचा एक सोपा मार्ग म्हणजे इनपुट टॅगवरील पार्श्वभूमी-रंग गुणधर्म वापरणे. उदाहरणार्थ, हा कोड सर्व घटकांवर एक निळा पार्श्वभूमी रंग (# 9 सीएफ) लागू करतो.
इनपुट {
पार्श्वभूमी-रंग: # 9cf;
रंग: # 000;
}
फक्त विशिष्ट फॉर्म घटकांचा पार्श्वभूमी रंग बदलण्यासाठी, केवळ मजकूरचरा जोडा आणि शैली निवडा. उदाहरणार्थ:
इनपुट, मजकूररैआ, निवडा {
पार्श्वभूमी-रंग: # 9cf;
रंग: # 000;
}
आपण आपला पार्श्वभूमी रंग गडद केल्यास आपण मजकूर रंग बदलू इच्छिता. रंगांच्या तीव्रतेमुळे फॉर्मचे घटक अधिक सुवाच्य बनण्यास मदत करतात. उदाहरणार्थ, गडद लाल पार्श्वभूमीवर मजकूर मजकूर रंग पांढरा असल्यास अधिक सहज वाचता येतो. उदाहरणार्थ, हा कोड लाल पार्श्वभूमीवर पांढरा मजकूर ठेवतो.
इनपुट, मजकूररैआ, निवडा {
पार्श्वभूमी-रंग: # c00;
रंग: #fff;
}
आपण फॉर्म टॅग स्वतः वर एक पार्श्वभूमी रंग देखील ठेवू शकता लक्षात ठेवा की फॉर्म टॅग हा एक ब्लॉक घटक आहे , त्यामुळे संपूर्ण आयत मध्ये रंग भरला जातो, घटकांची फक्त ठिकाणे नव्हे.
क्षेत्रफळ बनवण्यासाठी आपण ब्लॉग्जच्या एका पीला पार्श्वभूमीस जोडू शकता:
फॉर्म {
पार्श्वभूमी-रंग: #ffc;
}
सीमा जोडा
रंगाप्रमाणे, आपण विविध फॉर्म घटकांची सीमा बदलू शकता. आपण संपूर्ण फॉर्मभोवती एक सीमा समाविष्ट करू शकता. पॅडिंग जोडण्याचे सुनिश्चित करा, किंवा आपल्या फॉर्म घटकांना सीमापलीकडे पुढे जाम केले जाईल.
येथे 5 पिक्सेल्स पॅडिंगसह 1-पिक्सेल काळ्या किनाऱ्यासाठी कोडचा एक उदाहरण आहे:
फॉर्म {
सीमा: 1 पीएक्स घन # 000;
पॅडिंग: 5px;
}
आपण सीमाच केवळ फॉर्मच्याच बाजूला ठेवू शकता. त्यांना बाहेर उभे करण्यासाठी इनपुट आयटमची सीमा बदला:
इनपुट {
सीमा: 2px तुटक # c00;
}
आपण इनपुट बॉक्सेससारख्या कमी दिसणार्या इनपुट बॉक्सेसवर बॉर्डर ठेवता तेव्हा काळजी घ्या आणि काही लोकांना हे समजत नसेल की ते फॉर्म भरवू शकतात.
शैली वैशिष्ट्ये एकत्र करा
आपले फॉर्म तत्व विचार आणि काही सीएसएस सोबत लावून, आपण आपल्या साइटचे डिझाइन आणि आराखडा पूरक असलेली एक छान दिसणारी फॉर्म सेट करू शकता.