टैब्स के बाहर

गोल कोनों को अब सीमा-त्रिज्या के साथ तुच्छ रूप से किया जाता है। सीमा-त्रिज्या के लिए धन्यवाद, हम जरूरत के अनुसार "फसल" ब्लॉक कर सकते हैं, लेकिन क्या होगा अगर हमें "बाहरी" कोने को गोल करने की आवश्यकता है? समस्या को रेखीय रूप से समझाना आसान है:


ऊपरी कोने एक समस्या नहीं हैं, लेकिन निचले वाले अधिक जटिल हैं। बिल्ली के नीचे हम बताते हैं कि कैसे।

• उदाहरण देखें
• संग्रह डाउनलोड करें

शुद्ध एचटीएमएल

वेबसाइट लेआउट में, आप लगभग किसी भी दृश्य प्रभाव पर ठोकर खा सकते हैं। सबसे खराब स्थिति में, आपको उन्हें प्राप्त करने के लिए छवियों का उपयोग करना होगा। इस मामले में हमारा काम, हमेशा की तरह, उनका उपयोग नहीं करना है (क्योंकि यह जल्दी से भरी हुई है, सस्ती है, अद्यतन करने में आसान है)। यहाँ हमारा मार्कअप है:

<ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#three">Four</a></li> </ul> 

वर्ग का नाम "सक्रिय" सक्रिय टैब को इंगित करता है।

यह कैसे काम करता है

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

अब बिना कोड की समीक्षा के प्रक्रिया को चरण दर चरण देखें।

1) प्रारंभिक अवस्था

सूची आइटम आमतौर पर एक ब्लॉक आइटम हैं और एंकर एक लोअरकेस आइटम है। तो हमें ऐसी छाल मिलती है।

2) हम एक पंक्ति में बनाते हैं

फ्लोट असाइन करना: सूची के तत्वों के लिए छोड़ दिया, हम उन्हें एक पंक्ति में पंक्तिबद्ध करते हैं और अंदर लंगर की चौड़ाई को छोटा करते हैं। वास्तव में - सामग्री की चौड़ाई के लिए।

3) हम एक ही आकार में लाते हैं

अपने आप से, सूची आइटम में पैडिंग या मार्जिन (मार्जिन या पैडिंग) नहीं है, इसलिए सूची आइटम और उनके भीतर नेस्ट किए गए एंकर का आकार समान है।

4) एक टैब पर विचार करें

आइए एक टैब पर करीब से नज़र डालें

5) सर्किलों

हम टैब के निचले किनारे पर बाईं और दाईं ओर मंडलियों को स्थित करने के लिए चार में से दो छद्म तत्वों का उपयोग करते हैं।

6) आयतें

शेष दो छद्म तत्वों का उपयोग करके, हम छोटे आयत बनाएंगे।

7) टैब और सामग्री को रंगीन करें

सक्रिय टैब और सामग्री में एक सामान्य पृष्ठभूमि का रंग होता है।

8) छद्म तत्वों को रंग दें

आयताकार सक्रिय टैब के रंग के अनुरूप होते हैं, मंडलियां उनके पीछे की पृष्ठभूमि के रंग के अनुरूप होती हैं।

9) अतिव्यापी तत्व

जेड-इंडेक्स का उपयोग करते हुए, हम सर्कल के साथ ओवरलैपिंग आयताकार प्रदान करते हैं।

10) कोई फ्रेम नहीं

फ्रेम सिर्फ चित्रण में था, वास्तव में यह कहीं इस तरह दिखेगा।

११) खत्म

हम बाहरी टैब पर एक ही सिद्धांत लागू करते हैं और सीमा-त्रिज्या का उपयोग करके शीर्ष कोनों को गोल करते हैं। हो गया।

सीएसएस

