कैसे सीएसएस आधारित सामग्री समझौते बनाने के लिए
आज के ट्यूटोरियल में हम यह जानने जा रहे हैं कि हम कैसे बना सकते हैं बस CSS3 का उपयोग करके क्षैतिज और ऊर्ध्वाधर सामग्री समझौते. कई jQuery प्लगइन्स बाहर हैं जो आपके लिए यह काम कर सकते हैं लेकिन आप क्या करते हैं अगर आगंतुक ने जावास्क्रिप्ट बंद कर दिया है, तो समझौते सही तरीके से काम नहीं करेंगे। यदि सीएसएस में आपका अकॉर्डियन शुद्ध है तो यह आपके सभी आगंतुकों के लिए काम करेगा.
हम एक बनाने जा रहे हैं क्षैतिज तथा खड़ा सामग्री समझौते। शीर्षक पाठ पर क्लिक करने पर स्लाइड पूर्ण सामग्री को प्रदर्शित करेगी, और यहाँ एक त्वरित पूर्वावलोकन (स्क्रीनशॉट) है कि वे कैसे दिखते हैं.
जो तुम देखते हो वह पसंद है? कोडिंग शुरू करते हैं!
1. HTML और कंटेंट तैयार करना
शुरुआत के लिए हम समझौते के लिए HTML बनाने जा रहे हैं.
संरचना को एक कंटेनर की आवश्यकता होती है div और फिर ए अनुभाग समझौते में प्रत्येक स्लाइड के लिए। इस उदाहरण में हम 5 स्लाइड करने जा रहे हैं। प्रत्येक स्लाइड में सामग्री के लिए एक शीर्षक और एक पैराग्राफ होने वाला है.
हमारे बारे में
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। सस्पेंडिस आइडी लॉबोर्टिस मस्सा। नून विवर्रा वेलो लेओ, बैठो अमित तत्वम मील। फ्यूस पॉसुअर ननक a mi टेम्पपस मालसुआडा। करैबितुर फैसिलिसिस रोनकस एरोस एगेट प्लेजरैट। एलिकम सेम्पर मौरिस एमेट जस्टो अस्थायी नेक लसिनिया मैग्ना मोलेस्टी। इतिम् प्लास्जरत वादे डोलर विटे एडिपिसिंग। अलिकम एसी इरेट लोरेम, यूट इस्क्यूलिस जस्टो। एतेम मतिस गरिनिस्म ग्रविडा। अलिकम एनके जस्टो एंटे, नॉन सेपर एमआई। Nulla consectetur interdum massa, vel porta enim vulputate sed। मायकेनस एलीट क्वम, एसेस्टस एगेट प्लेजरैट नॉन, फ्रिंगिला वेल एरोस। नाम वाहनिसुला तत्वम् नाला सेड परिणाम। फसेलस यू एस एर्ट एनिम। मैग्ना नॉन मास द्रापिबस स्केलेरीकेक में लॉरेंस पर प्रेशेंट.
सेवाएं
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। सस्पेंडिस आइडी लॉबोर्टिस मस्सा। नून विवर्रा वेलो लेओ, बैठो अमित तत्वम मील। फ्यूस पॉसुअर ननक a mi टेम्पपस मालसुआडा। करैबितुर फैसिलिसिस रोनकस एरोस एगेट प्लेजरैट। एलिकम सेम्पर मौरिस एमेट जस्टो अस्थायी नेक लसिनिया मैग्ना मोलेस्टी। इतिम् प्लास्जरत वादे डोलर विटे एडिपिसिंग। अलिकम एसी इरेट लोरेम, यूट इस्क्यूलिस जस्टो। एतेम मतिस गरिनिस्म ग्रविडा। अलिकम एनके जस्टो एंटे, नॉन सेपर एमआई। Nulla consectetur interdum massa, vel porta enim vulputate sed। मायकेनस एलीट क्वम, एसेस्टस एगेट प्लेजरैट नॉन, फ्रिंगिला वेल एरोस। नाम वाहनिसुला तत्वम् नाला सेड परिणाम। फसेलस यू एस एर्ट एनिम। मैग्ना नॉन मास द्रापिबस स्केलेरीकेक में लॉरेंस पर प्रेशेंट.
ब्लॉग
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। सस्पेंडिस आइडी लॉबोर्टिस मस्सा। नून विवर्रा वेलो लेओ, बैठो अमित तत्वम मील। फ्यूस पॉसुअर ननक a mi टेम्पपस मालसुआडा। करैबितुर फैसिलिसिस रोनकस एरोस एगेट प्लेजरैट। एलिकम सेम्पर मौरिस एमेट जस्टो अस्थायी नेक लसिनिया मैग्ना मोलेस्टी। इतिम् प्लास्जरत वादे डोलर विटे एडिपिसिंग। अलिकम एसी इरेट लोरेम, यूट इस्क्यूलिस जस्टो। एतेम मतिस गरिनिस्म ग्रविडा। अलिकम एनके जस्टो एंटे, नॉन सेपर एमआई। Nulla consectetur interdum massa, vel porta enim vulputate sed। मायकेनस एलीट क्वम, एसेस्टस एगेट प्लेजरैट नॉन, फ्रिंगिला वेल एरोस। नाम वाहनिसुला तत्वम् नाला सेड परिणाम। फसेलस यू एस एर्ट एनिम। मैग्ना नॉन मास द्रापिबस स्केलेरीकेक में लॉरेंस पर प्रेशेंट.
पोर्टफोलियो
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। सस्पेंडिस आइडी लॉबोर्टिस मस्सा। नून विवर्रा वेलो लेओ, बैठो अमित तत्वम मील। फ्यूस पॉसुअर ननक a mi टेम्पपस मालसुआडा। करैबितुर फैसिलिसिस रोनकस एरोस एगेट प्लेजरैट। एलिकम सेम्पर मौरिस एमेट जस्टो अस्थायी नेक लसिनिया मैग्ना मोलेस्टी। इतिम् प्लास्जरत वादे डोलर विटे एडिपिसिंग। अलिकम एसी इरेट लोरेम, यूट इस्क्यूलिस जस्टो। एतेम मतिस गरिनिस्म ग्रविडा। अलिकम एनके जस्टो एंटे, नॉन सेपर एमआई। Nulla consectetur interdum massa, vel porta enim vulputate sed। मायकेनस एलीट क्वम, एसेस्टस एगेट प्लेजरैट नॉन, फ्रिंगिला वेल एरोस। नाम वाहनिसुला तत्वम् नाला सेड परिणाम। फसेलस यू एस एर्ट एनिम। मैग्ना नॉन मास द्रापिबस स्केलेरीकेक में लॉरेंस पर प्रेशेंट.
संपर्क करें
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। सस्पेंडिस आइडी लॉबोर्टिस मस्सा। नून विवर्रा वेलो लेओ, बैठो अमित तत्वम मील। फ्यूस पॉसुअर ननक a mi टेम्पपस मालसुआडा। करैबितुर फैसिलिसिस रोनकस एरोस एगेट प्लेजरैट। एलिकम सेम्पर मौरिस एमेट जस्टो अस्थायी नेक लसिनिया मैग्ना मोलेस्टी। इतिम् प्लास्जरत वादे डोलर विटे एडिपिसिंग। अलिकम एसी इरेट लोरेम, यूट इस्क्यूलिस जस्टो। एतेम मतिस गरिनिस्म ग्रविडा। अलिकम एनके जस्टो एंटे, नॉन सेपर एमआई। Nulla consectetur interdum massa, vel porta enim vulputate sed। मायकेनस एलीट क्वम, एसेस्टस एगेट प्लेजरैट नॉन, फ्रिंगिला वेल एरोस। नाम वाहनिसुला तत्वम् नाला सेड परिणाम। फसेलस यू एस एर्ट एनिम। मैग्ना नॉन मास द्रापिबस स्केलेरीकेक में लॉरेंस पर प्रेशेंट.
अब हमारे पास हमारी स्लाइड्स हैं हम समझौते को स्टाइल करना शुरू कर सकते हैं.
2. सीएसएस स्टाइलिंग
पहले हमें युक्तियों को स्टाइल करने की आवश्यकता है div समझौते के। यह हमें स्लाइड्स में से प्रत्येक और सुर्खियों में से प्रत्येक को प्रदर्शित करने का एक विचार देगा.
/ * अकॉर्डियन बॉक्स को परिभाषित करें * / .acordion चौड़ाई: 830px; छिपा हुआ सैलाब; मार्जिन: 10 पीएक्स ऑटो; रंग: # 474,747; पृष्ठभूमि: # 414,141; गद्दी: 10px;
आगे हम प्रत्येक स्लाइड के लिए सुर्खियाँ बनाने जा रहे हैं.
.accordion खंड फ्लोट: बाएं; छिपा हुआ सैलाब; रंग: # 333; कर्सर: सूचक; पृष्ठभूमि: # 333; मार्जिन: 3px; .acordion खंड: होवर पृष्ठभूमि: # 444;
हम पृष्ठभूमि का रंग गहरे भूरे होने के लिए उस अनुभाग पर सेट कर रहे हैं जो शीर्ष पर है जहां आगंतुक स्लाइड प्रदर्शित करने के लिए क्लिक करेंगे। हम इस अनुभाग का उपयोग हेडलाइन और सामग्री दोनों के लिए कर रहे हैं, जिसका अर्थ है कि हम कम HTML का उपयोग करने में सक्षम हैं और सामग्री के शीर्षक के रूप में स्लाइड के शीर्षक का पुन: उपयोग करते हैं.
.accordion अनुभाग पी प्रदर्शन: कोई नहीं;
फिलहाल सभी स्लाइड्स को बंद कर दिया जाएगा, इसलिए हमें यह सुनिश्चित करने की जरूरत है कि स्लाइड देखने तक पैराग्राफ छिपा हुआ है, इसलिए अब पैराग्राफ का प्रदर्शन सेट करें.
.accordion अनुभाग: स्थिति: रिश्तेदार के बाद; font-size: 24px; रंग: # 000; फोंट की मोटाई: बोल्ड; .acordion खंड: nth-child (1): after सामग्री: '1'; .acordion खंड: nth-child (2): after सामग्री: '2'; .acordion खंड: nth-child (3): after सामग्री: '3'; .acordion खंड: nth-child (4): after सामग्री: '4'; .acordion खंड: nth-child (5): after सामग्री: '5';
बंद की गई स्लाइडों के साथ हम यह कहना चाहते हैं कि हम किस नंबर पर हैं, यह कहने के लिए शीर्षक के नीचे एक नंबर प्रदर्शित करना चाहते हैं। इसके लिए हम अनुभाग शीर्षक के बाद सामग्री जोड़ने के लिए CSS का उपयोग करने जा रहे हैं, इसका उपयोग करके किया जा सकता है :बाद छद्म श्रेणी चयनकर्ता.
अब हमने स्लाइड के लिए शीर्षक बनाया है, हम क्लिक को ईवेंट को स्लाइड प्रदर्शित करने के लिए कर सकते हैं। लेकिन एक समस्या है, CSS में क्लिक इवेंट नहीं है, यही वजह है कि आमतौर पर jQuery का उपयोग करके अकॉर्डियन बनाया जाता है, इसलिए हम क्लिक इवेंट को हेडलाइन टेक्स्ट से जोड़ सकते हैं.
हमें सीएसएस में क्लिक ईवेंट की नकल करने की जरूरत है, जिसका उपयोग करके किया जा सकता है : लक्ष्य छद्म श्रेणी चयनकर्ता.
3. उपयोग करना : लक्ष्य छद्म श्रेणी चयनकर्ता
: लक्ष्य हमें टुकड़ा पहचानकर्ता को स्टाइल करने की अनुमति देता है। कभी-कभी हम पृष्ठ पर किसी स्थान को इंगित करने के लिए एक ऑन-पेज एंकर टैग का उपयोग करते हैं। लिंक पर क्लिक करने पर आईडी लंगर टैग में लक्ष्य बन जाता है और आप इस का उपयोग करके शैली कर सकते हैं : लक्ष्य चयनकर्ता.
समझौते में इसे जोड़ने के लिए हमें शीर्षक की ओर एक लिंक जोड़ने की आवश्यकता है जो इंगित करता है आईडी स्लाइड का.
हमारे बारे में
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। सस्पेंडिस आइडी लॉबोर्टिस मस्सा। नून विवर्रा वेलो लेओ, बैठो अमित तत्वम मील। फ्यूस पॉसुअर ननक a mi टेम्पपस मालसुआडा। करैबितुर फैसिलिसिस रोनकस एरोस एगेट प्लेजरैट। एलिकम सेम्पर मौरिस एमेट जस्टो अस्थायी नेक लसिनिया मैग्ना मोलेस्टी। इतिम् प्लास्जरत वादे डोलर विटे एडिपिसिंग। अलिकम एसी इरेट लोरेम, यूट इस्क्यूलिस जस्टो। एतेम मतिस गरिनिस्म ग्रविडा। अलिकम एनके जस्टो एंटे, नॉन सेपर एमआई। Nulla consectetur interdum massa, vel porta enim vulputate sed। मायकेनस एलीट क्वम, एसेस्टस एगेट प्लेजरैट नॉन, फ्रिंगिला वेल एरोस। नाम वाहनिसुला तत्वम् नाला सेड परिणाम। फसेलस यू एस एर्ट एनिम। मैग्ना नॉन मास द्रापिबस स्केलेरीकेक में लॉरेंस पर प्रेशेंट.
.accordion अनुभाग: लक्ष्य पृष्ठभूमि: #FFF; गद्दी: 10px; .acordion खंड: लक्ष्य: होवर बैकग्राउंड: # एफएफ; .acordion खंड: लक्ष्य h2 चौड़ाई: 100%; । कॉर्डियन सेक्शन: h2 a color: # 333; गद्दी: 0; .acordion खंड: लक्ष्य p प्रदर्शन: ब्लॉक; .कॉर्डियन सेक्शन h2 a पैडिंग: 8px 10px; प्रदर्शन क्षेत्र; font-size: 16px; font-weight: सामान्य; रंग: #eee; text-decoration: कोई नहीं;
उपर्युक्त कोड शेष आकार को फिट करने के लिए स्लाइड का आकार बदल देगा और पृष्ठभूमि का रंग सफेद में बदल देगा। पैराग्राफ छिपा हुआ था इसलिए अब लक्ष्य पर हमें पैराग्राफ प्रदर्शित करने की आवश्यकता है.
अब जब आप समझौते के शीर्षक पर क्लिक करते हैं तो स्लाइड स्लाइड सामग्री को प्रदर्शित करने के लिए शैली बदल देगी.
4. क्षैतिज समझौता
उपरोक्त कोड सामान्य समझौते का निर्माण करेगा अब हम क्षैतिज और ऊर्ध्वाधर समझौते के बीच अंतर के लिए सीएसएस परिवर्तन करना शुरू कर सकते हैं। इन दोनों समझौते में समान कार्यक्षमता है लेकिन शीर्षक स्टाइल अलग होगा.
.क्षैतिज खंड चौड़ाई: 5%; ऊंचाई: 250px; -मोज़-संक्रमण: चौड़ाई 0.2s आसानी से बाहर; -वेबकैट-संक्रमण: चौड़ाई 0.2s आसानी से बाहर; -ओ-संक्रमण: चौड़ाई 0.2s आसानी से बाहर; संक्रमण: चौड़ाई 0.2s आसानी से बाहर;
पहले हमने सेट किया चौड़ाई शीर्षक अनुभाग 5% तक है, इसलिए यह एक बंद स्लाइड है। जैसा कि अनुभाग दोनों शीर्षक और स्लाइड के लिए सामग्री है, हमें संक्रमण संपत्ति का उपयोग करके सामग्री को प्रदर्शित करने के लिए एनीमेशन जोड़ने की आवश्यकता है.
/ * स्लाइड की संख्या की स्थिति * /। क्षैतिज खंड: शीर्ष: 140px के बाद; बाएँ: 15px;
स्लाइड पर संख्या की स्थिति प्रत्येक बंद हेडलाइन पर एक ही स्थिति होगी जो ऊर्ध्वाधर सुर्खियों के लिए अलग-अलग तैनात हैं.
/ * बंद स्लाइड का हेडर * / .होल्डर सेक्शन h2 -वेबकैट-ट्रांसफॉर्म: रोटेट (90 डीजी); -moz-परिणत: बारी बारी से (90deg); -ओ-परिवर्तन: घुमाव (90 डिग्री); परिवर्तन: घुमाएँ (90 डिग्री); चौड़ाई: 240px; स्थिति: रिश्तेदार; बाएं: -100px; शीर्ष: 85px; / * ओपन स्लाइड पर माउस पर * /। क्षैतिज: लक्ष्य चौड़ाई: 73%; ऊँचाई: 230px; । क्षैतिज: लक्ष्य h2 शीर्ष: 0px; बाएं: 0; -webkit-परिणत: घुमाएँ (0deg); -moz-परिणत: घुमाएँ (0deg); -ओ-रूपांतर: घुमाव (0deg); रूपांतर: घुमाव (0deg);
उपर्युक्त कोड स्लाइड के आकार को बदलकर बाकी के समझौते के अनुरूप होगा। शीर्षक को नीचे की ओर चलाने के लिए शीर्षक को लंबवत घुमाया गया था, लेकिन अब स्लाइड को खोलने के साथ हमें पाठ को 0 डिग्री पर वापस घुमाकर पाठ को क्षैतिज रूप से बदलना होगा.
5. ऊर्ध्वाधर अकॉर्डियन
वर्टिकल अकॉर्डियन उसी तरह काम करता है जैसे हॉरिजॉन्टल अकॉर्डियन को छोड़कर हमें बदलने की जरूरत होती है ऊंचाई के स्थान पर चौड़ाई और हमें पाठ के संरेखण को बदलने की आवश्यकता नहीं है.
.ऊर्ध्वाधर खंड चौड़ाई: 100%; ऊँचाई: 40px; -वेबकैट-संक्रमण: ऊंचाई 0.2s आसानी से बाहर; -मोज़-संक्रमण: ऊंचाई 0.2s आसानी से बाहर; -ओ-संक्रमण: ऊंचाई 0.2s आसानी से बाहर; संक्रमण: ऊंचाई 0.2s आसानी से बाहर; / * स्लाइड की ऊँचाई निर्धारित करें * / .vertical: target height: 250px; चौड़ाई: 97%;
पर लक्ष्य ऊर्ध्वाधर समझौते की घटना हम बदलने जा रहे हैं ऊंचाई स्लाइड प्रदर्शित करने के लिए शीर्षक का.
.ऊर्ध्वाधर खंड h2 स्थिति: रिश्तेदार; बाएं: 0; शीर्ष: -15px; / * स्लाइड पर संख्या की स्थिति निर्धारित करें * / .vertical अनुभाग: शीर्ष: -60px के बाद; बाएं: 810px; .आर्थिक अनुभाग: लक्ष्य: बाएं: -9999px के बाद;
ऊपर वाला बदल जाएगा पद बंद स्लाइड पर शीर्षक पाठ का। बंद स्लाइड के साथ हमें सेट करने की आवश्यकता है पद संख्या जो समझौते के दाईं ओर स्थित है। जब स्लाइड खुली होती है तो हमें इस नंबर को हेडलाइन पर छिपाने की आवश्यकता होती है जब लक्ष्य निर्धारित किया जाता है इसलिए हम स्क्रीन से बाईं स्थिति को बदलते हैं.
अब जब आप समझौते के शीर्षक पर क्लिक करते हैं तो स्लाइड स्लाइड सामग्री को प्रदर्शित करने के लिए शैली बदल देगी.
संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है पॉल अंडरवुड Hongkiat.com के लिए। पॉल ब्रिस्टल, यूके से एक PHP वेब डेवलपर है। वह वेब डेवलपमेंट के बारे में ट्यूटोरियल लिखते हैं: मुख्य विषयों में PHP, jQuery, CSS3 और HTML5 शामिल हैं। वह पॉलुंड.यूके में उपयोगी कोड स्निपेट्स भी रिकॉर्ड करता है.
