कोणत्याही प्रकारच्या वेबसाइटमध्ये सामान्यत: सामान्य गोष्ट असल्यास असे प्रकार आहेत. आम्ही संपर्क माहिती भरण्यासाठी वापरत असलेले फॉर्म, बँक तपशील प्रविष्ट करा, सोशल नेटवर्कवर लॉग इन करा किंवा आम्ही सामान्यत: गुगल सर्च इंजिनमध्ये दररोज करतो त्याप्रमाणे एखादे शोध करा.
तर आज आम्ही तुम्हाला दाखवणार आहोत सीएसएस मध्ये 40 फॉर्म संपर्क फॉर्म, क्रेडिट कार्ड चेकआउट, लॉगिन, साधे, सदस्यता किंवा अगदी वैधतेपासून. थीमची पर्वा न करता आपल्या वेबसाइटवर हा खास मुद्दा सांगण्यासाठी उत्कृष्ट लालित्य आणि शैलीच्या प्रकारांची मालिका.
किमान संपर्क फॉर्म
सह एक सोपा संपर्क फॉर्म प्रभाव महान विविधता जसे की फ्लोटिंग मार्क्स किंवा लाइन अ‍ॅनिमेशन. थोडा जावास्क्रिप्टसह मोहक सीएसएस कोड. आपण शोधत असाल तर किमान संपर्क फॉर्म हे आपल्यासाठी योग्य आहे.
किमान स्वरूप
इतर किमान फॉर्मजरी, फक्त सीएसएसमध्ये एक असेल साधे आणि उच्च-प्रभाव फॉर्म. त्यामध्ये आधीचे मिनिमलिस्ट अ‍ॅनिमेशन नाहीत, परंतु हे त्याचे उद्दीष्ट चांगले पार पाडते.
व्हिंटेज संपर्क फॉर्म
व्हिंटेज संपर्क फॉर्म, एक अतिशय मोहक डिझाइन. त्या वेबसाइट्ससाठी प्रतिसाद मोबाईल वरून पाहिले जाणेजरी यात वैधता समाविष्ट नाही.
पत्र संपर्क फॉर्म
Este संपर्क फॉर्म त्याऐवजी एक उत्सुक अ‍ॅनिमेशन आहे: एक पत्र तयार केले जाते. साध्या, परंतु भरपूर रंगांसह उपयुक्त.
विस्तारित संपर्क फॉर्म
Este विस्तारित संपर्क फॉर्म हे फक्त समोर टोक आहे आणि आहे jQuery सह प्रमाणीकरण. आम्ही फ्लोटिंग बटणावर क्लिक केले आणि एक दोलायमान अ‍ॅनिमेशनसह फॉर्म दिसेल. थकबाकी.
संपर्क फॉर्म यूआय
संपर्क फॉर्म यूआय हा HTML आणि CSS मध्ये बनलेला एक फॉर्म आहे. हे अस्तित्त्वात आहे एक साधा संपर्क कार्ड जे आम्ही भरू शकतो जेणेकरून ते क्लिक केले की केवळ मजकूर फील्ड बदलते.
पेमेंट कार्ड चेकआउट
Un पेमेंट कार्ड चेकआउट एचटीएमएल, सीएसएस आणि जावास्क्रिप्टमध्ये बनविलेले जे अ‍ॅनिमेशन फिरवून वेगळे आम्ही सीव्हीसी किंवा सुरक्षा क्रमांक फील्डवर दाबल्यावर क्रेडिट कार्ड.
क्रेडिट कार्ड फ्लॅट डिझाइन
साठी शुद्ध सीएसएस साठी चेकआउट फ्लॅट रंगात क्रेडिट कार्ड. रंगीबेरंगी आणि अगदी सोपी जी गुणवत्ता आणि व्यावसायिकता दर्शविण्यास सक्षम आहे.
क्रेडिट कार्ड यूआय
एचटीएमएल, सीएसएस आणि जावास्क्रिप्टमधील आणखी एक क्रेडिट कार्ड जे ते किती चांगले आहे हे दर्शविते एकूणच डिझाइन निवडले. आम्ही आपल्या वेबसाइटसाठी कोडच्या या तुकड्यातील अ‍ॅनिमेशनबद्दल विसरलो. या लिंकवर डाउनलोड करा.
प्रतिक्रिया चेकआऊट
प्रतिक्रिया चेकआऊट, React.js सह बनविलेले, द्वारे ओळखले जाते आम्ही सानुकूलित करू शकतो साइड चित्र आमच्या ईकॉमर्समध्ये आम्ही विक्री केलेल्या सेवा किंवा उत्पादनांसह.
चेकआउट पेमेंट कार्ड
हे चेकआउट कार्डवर प्रतिमा ठेवण्याची शक्यता दर्शवितो. ए सीएसएस 3, एचटीएमएल 5 सह बनविलेले साधे आणि स्पष्ट फॉर्म आणि थोडा jQuery. या सूचीतील उर्वरित चेकआउटपेक्षा उच्च दर्जाची आणि भिन्न आहे. आपण डाउनलोड करू शकता येथे या पेमेंट कार्ड चेकआउट.
क्रेडिट कार्ड पेमेंट
Este क्रेडिट कार्ड पेमेंट फॉर्म सह सराव करण्यासाठी प्रोग्राम केलेला आहे डीओएम हाताळणीसाठी जावास्क्रिप्ट. आपण डिझाइनमध्ये स्ट्रिपचा मोहक कोड, पेपल जवळ येऊ शकणारी डिजिटल बँकिंग सेवा आठवू शकता.
क्रेडीट कार्ड
एक मोहक कार्ड पेमेंटसाठी चेकआऊट इतरांपेक्षा भिन्न आणि आधारित शीर्षस्थानी असलेले क्रेडिट कार्ड तर मग खाली आमच्याकडे ईकॉमर्समध्ये देय देण्यासाठी क्लायंटला भरावे लागणार्‍या भिन्न डेटासह संपूर्ण फॉर्म आहे.
स्टेप बाय स्टेप फॉर्म
Un स्टेप बाय स्टेप फॉर्म एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट मध्ये नोंदणीसाठी. प्रत्येक बिंदूसाठी चार चरण डाव्या बाजूला स्थित. अत्यंत तयार झालेल्या फॉर्मसाठी चांगले तयार अ‍ॅनिमेशन. अत्यंत शिफारसीय
परस्परसंवादी फॉर्म
Un परस्परसंवादी फॉर्म एचटीएमएल, सीएसएस आणि जावास्क्रिप्टसह केलेले बहु-चरण. हे प्रत्येक चरणांमधील संक्रमण अ‍ॅनिमेशनसाठी दर्शविते. यास एक मोहक स्पर्श आहे ज्याकडे कोणाचेही लक्ष जाणार नाही.
स्टेप बाय स्टेप फॉर्म
Este स्टेप बाय स्टेप फॉर्म बर्‍यापैकी सर्जनशील आहे. आपण प्रश्नांची उत्तरे द्याल जेणेकरून आपण कधीही स्क्रीनवर दृश्यास्पद उपस्थित राहून कोणत्याही वेळी त्यांच्याकडे परत येऊ शकता.
चरणानुसार चरण
स्टेप बाय स्टेप फॉर्म पूर्ण झाले एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट मध्ये. हे प्रत्येक चरणांमधील संक्रमण अ‍ॅनिमेशन द्वारे दर्शविले जाते.
मल्टी स्टेप जेक्वेरी फॉर्म
आपल्याकडे असल्यास खूप लांब फॉर्म, हे अत्यंत उल्लेखनीय प्रगती पट्टी असलेल्या वेगवेगळ्या विभागांसाठी योग्य आहे. JQuery आणि CSS वर आधारीत, ते त्याच्या डिझाइनसाठी आणि उत्कृष्ट अभिजाततेसाठी स्पष्ट करते.
UI अ‍ॅनिमेशन फॉर्म
या संक्रमणे UI अ‍ॅनिमेशन फॉर्म ते आहेत डोमिंक मार्स्क्यूझिकवर आधारित. जेव्हा आम्ही दोन लॉगिन फील्डवर क्लिक करतो तेव्हा निळ्या बॉक्सच्या सर्जनशील प्रभावाकडे लक्ष देते.
खाते तयार करणे / लॉगिन फॉर्म
एक नौटंकी लॉगिन आणि खाते तयार करणे जे अ‍ॅनिमेशनवर आधारित आहे त्या दोन विभागांमध्ये काय होते. एचटीएमएल, जावास्क्रिप्ट आणि सीएसएस मध्ये केले जाण्यासाठी खूपच सद्य आणि उल्लेखनीय उपस्थिती.
साप हायलाइट
साप हायलाइट कोणत्याही यादीतील सर्वात उल्लेखनीय लॉगिन आहे मोहक अ‍ॅनिमेशनचा अर्थ आहे आम्ही ज्या दोन क्षेत्रांपैकी एकावर क्लिक करतो त्याच क्षणी ते लवकर दिसून येते.
लॉगिन स्क्रीन
हे डिझाइन दैवी लॉगिन स्क्रीन त्यांच्या आहेत अ‍ॅनिमेशन आणि ते किती सर्जनशील आहे. आपण वेब डिझाइनचा विचार करता सर्वात वर्तमान होऊ इच्छित असल्यास, हा फॉर्म गहाळ होऊ शकत नाही. अपरिहार्य.
लॉग इन यूआय डिझाइन
एचटीएमएल, सस आणि जेक्यूरी वापरून डिझाइन केलेले. लॉग इन यूआय डिझाइन es eसुस्पष्ट आणि स्पष्ट त्या विषयावर ज्या सूचीमध्ये आणखी एक आवडते होण्यासाठी सूक्ष्म अ‍ॅनिमेशनची कमतरता नाही.
लॉगिन आणि UI खाते तयार करणे
एक विशेष लॉगइन डिझाइन आणि खाते तयार करणे UI रंग आणि सादर करण्यासाठी एक मोठे कार्ड दोन विभाग. अंमलबजावणीतील आणखी एक सुंदर गोष्ट जी आपण गमावू शकत नाही. एचटीएमएल, सीएसएस आणि जावास्क्रिप्टमध्ये बनविलेले.
चुकीच्या चुका
चुकीच्या चुका च्या अ‍ॅनिमेशनमुळे हे एक छान लॉगिन आहे obnoxious.css सह फील्ड. मूळ एक मजेदार, सावध आणि अगदी भिन्न लॉगिन. आमच्या वेबसाइटवर कोणत्याही शंकाशिवाय मूळ.
सीएसएस एचटीएमएल लॉगिन करा
एक जिज्ञासू लॉगिन वेगवेगळ्या चिन्हांद्वारे आम्हाला पाहिजे तेथे अभ्यागत घेण्यास प्रत्येक फील्ड दर्शवते. रंगांमध्ये निवडलेल्या शेड्स देखील बाहेर उभे असतात. यात कोणतेही अ‍ॅनिमेशन नाही. हे एचटीएमएल आणि सीएसएसमध्ये क्लायंट किंवा आमच्या स्वतःच्या वेबसाइटवर लागू करण्यासाठी केले गेले आहे.
मॉडेल लॉगिन फॉर्म
Este मॉडेल लॉगिन फॉर्म च्या भाषेद्वारे प्रेरित आहे मटेरियल डिझाइनसाठी ओळखले जाणारे डिझाइन. आम्ही हे मोबाइल डिव्हाइसवरील बर्‍याच अनुप्रयोगांमध्ये पाहिले आहे. या कोडमध्ये आमच्याकडे लॉगिन पॅनेल आहे आणि डीफॉल्टनुसार लपविलेले नोंदणी पॅनेल आहे. उजव्या बाजूला असलेल्या निळ्या कॉलमवर क्लिक करून नोंदणी पॅनेल सक्रिय केले जाऊ शकते. त्यात एक खास अ‍ॅनिमेशन आहे जे खूप खास आणि उल्लेखनीय लॉगिन आहे.
फॉर्म फ्लेक्सबॉक्स
आम्ही यासह शोध फॉर्म प्रारंभ करतो फॉर्म फ्लेक्सबॉक्सवर आधारित. हे «शोध» च्या लाल रंगासाठी आणि आपल्या वेबसाइटसाठी मोहक शोध फील्डसाठी थोडे अधिक आहे.
अ‍ॅनिमेटेड बॉक्स
यासह अ‍ॅनिमेटेड बॉक्स भिंगकाच्या चिन्हावर क्लिक करा आणि एक चमकदार निळा अ‍ॅनिमेशन दिसेल जेणेकरून आम्ही केवळ वेबसाइटवर शोधत आहोत. एचटीएमएल, सीएसएस आणि जावास्क्रिप्टसह बनलेले.
शोध फील्ड
una मोठी ओळ पडद्यावर धावते जेणेकरून जेव्हा आम्ही ते दाबतो तेव्हा आपण शोध टाइप करण्यास सुरवात करतो. हे परिभाषित करण्यासाठी पिकअप बटण सोपा शोध फॉर्म.
साधे शोध फील्ड वर क्लिक करा
साधे शोध फील्ड वर क्लिक करा मध्ये पाहिलेल्या संवादावर आधारित आहे Waze ड्राइव्हर समुदाय अनुप्रयोग वाहने सर्व चिन्हे आणि प्रतिमा सीएसएस सह बनविलेल्या आहेत. हे त्या चिन्हांसाठी स्पष्ट आहे जे आम्हाला उत्पादन किंवा सेवेसाठी विशिष्ट शोध घेण्याची परवानगी देतात. किती मस्त आहे याचा जोरदार धक्का बसला आहे.
सीएसएस मजकूर इनपुट प्रभाव
सीएसएस मजकूर इनपुट प्रभाव च्या मालिकेचा समावेश आहे मजकूर आणि शोध ड्रॉवरमधील अ‍ॅनिमेशन फॉर्म मध्ये काळजीपूर्वक साधक होण्यासाठी.
पूर्ण स्क्रीन शोध
कडून ही नोंद पूर्ण स्क्रीन शोध हे कोणत्याही प्रकारच्या लेआउट किंवा स्थानासह कार्य करते. शैली आवश्यक कंटेनर-विशिष्ट आणि शोध-आच्छादन घटक रूट मध्ये स्थित करणे. आम्ही शोध बटण दाबल्याच्या क्षणी त्यास बाउन्सिंग अ‍ॅनिमेशन द्वारे दर्शविले जाते.
Búsqueda
Un शोध फॉर्म सोपे आहे की त्याला वेगवेगळ्या पदांवर खेळायला आवडते आणि अ‍ॅनिमेशन. आम्ही शोध बटणावर क्लिक करतो आणि शब्द ड्रॉप करताना संपूर्ण ड्रॉवर दिसते. हे किती सोपे आहे यासाठी खूपच सद्य आणि अत्यंत शिफारस केलेले.
प्रश्न नाही
प्रश्न नाही es मजकूर फील्डसह सोपा फॉर्म आणि वापरकर्त्याने त्यांची उत्तरे निवडण्यासाठी काही उत्तरे निवडण्याचा पर्याय. दृष्टीने सर्वोत्कृष्ट होण्यासाठी उत्तम दृष्टीक्षेप.
पॉपअप सदस्यता फॉर्म
यासह पॉपअप सदस्यता फॉर्म, आम्ही फ्लोटिंग बटणावर क्लिक करा आणि ते आपल्याकडे घेऊन जाईल अतिशय मजेदार टोनसह फॉर्म आणि ईमेल प्रविष्ट करायचा असे एक फील्ड ईमेल विपणनासाठी योग्य.
सदस्यता बॉक्स UI
una सदस्यता बॉक्स गजर घंटा सह आणि सपाट रंगांपेक्षा थोडे अधिक डिझाइनमध्ये.
सीएसएस सदस्यता बॉक्स
una स्मार्ट सबस्क्रिप्शन बॉक्स च्या वस्तुस्थितीसाठी ग्रेडियंट वापरा फील्डच्या जांभळा रंगाप्रमाणेच सदस्यता घ्या बटणावर.
सदस्यता बॉक्स
una साधी सदस्यता बॉक्स पण डिझाइन करून चांगला प्रभाव.
ईएमओजीआय वैधता फॉर्म
शुद्ध मध्ये सीएसएस हे वैधता फॉर्म की तयार करण्यासाठी किंवा संकेतशब्द जसे आपण लिहितो, इमोजी फॉर्मची सुरक्षा पातळी मोजेल. शंका न करता मजेदार आणि कुतूहल.
हे चुकवू नका सीएसएस मधील 23 अ‍ॅनिमेटेड बाणांची यादी.
येथे सादर केलेल्या उदाहरणांचे उत्कृष्ट नमुना. विविध संदर्भांमध्ये भिन्नता आणि अनुकूलता आणि सर्वात चांगली गोष्ट म्हणजे प्रत्येक शीर्षकाच्या दुव्यामध्ये डेमो आणि स्त्रोत कोडचा समावेश आहे, जरी आपण ते एका बटणासह हायलाइट केले पाहिजे «डेमो पहा» कारण जिज्ञासामुळे मी त्यात सापडलेले आहे शीर्षक. योगदानाबद्दल धन्यवाद. काराकासकडून शुभेच्छा.
मला खूप मदत झाली, धन्यवाद.