CSS3 में एक सुंदर ब्रेडक्रंब नेविगेशन मेनू कोडिंग
नेविगेशन मेनू और लिंक संभवतः वेब लेआउट के लिए सबसे महत्वपूर्ण इंटरफ़ेस तत्व हैं। ये केवल उपयोगकर्ताओं के लिए आउटलेट हैं पृष्ठों के बीच की यात्रा और आपके द्वारा बनाई गई सभी सामग्री के साथ सहभागिता करें। ब्रेडक्रंब के अतिरिक्त लाभ के साथ समान कार्यक्षमता प्रदान करता है अपनी वर्तमान स्थिति पर नज़र रखना. तुम कर सकोगे पिछले सभी लिंक पथ प्रदर्शित करें जैसा कि उपयोगकर्ता आपकी साइट पदानुक्रम का पता लगाता है.
इस ट्यूटोरियल में हम कुछ CSS3 प्रभावों के साथ एक शानदार ब्रेडक्रम्ब नेविगेशन मेनू बना रहे हैं। यह सभी प्रमुख CSS3- अनुरूप ब्राउज़रों में काम करने के लिए परीक्षण किया गया है, यहां तक कि पुराने ब्राउज़र जो CSS3 का समर्थन नहीं करते हैं वे अभी भी इसे पूरी तरह से मामलों में प्रस्तुत करेंगे।.
इससे पहले कि हम कोड में गोता लगाएँ हम अपने ब्रेडक्रंब की कार्यक्षमता के बारे में थोड़ा बात करेंगे, एक कूद में पूर्ण ट्यूटोरियल!
पगडंडी भेंट करना
एक ब्रेडक्रंब निशान किसी भी अन्य मेनू से अधिक जटिल नहीं है। हमारी शैलियाँ अधिकांश उदाहरणों की तुलना में बहुत अधिक जटिल सीएसएस गुणों का उपयोग करेंगी, फिर भी हमारे नंगे हड्डियों के टेम्प्लेट अभी भी उपयोगकर्ताओं को एक पृष्ठ से दूसरे पर मार्गदर्शन करने के लिए हैं.
इस उदाहरण में हम Google समर्थन मेनू के समान शैली को फिर से बनाएंगे। आप कहां जा रहे हैं, इसका अंदाजा लगाने के लिए आप जीमेल सपोर्ट पेज पर उनके मेन्यू देख सकते हैं। अंतत: हम चाहते हैं सभी उपयोगकर्ताओं के लिए अपना सर्वश्रेष्ठ उपयोगकर्ता अनुभव प्रदान करें, उनके ऑपरेटिंग सिस्टम या ब्राउज़र सॉफ़्टवेयर की परवाह किए बिना, इस प्रकार मैंने बनाया है पुराने ब्राउज़रों के बीच सुशोभित गिरावट का समर्थन करने के लिए 2 अलग कोड उदाहरण.
पहला प्रयोग करके बनाया गया है कस्टम पृष्ठभूमि छवियों तथा उचित सीएसएस संरेखण. सभी हॉवर ईवेंट और सक्रिय ईवेंट केवल कुछ CSS शैलियों के साथ पूर्व-निर्मित हैं, लेकिन जिन उपयोगकर्ताओं के चित्र बंद हैं वे इन प्रभावों का अनुभव नहीं कर पाएंगे! यही कारण है कि मैंने सीएसएस ग्रेडिएंट, राउंडेड कॉर्नर और बॉक्स शैडो के साथ एक समान दिखने वाला मेनू भी बनाया है.
यदि आप दोनों शैलियों का समर्थन करने से घबराते हैं, तो आप अपनी साइट के लिए उनके बीच चयन कर सकते हैं। अधिकांश आगंतुक डिफ़ॉल्ट रूप से छवियों का उपयोग कर रहे होंगे, लेकिन यदि आप अधिक सटीक विज़िटर डेटा चाहते हैं तो अपनी वेबसाइट एनालिटिक्स टूल के माध्यम से खुदाई करें.
पर्याप्त शब्द, परियोजना में कूदते हैं! हम मूल HTML ढांचे का निर्माण करके शुरू करेंगे और अलग-अलग स्टाइलिंग प्रभाव डालेंगे। सबसे पहले आपको छवि डाउनलोड करने की आवश्यकता है परियोजना के लिए आवश्यक है.
नंगे-हड्डी HTML
मैं अपने दस्तावेज़ के साथ शुरू कर रहा हूँ मानक HTML5 पेज टेम्पलेट. इसमें डिफ़ॉल्ट सिद्धांत, लिंक किए गए CSS और सभी मूल तत्व शामिल हैं। यदि आप अपना स्वयं का दस्तावेज़ इस तरह से शुरू करना चाहते हैं तो मैंने नीचे कोड जोड़ दिया है। ध्यान दें कि यह प्रभावित नहीं होना चाहिए कि आपका ब्रेडक्रम्ब कैसे प्रदर्शित होता है, इसलिए यदि आप चाहें तो अपने स्वयं के पेज टेम्पलेट का उपयोग करने के लिए स्वतंत्र महसूस करें.
डिफाल्ट पृष्ठ
मैं कोड को दो अलग-अलग ब्लॉकों में विभाजित करूँगा। छवियों के साथ पहला ब्लॉक थोड़े अलग तरीके से बनाया गया है, इसके बाद छवियों के बिना हमारा मेनू है। प्रत्येक सेट को अपना दिया जाता है आईडी इसलिए हम सामग्री को बहुत आसान पहचान सकते हैं। यदि आप भी jQuery के प्रशंसक हैं, तो आप इसका उपयोग कर सकते हैं # चयनकर्ता सभी आंतरिक DOM तत्वों में हेरफेर करने के लिए.
पहले हमारे पास ए विभा युक्त आईडी के साथ “ब्रेडक्रम्ब“. डेमो फाइल में हमने अपने कोड को अलग करने के लिए इसका इस्तेमाल किया है और इसे कुछ जोड़े गए मार्जिन के साथ पृष्ठ पर ले जाना है। आप इस बाहरी div को हटा सकते हैं, लेकिन आपको नए टेम्पलेट को फिट करने के लिए सब कुछ फिर से स्टाइल करना होगा। यह वास्तव में एक कंटेनर छोड़ने के लिए चोट नहीं करता है क्योंकि आप स्थिति को बहुत आसान नियंत्रित कर पाएंगे.
आंतरिक रूप से मैंने एक अनियंत्रित सूची का उपयोग करके ब्रेडक्रंब का निर्माण किया है। स्टाइल किए गए HTML सूचियों को अनुकूलित करने के लिए बहुत सारे अनूठे तरीके हैं, और ब्रेडक्रंब उनमें से केवल एक है। आप देख सकते हैं कि मैंने प्रारंभिक सूची आइटम ए दिया है कक्षा का “प्रथम“. मेन्यू आइटम को इन-लाइन रखने के लिए कुछ अतिरिक्त पैडिंग के लिए यह आवश्यक है। इसके अतिरिक्त एक छोटा स्पान ब्लॉक को जोड़ा गया है, इसलिए हमारे पास एक उचित बाईं सीमा है जो पृष्ठभूमि छवि को ओवरलैप नहीं करती है.
इसके अतिरिक्त प्रत्येक एंकर लिंक को घटती संख्या के साथ लगाया जाता है z- सूचकांक संपत्ति। उन छवियों का उपयोग करना जिनकी हमें आवश्यकता होगी हमारे प्रत्येक लिंक ओवरलैप हैं ब्रेडक्रम्ब तीर को ठीक से प्रदर्शित करने के लिए। इसे पूरा करने का सबसे आसान तरीका है जेड-इंडेक्स को समायोजित करना इसलिए प्रत्येक लिंक अगले ओवरले करता है। मैंने साथ शुरू किया 9 और वहां से नीचे काम किया है, लेकिन अगर आपके मेनू में अधिक लिंक हैं तो बस एक उच्च पूर्णांक के साथ शुरू करें.
चित्र के बिना मेनू
सेवा मेरे कृपा करके हमारे ब्रेडक्रंब को नीचा दिखाओ हमें HTML सूची आइटम के द्वितीयक सेट की आवश्यकता है। यदि आप एक एकल नेविगेशन पर कमबैक करने का प्रयास कर रहे हैं तो आप ब्राउज़र एजेंट का पता लगाने के लिए jQuery का उपयोग कर सकते हैं और तदनुसार एक आईडी लगा सकते हैं। दुर्भाग्य से यह हमेशा विश्वसनीय नहीं होता (कुछ मोबाइल उपयोगकर्ताओं के लिए, उदाहरण के लिए)। एक और उपाय है एक IE- विशिष्ट स्टाइलशीट शामिल करें तथा जो भी मेनू सबसे अच्छा काम करता है छुपाना या दिखाना - लेकिन निश्चित रूप से, यह विकल्प केवल इंटरनेट एक्सप्लोरर के लिए है.
breadcrumb2 छवियों के बिना मेनू को लक्षित करने के लिए हमारी नई आईडी का उपयोग किया जाता है। इस पैटर्न के साथ रखते हुए मैंने उपयोग किया है crumbs2 अव्यवस्थित सूची के लिए वर्ग के रूप में। ध्यान दें कि हम जिस कारण का उपयोग कर रहे हैं कक्षाएं इसके लिए है इन मेनू की नकल करने की सादगी, इसलिए जब आप अपने पृष्ठ पर कुछ अलग ब्रेडक्रंब चाहते हैं, तो इन कक्षाओं के साथ यह कभी भी समस्या नहीं बनेगा.
हमने रखा है .प्रथम वर्ग लेकिन इसके अतिरिक्त संलग्न .अंतिमअंतिम सूची आइटम पर वर्ग। छवियों के बिना हम नेविगेशन मेनू के प्रत्येक आइटम के लिए तीर की नकल नहीं कर सकते, इस प्रकार मैंने कुछ का उपयोग किया है कोने पर गोलाकार आकृति द्वितीयक मेनू को मसाला देने के लिए. .प्रथम वर्ग और .अंतिम हमारे मेनू के बहुत किनारों पर सीमा त्रिज्या में हेरफेर करना वास्तव में एक अच्छा वेब 2.0-दिखने वाली शैली बनाने के लिए.
सीएसएस स्लाइडिंग पृष्ठभूमि छवियाँ
कुछ सरल प्रभावों के लिए मैंने दोनों ब्रेडक्रंबों को एक साथ जोड़ा है, जब गुणों का निर्माण होता है। यह उपयोगी है क्योंकि यह न केवल कुछ स्थान बचाता है, लेकिन जब यह शैलियों को संपादित करने के लिए वापस जा रहा है अनुकूलित करने के लिए आसान है आपका अपना लुक.
दोंनो के लिए #breadcrumb तथा # breadcrumb2 मैंने सेट कर दिया है सूची-शैली: कोई नहीं; इसलिए सभी आंतरिक वस्तुओं में मार्कर नहीं होंगे। यदि आप प्रभाव पसंद करते हैं, तो आप इन्हें छोड़ सकते हैं, लेकिन मैंने पाया कि HTML चारों ओर काम करने के लिए थकाऊ हो गया है और नए आइकन बनाना बहुत आसान है। तो चलिए शुरू करते हैं हमारे साथ .टुकड़ों कक्षा.
.crumbs प्रदर्शन: ब्लॉक; । क्रेम्स ली प्रदर्शन: इनलाइन; .crumbs li.first पैडिंग-लेफ्ट: 8px; .क्रैम्ब्स ली ए, .क्रम्ब्स ली ए: लिंक, .क्रम्ब्स ली ए: विजिट किया गया रंग: # 666; प्रदर्शन क्षेत्र; बाईंओर तैरना; फ़ॉन्ट-आकार: 12 पीएक्स; मार्जिन-लेफ्ट: -13px; गद्दी: 7px 17px 11px 25px; स्थिति: रिश्तेदार; पाठ-सजावट: कोई नहीं; .crumbs li a background-image: url ('... /img/bg-crumbs.png'); बैकग्राउंड-रिपीट: नो-रिपीट; पृष्ठभूमि-स्थिति: 100% 0; स्थिति: रिश्तेदार; । क्रेम्ब्स ली ए: हॉवर रंग: # 333; पृष्ठभूमि-स्थिति: 100% -48px; कर्सर: सूचक; । क्रेम्स ली ए: सक्रिय रंग: # 333; पृष्ठभूमि-स्थिति: 100% -96px; .crumbs li.first a span height: 29px; चौड़ाई: 3 पीएक्स; बॉर्डर-लेफ्ट: 1px सॉलिड # d9d9d9; स्थिति: निरपेक्ष; शीर्ष: 0px; बायां: 0px; हम करने के लिए हमारी unordered सूची सेट करें खंड इसलिए इस क्षेत्र के आसपास और कुछ नहीं है। ध्यान दें कि सूची आइटम हैं इनलाइन प्रदर्शित किया गया जबकि प्रत्येक एंकर लिंक को फैलाने के लिए बहुत अधिक जगह दी गई है। हम चाहते हैं कि हमारे मेनू में सभी स्थान क्लिक करने योग्य हों, इसलिए इसकी आवश्यकता होती है ब्लॉक तत्वों के रूप में हमारे एंकरों का निर्माण.
मैंने एक इमेज का उपयोग किया है bg-crumbs.png पृष्ठभूमि के लिए। यह सीएसएस में एक साधारण स्प्राइट शीट के रूप में जाना जाता है, या वैकल्पिक रूप से ए फिसलते दरवाज़े तकनीक। इसका मतलब यह है कि जब उपयोगकर्ता लिंक पर क्लिक करता है या क्लिक करता है तो हम अपडेट की गई शैली को प्रदर्शित करने के लिए पृष्ठभूमि की स्थिति को शिफ्ट करते हैं। इस एकल छवि में सभी 3 डिज़ाइन हैं जिन्हें हमें विभिन्न पदों पर ब्रेडक्रंब पृष्ठभूमि बनाने की आवश्यकता है, इसलिए हम इसका उपयोग कर सकते हैं पृष्ठभूमि स्थिति उपयोगकर्ता सहभागिता पर आधारित संपत्ति को स्थानांतरित करना.
CSS3 के साथ कस्टम प्रभाव
मूल ब्रेडक्रंब डिजाइन बनाने के लिए बहुत सरल है। यह बहुत ध्यान देने योग्य है क्योंकि बहुत सीएसएस गुण आपके द्वारा कल्पना की गई तुलना में अधिक बुनियादी हैं, लेकिन अब हम केवल CSS3 के साथ इन प्रभावों को दोहराए जाने पर ध्यान देना शुरू करते हैं!
व्यक्तिगत शैली बहुत सी जगह लेती है इसलिए मैं उन्हें 2 कोड ब्लॉक में तोड़ दूंगा.
.crumbs2 प्रदर्शन: ब्लॉक; मार्जिन-बाएं: 27 पीएक्स; गद्दी: 0; पैडिंग-टॉप: 10 पीएक्स; .crumbs2 ली प्रदर्शन: इनलाइन; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: visit color: # 666; प्रदर्शन क्षेत्र; बाईंओर तैरना; फ़ॉन्ट-आकार: 12 पीएक्स; गद्दी: 7px 16px 7px 19px; स्थिति: रिश्तेदार; पाठ-सजावट: कोई नहीं; बॉर्डर: 1px ठोस # d9d9d9; बॉर्डर-राइट-चौड़ाई: 0px; .crumbs2 li a background-image: -webkit-gradient (रैखिक, बाएं नीचे, बाएं ऊपर, रंग-रोकें (0.45, आरजीबी (241,241,241)), रंग-बंद (0.73, आरजीबी (245,245,245))); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (सेंटर बॉटम, आरजीबी (241,241,241) 45%, आरजीबी (245,245,245) 73%); / * इंटरनेट एक्सप्लोरर के लिए 5.5 - 7 * / फिल्टर: प्रोगिड: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * इंटरनेट एक्सप्लोरर के लिए 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f55"; .crumbs2 li.first a बॉर्डर-टॉप-लेफ्ट-रेडियस: 5px; -मोज़-बॉर्डर-रेडियस-टॉपलेट: 5 पीएक्स; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a बॉर्डर-राइट-चौड़ाई: 1px; बॉर्डर-बॉटम-राइट-रेडियस: 5 पीएक्स; -मोज़-बॉर्डर-रेडियस-बॉटम: 5 पीएक्स; -वेबकिट-बॉर्डर-बॉटम-राइट-रेडियस: 5 पीएक्स;
.crumbs2 मेनू का उपयोग कर रहा है सीएसएस ग्रेडिएंट्स पृष्ठभूमि प्रभावों की नकल करने के लिए। यदि आप इन से अपरिचित हैं, तो मैं CSS3 के ग्रेड पर सीएसएस ट्रिक्स गाइड की अत्यधिक अनुशंसा करता हूं, जो आपको CSS3 क्लाइंट्स का कुशलतापूर्वक उपयोग करने के लिए मिलना चाहिए। उन्होंने Microsoft और ओपेरा ब्राउज़र के लिए कुछ और गुणों को शामिल किया है, लेकिन ये सभी मामलों में पूरी तरह से समर्थित नहीं हैं। मैंने उन्हें यहां डेमो कोड में शामिल नहीं किया है - लेकिन सभी विकल्पों को समझना अच्छा है.
-वेबकिट-ढाल तथा -moz रेखीय-ढाल मुख्य समाधान हैं जो अधिकांश काम करते हैं। मैंने इंटरनेट एक्सप्लोरर के पुराने संस्करणों के लिए विरासत कोड शामिल किया है, लेकिन इसकी गारंटी नहीं है हर समय ठीक से प्रदर्शित करने के लिए (हम सभी के बाद शक्तिशाली छवि प्रदान करने वाली तकनीकों का उपयोग कर रहे हैं)। ध्यान दें कि मैंने आरजीबी और हेक्स रंग कोड दोनों को पृष्ठभूमि गुणों के बीच सेट किया है। यदि आप अधिक आरामदायक हैं तो आप एक विधि या दूसरे से चिपक सकते हैं.
सीमा त्रिज्या कोड केवल हमारे माध्यमिक ब्रेडक्रंब नेविगेशन पर लागू होता है। यह हमारे पूरे ब्रेडक्रंब मेनू के ऊपर बाईं और नीचे दाईं ओर एक साफ प्रभाव देता है। बार पृष्ठ पर लगभग बंद हो जाता है - वास्तव में ब्राउज़रों पर एक शानदार प्रभाव है जो शैलियों का समर्थन करता है, लेकिन ये हमारे लिंक के लिए केवल डिफ़ॉल्ट राज्यों को कवर करते हैं। अब, हम उन चित्रों के समान होवर प्रभावों का निर्माण करते हैं, जिनका उपयोग हमने ऊपर किया है.
CSS3 की सीमाएँ और छायाएँ
जब भी कोई उपयोगकर्ता किसी लिंक पर होवर करता है तो हम कुछ चीजों को अपडेट करना चाहते हैं। पहले हमें जरूरत है हमारे सक्रिय तत्व के ऊपर और नीचे सीमा के रंगों को गहरा करें. यह चित्रों में और साथ ही होवर और सक्रिय अवस्था दोनों के लिए देखा जा सकता है.
.crumbs2 li a: hover बॉर्डर-टॉप-कलर: # c4c4c4; बॉर्डर-बॉटम-कलर: # c4c4c4; बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट बॉटम, लेफ्ट टॉप, कलर-स्टॉप (0.45, rgb (241,241,241)), कलर-स्टॉप (0.73, rgb (248,248,248))); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (सेंटर बॉटम, आरजीबी (241,241,241) 45%, आरजीबी (248,248,248) 73%); / * इंटरनेट एक्सप्लोरर के लिए 5.5 - 7 * / फिल्टर: प्रोगिड: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * इंटरनेट एक्सप्लोरर के लिए 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f11"; रंग: # 333; -मोज़-बॉक्स-छाया: 0px 2px 2px # e8e8e8; -webkit- बॉक्स-छाया: 0px 2px 2px # e8e8e8; बॉक्स-छाया: 0px 2px 2px # e8e8e8; .crumbs2 li a: सक्रिय सीमा-शीर्ष-रंग: # c4c4c4; बॉर्डर-बॉटम-कलर: # c4c4c4; बैकग्राउंड-इमेज: -webkit-gradient (लीनियर, लेफ्ट बॉटम, लेफ्ट टॉप, कलर-स्टॉप (0.45, rgb (224,224,224)), कलर-स्टॉप (0.73, rgb (235,235,235)); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (सेंटर बॉटम, आरजीबी (224,224,224) 45%, आरजीबी (235,235,235) 73%); / * इंटरनेट एक्सप्लोरर के लिए 5.5 - 7 * / फिल्टर: प्रोगिड: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * इंटरनेट एक्सप्लोरर 8 के लिए * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -मोज़-बॉक्स-छाया: -1px 1px 1px 0px #dadada inset; रंग: # 333;
मैं ठीक उसी क्रमिक कोड का उपयोग कर रहा हूं जैसा कि हमने ऊपर प्रयोग किया है, लेकिन इस बार रंग बहुत भिन्न हैं यदि आपने हमारे RGB मानों पर गौर किया है। प्रत्येक राज्य पाठ का रंग काला कर देगा # 333, अभी तक अन्य विवरणों को उपयोगकर्ता आज्ञाओं के अनुरूप करने के लिए थोड़ा बदल दिया गया है.
होवर पर आप देखेंगे a चमकदार उभरा हुआ प्रभाव जो साथ युग्मित हो अंधेरे की सीमा पेज पॉपअप शैलियों देता है। यदि आप क्लिक करते हैं और पकड़ते हैं तो आप उस सक्रिय स्थिति में पहुंच जाएंगे, जिसमें a काले रंग की पृष्ठभूमि ढाल. यह प्रभाव बटन को देखने का कारण बनता है कि वे वास्तव में हैं “दब गया” पेज में.
हम भी आवेदन कर रहे हैं डब्बे की छाया नए CSS3 चश्मा से गुण. -वेबकिट, -moz, और डिफ़ॉल्ट शैलियों का उपयोग उसी सेटिंग्स के साथ किया जाता है। होवरिंग प्रदर्शित करता है a हल्की छाया चयनित लिंक के नीचे से बाहर आ रहा है। जब सक्रिय छाया ऊपर, दाईं और नीचे की सीमाओं पर बनाई जाएगी। इस आशय के साथ बनाया जाता है इनसेट प्रत्येक बॉक्स-शैडो प्रॉपर्टी लाइन के अंत में कीवर्ड जोड़ा गया। फिर से CSS ट्रिक्स आपका सबसे अच्छा दोस्त है यहाँ बॉक्स-शैडो पर एक बेहतरीन लेख है, क्योंकि यह वाक्य रचना और CSS3 में इसके उचित उपयोग के बारे में बात करता है।.
बोनस: अधिक शैलियाँ
ट्यूटोरियल कोड के अतिरिक्त मैंने अनुकूलित रंग योजनाओं के साथ अतिरिक्त पृष्ठभूमि चित्र शामिल किए हैं। मैंने मूल पृष्ठभूमि से नमूना लिया है और एडोब फोटोशॉप का उपयोग करके कुछ बदलाव किए हैं जो आप अपनी वेबसाइट पर लागू कर सकते हैं.
इन स्रोत फ़ाइल में बोनस फ़ाइलें शामिल हैं जिसे आप नीचे दिए गए अनुभाग में .zip संग्रह प्रारूप में डाउनलोड कर सकते हैं.
आप ऊपर दी गई छवि को देख सकते हैं कि मैं किस बारे में बात कर रहा हूं। यदि आपको एक विशिष्ट रंग योजना पॉप ओपन की आवश्यकता है फ़ोटोशॉप> छवि> समायोजन> ह्यू / संतृप्ति अपने स्वयं के टेम्पलेट से मिलान करने के लिए रंग योजना को संशोधित करने के लिए याद रखें Colorize विकल्प की जाँच करें यदि रंग बिल्कुल नहीं बदला तो Hue / Saturation फलक में.
निष्कर्ष
इस ट्यूटोरियल को आपको कुछ नई CSS3 तकनीकों से परिचित होना चाहिए। हमने दो शानदार ब्रेडक्रंब मेनू बनाए हैं जो एक समान तरीके से स्टाइल किए गए हैं और इसे इस तरह से बनाया गया है कि यह पुराने ब्राउज़रों में इनायत से नीचा दिखा सकता है। इसके साथ ही मैंने अपना डेमो कोड और कुछ बोनस चित्र आपके साथ खेलने की पेशकश की है.
क्या आप विशेष रूप से हमारे द्वारा निर्मित शैलियों को पसंद करते हैं? या हो सकता है कि आपके पास ट्यूटोरियल कोड को बेहतर बनाने के बारे में प्रश्न या विचार हों? कृपया नीचे चर्चा क्षेत्र में हमारे साथ अपने विचार साझा करें, और स्रोत फ़ाइलों को डाउनलोड करना न भूलें ताकि आप डेमो के साथ खेल सकें!
अधिक CSS3 के ट्यूटोरियल
अधिक CSS3 के लिए तरस? नीचे आप CSS3 को सैद्धांतिक और व्यावहारिक रूप से समझने के लिए हमारे लेख हैं!
- CSS3: एक आरएसएस फ़ीड लोगो बनाएँ
- CSS3: एक खोज फ़ील्ड बनाएँ
- CSS3: एक AJAX संपर्क फ़ॉर्म बनाएँ
- CSS3: HTML5 / CSS3 वेबपृष्ठों का निर्माण
