यदि त्यहाँ कुनै प्रकारको वेबसाइट जुन कुनै पनि प्रकारको लागि प्राय: धेरै सामान्य हुन्छ भने यी फारमहरू हुन्। फारमहरू जुन हामी सम्पर्क जानकारी भर्न प्रयोग गर्दछौं। बैंक विवरण प्रविष्ट गर्नुहोस्, सामाजिक नेटवर्कमा लग इन गर्नुहोस् वा साधारणतया हामीले गुगल खोजी ईन्जिनमा दैनिक प्रयोग गर्ने जस्तो खोजी कार्य गर्नुहोस्।
त्यसैले आज हामी तपाईंलाई देखाउन जाँदैछौं CSS मा forms० फारमहरू सम्पर्क फारमहरू बाट, क्रेडिट कार्ड चेकआउटहरू, लगइनहरू, सरल, सदस्यता वा वैधता। विषयलाई ध्यान नदिई, तपाइँको वेबसाइटलाई त्यो विशेष बिन्दु दिन महान भव्यता र शैलीका प्रकारहरूको श्रृंखला।
अनुक्रमणिका
- 1 न्यूनतम सम्पर्क फारम
- 2 न्यूनतम फाराम
- 3 पुरानो सम्पर्क फारम
- 4 पत्र सम्पर्क फारम
- 5 विस्तारित सम्पर्क फारम
- 6 सम्पर्क फारम UI
- 7 भुक्तान कार्ड चेकआउट
- 8 क्रेडिट कार्ड फ्लैट डिजाइन
- 9 क्रेडिट कार्ड UI
- 10 प्रतिक्रिया जाँच गर्नुहोस्
- 11 चेकआउट भुक्तान कार्ड
- 12 क्रेडिट कार्ड भुक्तान
- 13 क्रेडिट कार्ड
- 14 चरण बाट कदम फारम
- 15 अन्तर्क्रियात्मक फारम
- 16 चरण बाट कदम फारम
- 17 चरण द्वारा चरण
- 18 बहु चरण Jquery फारम
- 19 UI एनिमेसन फारम
- 20 खाता सिर्जना / लगइन फारम
- 21 साँप हाइलाइट
- 22 लगइन स्क्रिन
- 23 UI डिजाइन लगइन गर्नुहोस्
- 24 लगईन र UI खाता सिर्जना
- 25 अपमानजनक त्रुटिहरू
- 26 CSS CSS लगइन गर्नुहोस्
- 27 मोडल लगइन फारम
- 28 फारम फक्सबक्स
- 29 एनिमेटेड बक्स
- 30 खोजी क्षेत्र
- 31 साधारण खोज क्षेत्र क्लिक गर्नुहोस्
- 32 CSS पाठ इनपुट प्रभाव
- 33 पूर्ण स्क्रीन खोजी
- 34 खोजी गर्नुहोस्
- 35 कुनै प्रश्न छैन
- 36 पपअप सदस्यता फारम
- 37 सदस्यता बक्स UI
- 38 CSS सदस्यता बक्स
- 39 सदस्यता बक्स
- 40 EMOJI प्रमाणीकरण फारम
न्यूनतम सम्पर्क फारम
एक संग साधारण सम्पर्क फारम प्रभाव को महान विविधता जस्तै फ्लोटिंग मार्कहरू वा लाइन एनिमेसनहरू। जाभास्क्रिप्टको एक बिटको साथ सुरुचिपूर्ण CSS कोड। यदि तपाईं खोज्दै हुनुहुन्छ न्यूनतम सम्पर्क फारम यो तपाईका लागि उत्तम छ।
न्यूनतम फाराम
अन्य न्यूनतम फारम, जे होस् CSS मा मात्र हुन a सरल र उच्च प्रभाव फाराम। यससँग अघिल्लोको न्यूनतम एनिमेसन छैन, तर यसले आफ्नो उद्देश्य राम्रोसँग पूरा गर्दछ।
पुरानो सम्पर्क फारम
पुरानो सम्पर्क फारम, एक धेरै सुरुचिपूर्ण डिजाइन। ती वेबसाईटहरूको लागि उत्तरदायी मोबाइलबाट देखिन, यद्यपि यसले मान्यकरण समावेश गर्दैन।
पत्र सम्पर्क फारम
Este सम्पर्क फारम बरु एक जिज्ञासु एनिमेसन छ: चिट्ठी गठन हुन्छ। सरल, तर धेरै रंगको साथ धेरै उपयोगी।
विस्तारित सम्पर्क फारम
Este सम्पर्क सम्पर्क विस्तार गरियो यो केवल फ्रन्ट एन्ड हो र यससँग छ jQuery को साथ मान्यकरण। हामी फ्लोटिंग बटनमा क्लिक गर्दछौं र फारम एनिमेसनको साथ देखा पर्नेछ। थोरै
सम्पर्क फारम UI
सम्पर्क फारम UI यो HTML र CSS मा बनेको फारम हो। यो अस्तित्व को लागि बाहिर खडा एक साधारण सम्पर्क कार्ड हामी भर्न सक्छौं ताकि केवल क्लिक फिल्ड परिवर्तन भयो जब यो क्लिक गरिन्छ।
भुक्तान कार्ड चेकआउट
Un भुक्तान कार्ड चेकआउट HTML, CSS र जाभास्क्रिप्टमा बनेको जुन घुमाउने एनिमेसन द्वारा भिन्न क्रेडिट कार्ड जब हामी CVC वा सुरक्षा नम्बर क्षेत्र मा थिच्दछौं।
क्रेडिट कार्ड फ्लैट डिजाइन
शुद्ध CSS को लागि को लागी चेकआउट फ्ल्याट रंगहरूमा क्रेडिट कार्डहरू। रंगीन र धेरै सरल जुन गुणस्तर र व्यावसायिकता दर्शाउन सक्षम छ।
क्रेडिट कार्ड UI
HTML, CSS र जाभास्क्रिप्टमा अर्को क्रेडिट कार्ड जुन यो कत्तिको राम्रो छ भनेर बाहिर खडा छ समग्र डिजाइन छनौट गरियो। हामी तपाईंको वेबसाइटको लागि कोडको यस टुक्रामा एनिमेसनहरू बिर्स्यौं। यो लिंकमा डाउनलोड गर्नुहोस्.
प्रतिक्रिया जाँच गर्नुहोस्
प्रतिक्रिया जाँच गर्नुहोस्, React.js को साथ बनेको, द्वारा छुट्याइएको छ साइड चित्र हामी अनुकूलित गर्न सक्छौं सेवाहरू वा उत्पादनहरू जुन हामी हाम्रो इ-कमर्समा बेच्छौं।
चेकआउट भुक्तान कार्ड
यस चेकआउट कार्डमा छवि राख्ने सम्भावनाको बाहिर खडा हुन्छ। A CSS3, HTML5 को साथ बनेको सरल र स्पष्ट फारम र jQuery को एक बिट। उच्च गुणवत्ता र यस सूचीको बाँकी चेकआउट भन्दा फरक छ। तपाईं डाउनलोड गर्न सक्नुहुन्छ यहाँ यो भुक्तान कार्ड चेकआउट।
क्रेडिट कार्ड भुक्तान
Este क्रेडिट कार्ड भुक्तानको लागि फारम सँग अभ्यास गर्न प्रोग्राम गरिएको छ DOM हेराफेरीका लागि जाभास्क्रिप्ट। तपाईं स्ट्रिपको सुरुचिपूर्ण कोड डिजाइनमा सम्झन सक्नुहुन्छ, डिजिटल बैंकिंग सेवा जुन पेपैलको नजिक छ।
क्रेडिट कार्ड
एक सुरुचिपूर्ण कार्ड भुक्तानको लागि चेकआउट अरूबाट फरक र आधारित छ एक क्रेडिट कार्ड शीर्ष मा अवस्थित छ त्यसोभए तल हामीसँग पूर्ण डेटा फार्म छन् जुन इकमर्समा भुक्तानी गर्नको लागि ग्राहकले भर्नुपर्दछ।
चरण बाट कदम फारम
Un चरण-द्वारा-चरण फाराम HTML, CSS र जाभास्क्रिप्टमा गरिएको दर्ताका लागि। प्रत्येक बिन्दुको लागि चार चरणहरू बाँया पट्टि अवस्थित उच्च समाप्त फर्मको लागि राम्रो समाप्त एनिमेसनहरू। अत्यधिक सिफारिश गरिएको।
अन्तर्क्रियात्मक फारम
Un अन्तर्क्रियात्मक फारम बहु-चरण HTML, CSS र जाभास्क्रिप्टको साथ बनाईएको। यो प्रत्येक चरणको बीचमा ट्रान्जिसन एनिमेसनको लागि बाहिर खडा हुन्छ। योसँग एक सुरुचिपूर्ण टच छ जुन ध्यान नदिने छैन।
चरण बाट कदम फारम
Este चरण-द्वारा-चरण फाराम धेरै रचनात्मक हुनु को अर्थ हो। तपाईं प्रश्नहरूको उत्तर दिनुहुन्छ ताकि तपाईं कुनै पनि समय पर्दामा दृश्यात्मक उपस्थित भएर कुनै पनि समय गर्न सक्नुहुन्छ।
चरण द्वारा चरण
चरण-द्वारा चरण पूरा भयो HTML, CSS र जाभास्क्रिप्टमा। यो प्रत्येक चरणको बीचमा ट्रान्जिसन एनिमेसन द्वारा विशेषता हो।
बहु चरण Jquery फारम
यदि तपाईंसँग छ धेरै लामो फारमयो एकदम उल्लेखनीय प्रगति पट्टीको साथ बिभिन्न सेक्सनहरूको लागि उत्तम छ। JQuery र CSS मा आधारित, यो यसको डिजाइन र यसको ठूलो भव्यताको लागि बाहिर खडा छ।
UI एनिमेसन फारम
यसको संक्रमण UI एनिमेसन फारम तिनीहरू हुन् डोमिंक मार्स्क्युजिकमा आधारित। निलोमा बाकसको रचनात्मक प्रभावमा ध्यान दिनुहोस् जब हामी लगइन वा लगइनका दुई क्षेत्रहरू मध्ये केही क्लिक गर्दछौं।
खाता सिर्जना / लगइन फारम
एउटा नौटंकी लगईन गर्नुहोस् र खाता सिर्जना गर्नुहोस् जुन एनिमेसनमा आधारित छ ती दुई वर्ग बीच के हुन्छ। धेरै हालको र उल्लेखनीय उपस्थिति HTML, जाभास्क्रिप्ट र CSS मा गरिनु पर्छ।
साँप हाइलाइट
साँप हाइलाइट कुनै पनि सूचीको सब भन्दा उल्लेखनीय लगईन हो सुरुचिपूर्ण एनिमेसन को लागी खडा छ त्यो छिटो देखिन्छ जुन हामी दुई क्षेत्रहरु मध्ये एकमा क्लिक गर्छौं।
लगइन स्क्रिन
Divine यस डिजाइन लगइन स्क्रिन त्यस्तै हो उनीहरूको एनिमेसनहरू र यो कसरी रचनात्मक छ। यदि तपाइँ सबैभन्दा भर्खर हुन चाहानुहुन्छ जब यो वेब डिजाइनको कुरा आउँछ, यो फारम हराइरहेको हुन सक्दैन। अपरिहार्य।
UI डिजाइन लगइन गर्नुहोस्
HTML, Sass, र jQuery को प्रयोग गरेर डिजाइन गरीएको। UI डिजाइन लगइन गर्नुहोस् es eस्पष्ट र स्पष्ट सूचीमा मनपर्नेहरू बन्न सूक्ष्म एनिमेसनहरूको अभाव नभएको विषयमा।
लगईन र UI खाता सिर्जना
एक विशेष लगइन डिजाइन र खाता सिर्जना UI र colorsहरू र प्रस्तुत गर्नका लागि एउटा ठूलो कार्ड दुई खण्डहरू। कार्यान्वयनको सबैभन्दा सुन्दर को अर्को जुन हामी मिस गर्न सक्दैनौं। HTML, CSS र जाभास्क्रिप्टमा बनाइएको।
अपमानजनक त्रुटिहरू
अपमानजनक त्रुटिहरू यो एनिमेसन को कारण एक महान लग इन छ obnoxious.css को साथ क्षेत्रहरू। मौलिक एक रमाईलो, लापरवाह र धेरै फरक लगईन हुन। हाम्रो वेबसाइट को लागी कुनै श doubt्का बिना मूल।
CSS CSS लगइन गर्नुहोस्
एक जिज्ञासु लगईन बिभिन्न आईकनहरु द्वारा हामी जहाँ चाहन्छौं त्यहाँ आगन्तुक लिनका लागि प्रत्येक फाँटहरू देखाउँदछ। रंगहरूमा छनौट गरिएको शेडहरू पनि बाहिर देखिन्छन्। योसँग कुनै एनिमेसन छैन। यो HTML र CSS मा ग्राहक वा हाम्रो आफ्नै वेबसाइटमा यसलाई लागू गर्नका लागि बनेको हो।
मोडल लगइन फारम
Este मोडल लगइन फारम को भाषाबाट प्रेरित छ मटेरियल डिजाइनका लागि परिचित डिजाइन। हामीले यसलाई धेरै अनुप्रयोगहरूमा मोबाइल उपकरणहरूमा देख्यौं। यस कोडमा हामीसँग लगइन प्यानल र एउटा दर्ता प्यानल छ जुन पूर्वनिर्धारितद्वारा लुकाइएको छ। पंजीकरण प्यानल दायाँ पट्टीको नीलो स्तम्भमा क्लिक गरेर सक्रिय गर्न सकिन्छ। योसँग एक विशेष एनिमेसन छ एउटा धेरै विशेष र हड्ताल लगईन।
फारम फक्सबक्स
हामी यसको साथ खोजी फारामहरू सुरू गर्दछौं फारम फ्लेक्सबक्समा आधारित। यो «खोज of को रातो र forको लागि बाहिर खडा हुन्छ र तपाईंको वेबसाइटको लागि रमणीय खोजी क्षेत्रको लागि थोरै बढीका लागि।
एनिमेटेड बक्स
यससँग एनिमेटेड बक्स म्याग्निफाइ। ग्लास आइकनमा क्लिक गर्नुहोस् र एक चम्किलो निलो एनिमेसन देखा पर्नेछ ताकि हामीले केवल खोजी टाइप गर्नुपर्नेछ जुन हामी वेबसाइटमा बाहिर लैजान्छौं। HTML, CSS र जाभास्क्रिप्टको साथ बनाईएको।
खोजी क्षेत्र
una ठूलो लाइन पर्दा भरि चलाउँछ ताकि जब हामी यसलाई थिच्दछौं खोजी खोजी सुरु गर्छौं। यसलाई परिभाषित गर्न एक पिकअप बटन साधारण खोज फाराम.
साधारण खोज क्षेत्र क्लिक गर्नुहोस्
साधारण खोज क्षेत्र क्लिक गर्नुहोस् मा देखेको अन्तर्क्रियामा आधारित छ Waze ड्राइभर समुदाय अनुप्रयोग सवारी सबै आईकन र छविहरू CSS का साथ बनेका छन्। यो ती आईकनहरूको लागि बाहिर खडा हुन्छ जसले हामीलाई उत्पादन वा सेवाको लागि विशेष खोजीहरू गर्न अनुमति दिन्छ। धेरै कत्ति राम्रो छ को कारण स्ट्राइकि।।
CSS पाठ इनपुट प्रभाव
CSS पाठ इनपुट प्रभाव को श्रृंखला समावेश गर्दछ पाठ र खोज ड्रयरमा एनिमेसनहरू फारममा सावधान खोजीकर्ता हुन।
पूर्ण स्क्रीन खोजी
यस प्रविष्टि बाट पूर्ण स्क्रीन खोजी यो लेआउट वा स्थिति को कुनै पनि प्रकार संग काम गर्दछ। शैलीहरू आवश्यक छ कन्टेनर-विशेष र खोजी-ओभरले तत्व मूल मा स्थित हुन। यो एक खोज एनिमेसन द्वारा विशेषता हो जब हामी खोजी बटन थिच्दछौं।
खोजी गर्नुहोस्
Un खोज फारम त्यो सरल ऊ बिभिन्न स्थानहरु संग खेल्न मन पर्छ र एनिमेसनहरू। हामी खोज बटनमा क्लिक गर्छौं र शब्दहरू टाइप गर्न पूरा ड्रअर देखिन्छ। धेरै सरल र अत्यधिक सरलको लागि सिफारिश गरिएको।
कुनै प्रश्न छैन
कुनै प्रश्न छैन es पाठ क्षेत्रको साथ सरल फारम र प्रयोगकर्ताहरूको चयन गर्नका लागि केही उत्तरहरू चयन गर्न विकल्प। उत्तम सम्झौता भिजुअली सर्वश्रेष्ठ मध्ये एक हुन।
पपअप सदस्यता फारम
यससँग पपअप सदस्यता फारम, हामी फ्लोटिंग बटनमा क्लिक गर्दछौं र यसले हामीलाई लग्नेछ एक धेरै हास्यास्पद टोनको साथ फारम र एक क्षेत्र जहाँ ईमेल प्रविष्ट गर्न को लागी। ईमेल मार्केटिंगका लागि उत्तम।
सदस्यता बक्स UI
una सदस्यता बक्स एक अलार्म घंटी संग र फ्ल्याट र than्ग भन्दा थोरै डिजाईनमा।
CSS सदस्यता बक्स
una स्मार्ट सदस्यता बक्स को तथ्य को लागी ढाँचा प्रयोग गर्नुहोस् सदस्यता बटनको लागि फिल्डको बैजनी र like जस्तै।
सदस्यता बक्स
una साधारण सदस्यता बक्स तर डिजाइनबाट ठूलो प्रभावको।
EMOJI प्रमाणीकरण फारम
शुद्ध CSS यो प्रमाणीकरण फारम कुञ्जी सिर्जना गर्न वा पासवर्ड। जस्तो हामी लेख्छौं, इमोजी फारमको सुरक्षा स्तर मापन गर्नेछ। कुनै श doubt्का बिना हास्यास्पद र जिज्ञासु।
यो नबिर्सनुहोस् CSS मा २ anima एनिमेटेड तीरहरूको सूची.
२ टिप्पणीहरू, तपाइँको छोड्नुहोस्
यहाँ प्रस्तुत उदाहरणको उत्कृष्ट नमूना। विविधता र विभिन्न प्रस to्गमा अनुकूलन र सबै भन्दा राम्रो कुरा यो छ कि प्रत्येक शीर्षकको लिंकमा डेमो र स्रोत कोड समावेश छ यद्यपि तपाईंले यसलाई एक बटनको साथ हाइलाइट गर्नुपर्नेछ «हेर्नुहोस् डेमो cur किनकि यो जिज्ञासा भन्दा बाहिरको थियो जुन मैले शीर्षकमा फेला पारेँ। । योगदानको लागि धन्यवाद। काराकासबाट अभिवादन।
यसले मलाई धेरै मद्दत गर्यो, धन्यवाद।