एक स्टैक्ड-पेपर इफ़ेक्ट लॉगइन फॉर्म बनाना

यह लेख हमारा हिस्सा है "HTML5 / CSS3 ट्यूटोरियल सीरीज़" - आपको एक बेहतर डिजाइनर और / या डेवलपर बनाने में मदद करने के लिए समर्पित है. यहां क्लिक करे एक ही श्रृंखला से अधिक लेख देखने के लिए.

लॉगिन फॉर्म किसी भी गतिशील वेबसाइट का एक अनिवार्य हिस्सा हैं। वे प्रतिबंधित सामग्री तक पहुंचने के लिए वेबसाइट उपयोगकर्ताओं के लिए एक तंत्र प्रदान करते हैं। इस ट्यूटोरियल में, हम बहुत सीएसएस 3 विशेषताओं की खोज करेंगे, जैसे कि टेक्स्ट-शैडो, बॉक्स-शैडो, लीनियर ग्रेडिएंट्स और ट्रांज़िशन जैसे स्टैक्ड-पेपर लुक के साथ एक सरल और सुरुचिपूर्ण लॉगिन फॉर्म बनाने के लिए।.

ऊपर की छवि लॉगिन फ़ॉर्म का पूर्वावलोकन दिखाती है जिसे हम बना रहे हैं। में गोता लगाने के लिए तैयार हैं? आएँ शुरू करें!

1. बेसिक HTML मार्कअप