और यह एक विशाल सीएसएस ब्लॉक है, लेकिन मैंने इस पर विस्तार से टिप्पणी की ताकि यह समझने योग्य हो।

 .tabs li { /*     */ float: left; /*          */ position: relative; } .tabs a { /*         */ float: left; padding: 10px 40px; text-decoration: none; /*    */ color: black; background: #ddc385; /*    */ -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; } .tabs .active { /*      */ z-index: 3; } .tabs .active a { /*    */ background: white; color: black; } .tabs li:before, .tabs li:after, .tabs li a:before, .tabs li a:after { /*       */ position: absolute; bottom: 0; } /*  ,      ,    */ .tabs li:last-child:after, .tabs li:last-child a:after, .tabs li:first-child:before, .tabs li:first-child a:before, .tabs .active:after, .tabs .active:before, .tabs .active a:after, .tabs .active a:before { content: ""; } .tabs .active:before, .tabs .active:after { background: white; /*    */ z-index: 1; } /*  */ .tabs li:before, .tabs li:after { background: #ddc385; width: 10px; height: 10px; } .tabs li:before { left: -10px; } .tabs li:after { right: -10px; } /*  */ .tabs li a:after, .tabs li a:before { width: 20px; height: 20px; /*  …  …  */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #222; /*    */ z-index: 2; } .tabs .active a:after, .tabs .active a:before { background: #ddc385; } /*           */ .tabs li:first-child.active a:before, .tabs li:last-child.active a:after { background: #222; } .tabs li a:before { left: -20px; } .tabs li a:after { right: -20px; } 

वह सब है!

• उदाहरण देखें
• संग्रह डाउनलोड करें

यह IE9 और उच्चतर सहित सभी आधुनिक ब्राउज़रों में काम करेगा। पुराने ब्राउज़रों में यह घटता है (कोई गोल कोनों नहीं होगा)।

हल्के गिरावट में सुधार

यह अध्याय उन दुर्भाग्यशाली लोगों के लिए एक अनुवादक द्वारा लिखा गया था जो क्लाइंट को यह नहीं समझा सकते थे कि IE में गोल कोनों की अनुपस्थिति लेआउट डिजाइनर की ओर से व्यक्तिगत अपमान नहीं है। जितना संभव हो उतना हल्के गिरावट में सुधार करें।

• उदाहरण देखें
• संग्रह डाउनलोड करें
• उसी आर्काइव का एक और लिंक

अतिरिक्त सीएसएस:

 <style> /*   */ /*ie 7*/ *+html .tabs li{ background: url("img/tabs.png") 0 -37px no-repeat; } *+html .tabs li a{ background: url("img/tabs.png") 100% -37px no-repeat; padding: 10px 40px 10px 20px; margin:0 0 0 20px; } *+html .tabs li.active{ background:url("img/tabs.png") 0 0 no-repeat; } *+html .tabs li.active a{ background:url("img/tabs.png") 100% 0 no-repeat; } *+html .tabs li{ zoom:expression(function(t) { t.runtimeStyle.zoom = 1; var before = document.createElement('span'); var after = document.createElement('span'); before.className = 'before-fix-for-ie'; after.className = 'after-fix-for-ie'; t.appendChild(before); t.appendChild(after); }(this)); } /*ie 6*/ * html .tabs li{ background:url("img/tabs.png") 0 -37px no-repeat; } * html .tabs li a{ background:url("img/tabs.png") 100% -37px no-repeat; padding: 10px 40px 10px 20px; margin:0 0 0 20px; } * html .tabs li.active{ background-position:0 0; } * html .tabs li.active a{ background:url("img/tabs.png") 100% 0 no-repeat; } * html .tabs li{ zoom:expression(function(t) { t.runtimeStyle.zoom = 1; var before = document.createElement('span'); var after = document.createElement('span'); before.className = 'before-fix-for-ie'; after.className = 'after-fix-for-ie'; t.appendChild(before); t.appendChild(after); }(this)); } /* */ .tabs li .before-fix-for-ie{ position:absolute; overflow:hidden; font-size:0; line-height:0; top:27px; left:-10px; width:10px; height:10px; background:url("img/left.png") 0 0 no-repeat; } * html .tabs li .before-fix-for-ie{ background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/left.png', sizingMethod='image'); } .tabs li.active .before-fix-for-ie{ background:url("img/active-left.png") 0 0 no-repeat; } * html .tabs li.active .before-fix-for-ie{ background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/active-left.png', sizingMethod='image'); } .after-fix-for-ie{ position:absolute; overflow:hidden; font-size:0; line-height:0; top:27px; right:-10px; width:10px; height:10px; background:url("img/right.png") 0 0 no-repeat; } * html .tabs li .after-fix-for-ie{ background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/right.png', sizingMethod='image'); } .tabs li.active .after-fix-for-ie{ background:url("img/active-right.png") 0 0 no-repeat; } * html .tabs li.active .after-fix-for-ie{ background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/active-right.png', sizingMethod='image'); } </style> <!--[if IE 8]> <style> /*ie 8*/ .tabs li{ background:transparent url("img/tabs.png") 0 -37px no-repeat; } .tabs li a{ background:transparent url("img/tabs.png") 100% -37px no-repeat; padding: 10px 40px 10px 20px; margin:0 0 0 20px; } .tabs li.active{ background:transparent url("img/tabs.png") 0 0 no-repeat; } .tabs li.active a{ background:transparent url("img/tabs.png") 100% 0 no-repeat; } body .tabs li:before{ content:"."; text-indent:-9000px; overflow:hidden; height:10px; width:10px; font-size:0; line-height:0; display:block; position:absolute; top:27px; left:-10px; z-index:10; zoom:1; background:transparent url("img/left.png") 0 0 no-repeat; } body .tabs li:after{ content:"."; text-indent:-9000px; overflow:hidden; height:10px; width:10px; font-size:0; line-height:0; display:block; position:absolute; top:27px; right:-10px; z-index:10; zoom:1; background:transparent url("img/right.png") 0 0 no-repeat; } body .tabs li.active:before{ content:"."; text-indent:-9000px; overflow:hidden; height:10px; width:10px; font-size:0; line-height:0; display:block; position:absolute; top:27px; left:-10px; z-index:10; zoom:1; background:transparent url("img/active-left.png") 0 0 no-repeat; } body .tabs li.active:after{ content:"."; text-indent:-9000px; overflow:hidden; height:10px; width:10px; font-size:0; line-height:0; display:block; position:absolute; top:27px; right:-10px; z-index:10; zoom:1; background:transparent url("img/active-right.png") 0 0 no-repeat; } </style> <![endif]--> 

Ie8 के लिए, मुझे सशर्त टिप्पणियों द्वारा हाइलाइट किए गए एक अलग ब्लॉक में सीएसएस डालना था, क्योंकि मुझे ऐसा कोई हैक नहीं मिला जो ie8 के लिए काम करता हो और ie9 के लिए काम नहीं करेगा। अगर किसी को यह पता है, तो कृपया साझा करें।

मैंने विवरण में जाने की आवश्यकता नहीं देखी, लेकिन यदि कोई आवश्यकता है, तो मुझे किसी भी बिंदु की व्याख्या करने में खुशी होगी जो प्रश्न उठा सकता है।

मुझे उम्मीद है कि जोड़ उपयोगी होगा।