पहले ब्लॉक क्षेत्र को एक सेक्शन टैग में लपेटा गया है ताकि हम लेआउट को साथ-साथ तैर सकें। बाएं स्तंभ में ये सभी इनपुट हैं: पाठ, ई-मेल, URL और टेलीफोन नंबर। जैसा कि आप अपने फोन पर टैब करते हैं, मोबाइल कीबोर्ड डिस्प्ले को इनपुट प्रकार के आधार पर अनुकूलित करना चाहिए। मोबाइल के लिए इन सुविधाओं का समर्थन करने के लिए बहुत सारे अच्छे कारण हैं क्योंकि हर कोई इन दिनों काम कर रहा है.
टैक्स्टेरिया तत्व में पगेलोड पर परिभाषित प्लेसहोल्डर टेक्स्ट भी हो सकता है। यह एक लेबल के समान है जो उपयोगकर्ता द्वारा फ़ील्ड में कुछ पाठ दर्ज करने के बाद गायब हो जाता है। जो विशेषता नहीं ली गई है वह है स्वत: पूर्ण क्योंकि textareas आमतौर पर संबंधित सामग्री में नहीं भरते हैं.
साइडबार नियंत्रण मैं इस फॉर्म का निर्माण करना चाहता था ताकि यह विंडो डिस्प्ले को आकार देने के लिए उचित रूप से प्रतिक्रिया दे सके। जब खिड़की पर्याप्त भर जाती है तो दोनों इनपुट कॉलम एक दूसरे के बगल में तैर रहे होते हैं। लेकिन अगर चौड़ाई थोड़ी कम हो जाती है, तो दाहिने हाथ की साइडबार मुख्य सामग्री से नीचे गिर जाती है.
यहाँ साइडबार क्षेत्र के लिए मेरा HTML है:
प्राप्त करने वाला: साइट स्टाफ मुख्या संपादक टेक विभाग जनसंपर्क सामान्य समर्थन यह कोड वास्तव में कुछ भी भ्रामक नहीं है। बस एक सरल विकल्प मेनू और कुछ रेडियो बटन का चयन करें। इसके अतिरिक्त, इन वस्तुओं के बाद मैंने खंड के अंत में एक रीसेट और सबमिट बटन रखा.
यह सब कुछ अच्छा और अच्छा लग रहा है, तो अब कुछ CSS गुणों में चलते हैं। फार्म तत्वों पर काम करते समय आप कई अनुकूलन कर सकते हैं। अपने आप को बहुत अधिक सोच के साथ नहीं बांधने की कोशिश करें और मज़े करें!
एनिमेटेड बॉक्स छाया जब आप एक रंगीन बाहरी छाया को एनिमेटेड करते हैं, तो आप प्रत्येक मुख्य इनपुट तत्वों के माध्यम से टैब पर ध्यान देंगे। Google Chrome के पास एक आउटलाइन प्रॉपर्टी है, जो कुछ ऐसा ही करती है, लेकिन बहुत अधिक असाधारण नहीं है। इंटरफ़ेस का यह छोटा सा हिस्सा पहली बार आगंतुकों को आकर्षित कर रहा है.
/ ** फॉर्म एलिमेंट्स ** / # होंगकीट-फॉर्म बॉक्स-साइजिंग: बॉर्डर-बॉक्स; # hongkiat-form .txtinput प्रदर्शन: ब्लॉक; फ़ॉन्ट-परिवार: "हेल्वेटिका नीयू", एरियल, सेन्स-सेरिफ़; सीमा-शैली: ठोस; सीमा-चौड़ाई: 1 पीएक्स; सीमा-रंग: # अंडाकार; मार्जिन-बॉटम: 20 पीएक्स; फ़ॉन्ट-आकार: 1.55em; गद्दी: 11px 25px; पैडिंग-लेफ्ट: 55 पीएक्स; चौड़ाई: 90%; रंग: # 777; बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट; -मोज़-बॉक्स-छाया: 0 1px 3px आरजीबीए (0, 0, 0, 0.1) इनसेट; -webkit- बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट; संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; -वेबकैट-संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; -मोज़-संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; -ओ-संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; # hongkiat-form .txtinput: ध्यान color: # 333; सीमा-रंग: आरजीबीए (41, 92, 161, 0.4); बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट, 0 0 8px rgba (41, 92, 161, 0.6); -मोज़-बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट, 0 0 8px rgba (41, 92, 161, 0.6); रूपरेखा: 0 कोई नहीं; प्रत्येक पाठ तत्व को लक्षित करने के लिए मैंने कक्षा का उपयोग किया है .txtinput. प्रत्येक संक्रमण गुण बॉर्डर, बॉक्स-शैडो और रंग पर काम करते हैं। मैं उपयोग कर रहा हूँ box-sizing: बॉर्डर-बॉक्स; फार्म कंटेनर पर इतना पैडिंग हमारे उत्तरदायी डिजाइन को गड़बड़ नहीं करता है.
मुझे उनकी इन्हीं शैलियों की नकल करनी थी और उन्हें textarea के लिए थोड़ा एडिट करना था। मैंने कुछ पैडिंग और मार्जिन बदल दिए, और एक अद्वितीय पृष्ठभूमि आइकन को जोड़ दिया.
# होंगकीत-रूप बनावट प्रदर्शन: ब्लॉक; फ़ॉन्ट-परिवार: "हेल्वेटिका नीयू", एरियल, सेन्स-सेरिफ़; सीमा-शैली: ठोस; सीमा-चौड़ाई: 1 पीएक्स; सीमा-रंग: # अंडाकार; मार्जिन-बॉटम: 15 पीएक्स; फ़ॉन्ट-आकार: 1.5em; गद्दी: 11px 25px; पैडिंग-लेफ्ट: 55 पीएक्स; चौड़ाई: 90%; ऊंचाई: 180 पीएक्स; रंग: # 777; बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट; -मोज़-बॉक्स-छाया: 0 1px 3px आरजीबीए (0, 0, 0, 0.1) इनसेट; -webkit- बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट; संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; -वेबकैट-संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; -मोज़-संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; -ओ-संक्रमण: सीमा 0.15s रैखिक 0s, बॉक्स-छाया 0.15s रैखिक 0s, रंग 0.15s रैखिक 0s; # होंगकीत-रूप बनावट: ध्यान रंग: # 333; सीमा-रंग: आरजीबीए (41, 92, 161, 0.4); बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट, 0 0 8px rgba (40, 90, 160, 0.6); -मोज़-बॉक्स-छाया: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) इनसेट, 0 0 8px rgba (40, 90, 160, 0.6); रूपरेखा: 0 कोई नहीं; # hongkiat-form textarea.txtblock बैकग्राउंड: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px nopx दोहराएं; साइडबार इनपुट्स रेडियो बटन और चुनिंदा मेनू आइटम को बहुत सरल स्टाइल किया गया है। आप इन तत्वों पर बाहरी चमक प्रभाव और समान बूंद छाया लागू कर सकते हैं, लेकिन यह हमेशा अच्छा नहीं लगता है। वैकल्पिक रूप से डिजाइनर कस्टम उपयोगकर्ता इंटरफ़ेस बनाएंगे और इन्हें पृष्ठभूमि छवियों के रूप में संलग्न करेंगे। लेकिन विकल्प को ठीक से प्रदर्शित करने के लिए इसे jQuery के वर्कअराउंड की आवश्यकता हो सकती है.
स्पैन.रेडिओब्डगे प्रदर्शन: ब्लॉक; मार्जिन-नीचे: 8px; span.radiobadge लेबल फ़ॉन्ट-आकार: 1.2em; पैडिंग-बॉटम: 4 पीएक्स; select.selmenu फ़ॉन्ट-आकार: 17px; रंग: # 676767; गद्दी: 9px; महत्वपूर्ण; बॉर्डर: 1px ठोस #aaa; चौड़ाई: 200px; मैंने इन्हें मुख्य इनपुट तत्वों से दूर करने के लिए बहुत कुछ नहीं किया है। अतिरिक्त पैडिंग बहुत महत्वपूर्ण है ताकि आपके उपयोगकर्ता फॉर्म के साथ बातचीत करने में सहज महसूस करें। जब पाठ सुपर छोटा होता है तो यह केवल प्रत्येक भाग को भरने के लिए संघर्ष हो सकता है। अपने फ़ॉन्ट को बड़ा रखें, लेकिन इतना बड़ा नहीं कि यह पृष्ठ को अभिभूत कर दे.
स्वनिर्धारित बटन रीसेट और सबमिट बटन को अपने स्वयं के वर्ग में डिज़ाइन किया गया है। मैंने अपने फॉर्म फील्ड में ब्लू हाइलाइट्स के साथ अच्छी तरह से मेल खाने के लिए लाइट ग्रेडिएंट का एक सेट बनाया है.
नीचे मानक और होवर स्थिति पर सबमिट बटन के लिए मेरा सीएसएस कोड है.
#buttons #submitbtn प्रदर्शन: ब्लॉक; बाईंओर तैरना; ऊंचाई: 3em; गद्दी: 0 1em; सीमा: 1px ठोस; रूपरेखा: 0; फोंट की मोटाई: बोल्ड; फ़ॉन्ट-आकार: 1.3em; रंग: #fff; पाठ-छाया: 0px 1px 0px # 222; श्वेत-स्थान: Nowrap; शब्द-लपेट: सामान्य; ऊर्ध्वाधर-संरेखित करें: मध्य; कर्सर: सूचक; -मोज़-बॉर्डर-रेडियस: 2 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 2 पीएक्स; सीमा-त्रिज्या: 2 पीएक्स; बॉर्डर-रंग: # 5e890a # 5e890a # 000; -मोज़-बॉक्स-छाया: इनसेट 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: इनसेट 0 1px 0 rgba (256,256,256, .35); -webkit- बॉक्स-छाया: इनसेट 0 1px 0 rgba (256,256,256, .35); बॉक्स-छाया: इनसेट 0 1px 0 rgba (256,256,256, .35); पृष्ठभूमि-रंग: आरजीबी (226,238,175); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, आरजीबी (226,238,175) 3%, आरजीबी (188,216,77) 3%, आरजीबी (144,176,38) 100%); बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट टॉप, लेफ्ट बॉटम, कलर-स्टॉप (3%, rgb (226,238,175)), कलर-स्टॉप (3%, rgb (188,216,77)), कलर-स्टॉप (100 %, rgb (144,176,38))); पृष्ठभूमि-छवि: -webkit- रैखिक-ढाल (शीर्ष, आरजीबी (226,238,175) 3%, आरजीबी (188,216,77) 3%, आरजीबी (144,176,38) 100%); पृष्ठभूमि-छवि: -ओ-लीनियर-ग्रेडिएंट (शीर्ष, आरजीबी (226,238,175) 3%, आरजीबी (188,216,77) 3%, आरजीबी (144,176,38) 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, आरजीबी (226,238,175) 3%, आरजीबी (188,216,77) 3%, आरजीबी (144,176,38) 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, आरजीबी (226,238,175) 3%, आरजीबी (188,216,77) 3%, आरजीबी (144,176,38) 100%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: सक्रिय सीमा-रंग: # 7c9826 # 79898 # 000; रंग: #fff; -मोज़-बॉक्स-छाया: इनसेट 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: इनसेट 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -webkit- बॉक्स-छाया: इनसेट 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); बॉक्स-छाया: इनसेट 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); पृष्ठभूमि: आरजीबी (228,237,189); पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, आरजीबी (228,237,189) 2%, आरजीबी (207,219,120) 3%, आरजीबी (149,175,54) 100%); पृष्ठभूमि: -बेटक-ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-स्टॉप (2%, आरजीबी (228,237,189)), रंग-रोक (3%, आरजीबी (207,219,120)), रंग-बंद (100%, आरजीबी) 149,175,54))); पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, आरजीबी (228,237,189) 2%, आरजीबी (207,219,120) 3%, आरजीबी (149,175,54) 100%); पृष्ठभूमि: -ओ-लीनियर-ग्रेडिएंट (टॉप, आरजीबी (228,237,189) 2%, आरजीबी (207,219,120) 3%, आरजीबी (149,175,54) 100%; पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, आरजीबी (228,237,189) 2%, आरजीबी (207,219,120) 3%, आरजीबी (149,175,54) 100%; पृष्ठभूमि: रैखिक-ढाल (शीर्ष, आरजीबी (228,237,189) 2%, आरजीबी (207,219,120) 3%, आरजीबी (149,175,54) 100%; फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); इस प्रकार के चयनकर्ता को साफ रखना लगभग असंभव है! बस कई संपत्तियां हैं जिन्हें आपको सूचीबद्ध करने और कई पुराने विरासत ब्राउज़रों के समर्थन की आवश्यकता है। इंटरनेट एक्सप्लोरर भी उचित फिल्टर के साथ इन ग्रेडिएंट्स को प्रस्तुत कर सकता है। ध्यान दें कि मैं एक नया बॉर्डर रंग, गोल कोनों और हॉवर पर एक बॉक्स छाया भी शामिल कर रहा हूं.
रीसेट बटन समान दिखता है, लेकिन मैं रंग योजना के साथ पूरी तरह से अलग मार्ग पर चला गया हूं। हल्के भूरे रंग हरे रंग की तुलना में पृष्ठभूमि में गिर जाते हैं। हमारे रीसेट बटन की संभावना बहुत अधिक उपयोग नहीं की जाएगी, इसलिए इसे सभी ध्यान देने की आवश्यकता नहीं है.
# बंटन #resetbtn प्रदर्शन: ब्लॉक; बाईंओर तैरना; रंग: # 515151; पाठ-छाया: -1px 1px 0px #fff; मार्जिन-राइट: 20 पीएक्स; ऊंचाई: 3em; गद्दी: 0 1em; रूपरेखा: 0; फोंट की मोटाई: बोल्ड; फ़ॉन्ट-आकार: 1.3em; श्वेत-स्थान: Nowrap; शब्द-लपेट: सामान्य; ऊर्ध्वाधर-संरेखित करें: मध्य; कर्सर: सूचक; -मोज़-बॉर्डर-रेडियस: 2 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 2 पीएक्स; सीमा-त्रिज्या: 2 पीएक्स; पृष्ठभूमि-रंग: # एफ; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (240,240,240) 2%, आरजीबी (222,222,222) 100%); बैकग्राउंड-इमेज: -webkit-gradient (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-स्टॉप (2%, आरजीबी (255,255,255)), कलर-स्टॉप (2%, आरजीबी (240,240,240)), कलर-स्टॉप (100%, rgb (222,222,222))); पृष्ठभूमि-छवि: -webkit- रैखिक-ढाल (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (240,240,240) 2%, आरजीबी (222,222,222) 100%); पृष्ठभूमि-छवि: -ओ-लीनियर-ग्रेडिएंट (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (240,240,240) 2%, आरजीबी (222,222,222) 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (240,240,240) 2%, आरजीबी (222,222,222) 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (240,240,240) 2%, आरजीबी (222,222,222) 100%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); बॉर्डर: 1px ठोस # 969696; बॉक्स-छाया: 0 1px 2px rgba (144, 144, 144, 0.4); -मोज़-बॉक्स-छाया: 0 1 पीएक्स 2 पीएक्स आरजीबीए (144, 144, 144, 0.4); -webkit- बॉक्स-छाया: 0 1px 2px rgba (144, 144, 144, 0.4); पाठ-छाया: 0 1px 1px आरजीबीए (255, 255, 255, 0.75); #buttons #resetbtn: hover पाठ-छाया: 0 1px 1px rgba (255, 255, 255, 0.75); रंग: # 818181; पृष्ठभूमि-रंग: # एफ; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (244,244,244) 2%, आरजीबी (229,229,229: 100%); बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट टॉप, लेफ्ट बॉटम, कलर-स्टॉप (2%, आरजीबी (255,255,255)), कलर-स्टॉप (2%, आरजीबी (244,244,244)), कलर-स्टॉप (100%) rgb (229,229,229))); पृष्ठभूमि-छवि: -webkit- रैखिक-ढाल (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (244,244,244) 2%, आरजीबी (229,229,229: 100%); पृष्ठभूमि-छवि: -ओ-रैखिक-ढाल (शीर्ष, आरजीबी) 255,255,255) 2%, आरजीबी (244,244,244) 2%, आरजीबी (229,229,229) 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (244,244,244) 2%, आरजीबी (229,229,229) 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, आरजीबी (255,255,255) 2%, आरजीबी (244,244,244) 2%, आरजीबी (229,229,229) 100%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); बॉर्डर-रंग: #Aeaeae; बॉक्स-छाया: इनसेट 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); आप रीसेट प्रकार भी छोड़ सकते हैं और अपने मुख्य सबमिट बटन के रूप में इस सफेद / ग्रे रंग योजना का उपयोग कर सकते हैं। मैं एक ही ढाल शैलियों और ड्रॉप छाया प्रभाव के कई उपयोग किया है, साथ ही आंतरिक लेबल के लिए एक पाठ छाया के साथ। यह निश्चित रूप से उपयोगकर्ता अनुभव को एक अलग भावना प्रदान करता है.
उत्तरदायी लेआउट परिवर्तन मेरी अन्य सीएसएस फ़ाइल में चलते हुए हम सरल उत्तरदायी मीडिया प्रश्नों पर एक नज़र डाल सकते हैं जिन्हें मैंने सेटअप किया है। 800px से ऊपर की कोई भी ब्राउज़र विंडो पूर्ण साइडबार इंटरफ़ेस का अनुभव करेगी। जैसे ही आप इस दहलीज से नीचे आते हैं, बायाँ स्तंभ 100% चौड़ाई तक फैल जाता है और आपको साइडबार के तत्व नीचे गिरते दिखाई देते हैं.
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 800px) शरीर पैडिंग: 10 पीएक्स 15 पीएक्स; #container चौड़ाई: 100%; # hongkiat-form #aligned चौड़ाई: 100%; फ्लोट: कोई नहीं; प्रदर्शन क्षेत्र; # hongkiat-form #aside चौड़ाई: 100%; प्रदर्शन क्षेत्र; फ्लोट: कोई नहीं; # hongkiat-form .txtinput, # hongkiat-form textarea चौड़ाई: 85%; #pieritycase float: left; प्रदर्शन क्षेत्र; #recipientcase float: left; प्रदर्शन क्षेत्र; मार्जिन-राइट: 55px; जैसा कि हम आकार में करीब आते हैं, मैं प्रत्येक इनपुट रूपों को अनुकूलित करने का प्रयास करता हूं। चौड़ाई की संपत्ति वेबपेज की तुलना में लंबे समय तक समाप्त हो सकती है और फिर हमारे पास किनारे पर चिपके हुए इनपुट फॉर्म होते हैं। यह लगभग 550px होता है, जहां मैं अगली क्वेरी को तोड़ता हूं, साथ ही पोर्ट्रेट और लैंडस्केप के लिए iPhone स्क्रीन डिस्प्ले रिज़ॉल्यूशन दोनों.
/ * छोटी स्क्रीन ड्रॉपऑफ़ ******* / @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 550px) # hongatat-form .txtinput, # hongkiat-form textarea चौड़ाई: 80%; / * iPhone लैंडस्केप ******** / @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 480px) शरीर गद्दी: 10px 0px; select.selmenu चौड़ाई: 190px; / * iPhone पोर्ट्रेट ******* / @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 320px) शरीर पैडिंग: 10 पीएक्स 2 पीएक्स; # hongkiat-form .txtinput, # hongkiat-form textarea चौड़ाई: 70%; # hongkiat-form #aligned अतिप्रवाह: छिपा हुआ; select.selmenu चौड़ाई: 160px; #recipientcase मार्जिन-राइट: 30px; क्षैतिज परिदृश्य मोड अभी भी सब कुछ बहुत अच्छी तरह से एक साथ रखता है। मैंने केवल रेडियो बटन के लिए जगह बनाने के लिए ड्रॉपडाउन चयन मेनू को थोड़ा पतला किया है। पोर्ट्रेट दृश्य में, मैंने सभी तत्वों को बहुत छोटी चौड़ाई में बदल दिया है। अब हमारा कोड रिसाइज़्ड ब्राउज़र विंडो में भी नहीं टूटेगा। लेकिन आईओएस / एंड्रॉइड स्मार्टफोन के लिए भी समर्थन करना अच्छा है.
डेमो स्रोत कोड डाउनलोड करें निष्कर्ष मुझे उम्मीद है कि इस ट्यूटोरियल में यह समझाने में जानकारीपूर्ण है कि आपके वेबफॉर्म पर कितना काम किया जा सकता है। नई CSS3 गुण कोड की कुछ पंक्तियों के साथ पूरी तरह से काम करने वाले एनिमेशन बनाने के लिए पर्याप्त शक्तिशाली हैं। यह वास्तव में एक रोमांचक समय है वेब विकास में काम करने और इन प्रवृत्तियों का पालन करने का.
यदि आपके पास ट्यूटोरियल कोड पर विचार या सुझाव हैं, तो नीचे टिप्पणी बॉक्स के माध्यम से उन्हें हमारे साथ साझा करने के लिए स्वतंत्र महसूस करें.