HTML मार्कअप जो हम उपयोग कर रहे हैं, वह बहुत ही सरल है, HTML5 डॉक्टाइप घोषणा के बाद, हमारे पास है तथा </code> टैग। के अंदर <code><body></code> टैग, हम एक है <code><section></code> 'ढेर' के एक वर्ग के साथ टैग। इस <code><section></code> टैग का उपयोग सामग्री बॉक्स की चौड़ाई को परिभाषित करने और इसे पृष्ठ के केंद्र में संरेखित करने के लिए किया जाता है। हम सीएसएस का उपयोग करके इस टैग को लक्षित करने के लिए इस टैग के वर्ग नाम का भी उपयोग करेंगे। ए <code><form></code> टैग इस प्रकार है <code><section></code> टैग। प्रपत्र टैग में 'एक्शन' विशेषता के लिए एक वैध मान नहीं है, क्योंकि यह केवल प्रदर्शन के उद्देश्य के लिए उपयोग किया जाता है। प्रपत्र फ़ील्ड के अंदर ईमेल और पासवर्ड लेबल और इनपुट फ़ील्ड के लिए घोषणाएँ हैं, उसके बाद सबमिट बटन। यहां ध्यान देने वाली महत्वपूर्ण बात यह है कि हमने एक इनपुट फ़ील्ड का उपयोग एक प्रकार के 'ईमेल' के साथ किया है। यह हमें एचटीएमएल 5 घोषणा द्वारा प्रदान किया गया है और यह पुराने ब्राउज़रों में नियमित रूप से पाठ इनपुट क्षेत्र के लिए शालीनतापूर्वक अपमानित करता है.</p> <p>यहाँ संपूर्ण HTML मार्कअप है:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>सरल लॉगिन फ़ॉर्म

  लॉग इन करें
   ईमेल  
   पारण शब्द

     और यहाँ एक पूर्वावलोकन है जो हमने अभी तक बनाया है:
  
 2. बेसिक स्टाइल्स जोड़ना
 नामक एक नई सीएसएस फ़ाइल बनाएँ master.css और अपनी मुख्य HTML फ़ाइल में इस फ़ाइल का लिंक जोड़ें। हम विभिन्न ब्राउज़रों में एकरूपता प्राप्त करने के लिए एक त्वरित रीसेट के साथ अपनी सीएसएस फाइल शुरू करेंगे। आइए हम अपने पृष्ठ पर एक अच्छी पृष्ठभूमि छवि भी जोड़ते हैं। जो छवि मैंने इस्तेमाल की है, उससे ली गई है SubtlePatterns. एक पृष्ठभूमि छवि खोजने के लिए साइट को ब्राउज़ करने के लिए स्वतंत्र महसूस करें जो आपके स्वाद के अनुरूप है। हम निम्नलिखित घोषणा की सहायता से पृष्ठभूमि छवि जोड़ सकते हैं। यह भी ध्यान दें कि मैं उपयोग कर रहा हूं सन्स खोलें शरीर पाठ के लिए Google वेब फ़ॉन्ट से फ़ॉन्ट.
  / * -------- बेस स्टाइल्स --------- * / बॉडी, html मार्जिन: 0; गद्दी: 0;  body बैकग्राउंड: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") लेफ्ट टॉप रिपीट; फ़ॉन्ट: 16 पीएक्स / 1.5 "ओपन संस", हेल्वेटिका, एरियल, सेन्स-सेरिफ़;  div.wrap चौड़ाई: 400px; मार्जिन: 80 पीएक्स ऑटो; 
 3. स्टैक्ड-पेपर प्रभाव
 अब जब हमारे पास मूल लेआउट है और चल रहा है, तो फॉर्म को डिजाइन करने के साथ शुरुआत करें। स्टैक्ड-पेपर प्रभाव प्राप्त करने के लिए, हम इसका उपयोग करेंगे :बाद तथा : से पहले छद्म तत्वों। ये छद्म तत्व ज्यादातर किसी भी चयनकर्ता को दृश्य प्रभाव जोड़ने के लिए उपयोग किए जाते हैं. 
  : से पहले छद्म तत्व का उपयोग चयनकर्ता की सामग्री और से पहले सामग्री को जोड़ने के लिए किया जाता है :बाद चयनकर्ता की सामग्री के बाद छद्म तत्व. 
 हम 'स्टैक्ड' की श्रेणी के साथ, 400px की चौड़ाई और 300px की ऊँचाई के साथ सेक्शन देकर शुरुआत करेंगे। इसके अलावा, हम इस बॉक्स को # f6f6f6 का बैकग्राउंड कलर और #bbb के साथ 1-पिक्सेल-थिक बॉर्डर देंगे। यहां ध्यान देने योग्य मुख्य बातें हैं- बॉर्डर-रेडियस घोषणा और बॉक्स-शैडो घोषणा। यहाँ, "-moz-" और "-webkit-" ब्राउज़र उपसर्गों का उपयोग यह सुनिश्चित करने के लिए किया गया है कि यह जेको और वेबकिट-आधारित ब्राउज़रों में काम करता है. 
 सीमा-त्रिज्या घोषणा बहुत सरल है और इसका उपयोग गोल कोनों को बनाने के लिए किया जाता है, जिसमें 3 पीक वक्रता का प्रतिनिधित्व करता है। बॉक्स-शैडो घोषणा के लिए सिंटैक्स जटिल लग सकता है, लेकिन इसे बेहतर समझने के लिए हम इसे छोटे विखंडू में तोड़ दें. 
  / * -------- बॉर्डर रेडियस --------- * / -webkit-border-radius: 3px; -मोज़-बॉर्डर-रेडियस: 3 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; / * -------- बॉक्स छाया --------- * / -webkit- बॉक्स-छाया: 0 0 3px rgba (0,0,0, 2); -मोज़-बॉक्स-छाया: 0 0 3px आरजीबीए (0,0,0, 2); बॉक्स-छाया: 0 0 3px आरजीबीए (0,0,0, 2);
 पहले दो शून्य x- ऑफसेट और y- ऑफसेट को इंगित करते हैं और 3px धब्बा इंगित करता है। अगला रंग घोषणा है। मैंने यहाँ rgba मान का उपयोग किया है; आरजीबीए लाल हरे नीले और अल्फा (अस्पष्टता) के लिए खड़ा है। इस प्रकार कोष्ठक के अंदर के 4 मान लाल, हरे, नीले और उसके अल्फा (अपारदर्शिता) की मात्रा को इंगित करते हैं.
  .खड़ी पृष्ठभूमि: # f6f6f6; बॉर्डर: 1px ठोस #bbb; ऊंचाई: 300 पीएक्स; मार्जिन: 50 पीएक्स ऑटो; स्थिति: रिश्तेदार; चौड़ाई: 400px; -webkit- बॉक्स-छाया: 0 0 3px rgba (0,0,0, 2); -मोज़-बॉक्स-छाया: 0 0 3px आरजीबीए (0,0,0, 2); बॉक्स-छाया: 0 0 3px आरजीबीए (0,0,0, 2); -वेबकिट-बॉर्डर-त्रिज्या: 3 पीएक्स; -मोज़-बॉर्डर-रेडियस: 3 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; 
 अब जब हमने फॉर्म के लिए मूल बाउंडिंग बॉक्स बनाया है, तो आइए शुरुआत करते हैं :बाद तथा : से पहले छद्म तत्वों. 
  .स्टैक्ड: के बाद, .stacked: इससे पहले बैकग्राउंड: # f6f6f6; बॉर्डर: 1px ठोस #aaa; नीचे: -8 पीएक्स; सामग्री: "; ऊँचाई: 250px; बायाँ: 2px; स्थिति: निरपेक्ष; चौड़ाई: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0;; .2); moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px ;; moz-border-radius: 3px; बॉर्डर-रेडियस: 3px; .stacked: इससे पहले बॉटम -14px; लेफ्ट: 5px; चौड़ाई: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; सीमा-त्रिज्या: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0.5.5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0.5); बॉक्स; -शादो: 0 0 15px rgba (0,0,0,0.5) ;;
 के लिए कोड: छद्म तत्वों से पहले और बाद में ऊपर चर्चा की गई बाउंडिंग बॉक्स के समान है। यहां ध्यान देने वाली एकमात्र महत्वपूर्ण बात यह है कि ये छद्म तत्व बाउंडिंग बॉक्स के संबंध में बिल्कुल स्थित हैं। छद्म तत्व के प्रत्येक उत्तरोत्तर कुछ पिक्सल द्वारा कम किया जाता है ताकि इसे स्टैक्ड-पेपर लुक दिया जा सके.
 4. इनपुट फ़ील्ड
 HTML मार्कअप में, हमने अपने सीएसएस घोषणाओं के साथ आसानी से इन तत्वों को लक्षित करने की अनुमति देने के लिए ईमेल फ़ील्ड और पासवर्ड फ़ील्ड दोनों में 'टेक्स्ट-इनपुट' की एक क्लास जोड़ी है। यहाँ सीएसएस घोषणा है कि दोनों इनपुट क्षेत्रों के लिए लागू किया जाता है.
  प्रपत्र input.text- इनपुट रूपरेखा: 0; प्रदर्शन क्षेत्र; चौड़ाई: 330 पीएक्स; गद्दी: 8px 15px; सीमा: 1px ठोस ग्रे; फ़ॉन्ट-आकार: 16 पीएक्स; फ़ॉन्ट-वजन: 400; -वेबकिट-बॉर्डर-त्रिज्या: 25 पीएक्स; -मोज़-बॉर्डर-रेडियस: 25 पीएक्स; सीमा-त्रिज्या: 25 पीएक्स; बॉक्स-छाया: इनसेट 0 2px 8px rgba (0,0,0,0.3); 
 यहां, हमने फिर से सीमा-त्रिज्या और बॉक्स-शैडो घोषणाओं का उपयोग किया है। पाठ क्षेत्रों के मामले में, सीमा-त्रिज्या को अधिक वक्रता सुनिश्चित करने के लिए एक उच्च मूल्य दिया जाता है। बॉक्स-शैडो घोषणा के मामले में, कीवर्ड इनसेट का उपयोग यह निर्दिष्ट करने के लिए किया गया है कि छाया पाठ क्षेत्र के अंदर होगी। यहां, छाया के लिए लंबवत ऑफसेट 2px है और इसमें 8px का एक धब्बा है, रंग को rgba प्रारूप का उपयोग करके घोषित किया जा रहा है.
 इनपुट फ़ील्ड में कुछ अन्तरक्रियाशीलता जोड़ने के लिए, हम 'होवर' स्थिति पर इनपुट फ़ील्ड के लिए बॉक्स-शैडो प्रॉपर्टी को बदल देंगे। नए बॉक्स-शैडो डिक्लेरेशन में शून्य x और y ऑफ़सेट्स हैं, लेकिन इसमें 5px धब्बा है, रंग के साथ rgba प्रारूप में घोषित किया जा रहा है.
 5. बटन सबमिट करें
 इस फॉर्म का अंतिम भाग जिसे हमें पूरा करना है वह सबमिट बटन है। इनपुट क्षेत्र के समान, हम बॉर्डर-त्रिज्या संपत्ति का उपयोग करके सबमिट बटन को 25px का त्रिज्या देंगे। बटन देने के लिए 1px की y-ऑफसेट के साथ एक बॉक्स-शैडो प्रॉपर्टी भी जोड़ी गई है “भीतरी छाया” प्रभाव.
  फार्म इनपुट [प्रकार = 'सबमिट'] फ्लोट: सही; गद्दी: 10px 20px; प्रदर्शन क्षेत्र; कर्सर: सूचक; फ़ॉन्ट-आकार: 16 पीएक्स; फ़ॉन्ट-वजन: 700; रंग: #fff; पाठ-छाया: 0 1px 0 # 000; पृष्ठभूमि-रंग: # 0074CC; बॉर्डर: 1px ठोस # 05C; -वेबकिट-बॉर्डर-त्रिज्या: 25 पीएक्स; -मोज़-बॉर्डर-रेडियस: 25 पीएक्स; सीमा-त्रिज्या: 25 पीएक्स; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 08 सी, # 05 सी); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 08C, # 05C); पृष्ठभूमि-चित्र: -webkit-linear-gradient (शीर्ष, # 08C, # 05C); पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # 08C, # 05C); -webkit- बॉक्स-छाया: इनसेट 0 1px 0px आरजीबीए (255, 255, 255, 0.5); -मोज़-बॉक्स-छाया: इनसेट 0 1px 0px आरजीबीए (255, 255, 255, 0.5); बॉक्स-छाया: इनसेट 0 1px 0px rgba (255, 255, 255, 0.5); 
 यहां ध्यान देने वाली महत्वपूर्ण बात यह है कि इस बटन में ढाल जोड़ने के लिए घोषणा है। CSS3 ग्रेडिएंट एक काफी बड़ा विषय है और हम केवल सतह को खरोंचते रहेंगे। इस सबमिट बटन के लिए, हम # 08C से # 05C तक जाने वाली एक लीनियर ग्रेडिएंट जोड़ेंगे। अन्य सभी CSS3 संपत्तियों के साथ जो हमने अब तक उपयोग किए हैं, हम "-मोज़", "-वेटकिट" और "-एमएस" विक्रेता जोड़ सकते हैं ताकि यह सुनिश्चित हो सके कि विभिन्न ब्राउज़रों में ढाल कार्य.
 6. डेमो और डाउनलोड
 हमारा लॉगिन फ़ॉर्म अब पूरा हो गया है। पूर्ण रूप कैसा दिखता है, यह देखने के लिए डेमो देखें। यदि आप किसी भी बिंदु पर खो गए हैं या ट्यूटोरियल का पालन नहीं कर सकते हैं, तो चिंता न करें, बस अपने डेस्कटॉप पर फाइल डाउनलोड करें और मौजूदा सीएसएस कोड के साथ टिंकर को समझने के लिए कि यह कैसे काम करता है।.
 आशा है कि आप इस ट्यूटोरियल का आनंद लेंगे। इन सुविधाओं के साथ प्रयोग करने के लिए स्वतंत्र महसूस करें और अपने विचारों को साझा करना न भूलें.
 डेमो
 फ़ाइलें डाउनलोड करें
 
संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है भरनी एम Hongkiat.com के लिए। भारानी नई दिल्ली, भारत के एक डिजाइनर / डेवलपर हैं। वह वर्तमान में Resumonk.com पर काम कर रहा है - एक ऑनलाइन फिर से शुरू बिल्डर जो आपको मिनटों में एक पेशेवर और सुंदर फिर से शुरू करने में मदद करता है। इसके अलावा अपने पक्ष की परियोजना की जाँच करें - Quotescube.com - उद्धरण के अपने दैनिक खुराक.