नमस्कार प्रिय हब्रदुग! आज हम CSS3 वॉल्यूमेट्रिक बटन बनाना सीखेंगे! वे अपनी प्रीमियम पिक्सेल वेबसाइट के लिए ओरमैन क्लार्क के लोकप्रिय पीएसडी फ़्रीबीज़ पर आधारित हैं। हम कम से कम HTML कोड के साथ CSS का उपयोग करके इन बटनों की एक प्रति बनाने का प्रयास करेंगे।

पूर्वावलोकन

लेखक का ध्यान दें: ओरमैन ने कृपया हमें अपने किसी भी फ्रीकोड को एनकोड करने की अनुमति दी है, इसलिए भविष्य में अधिक ट्यूटोरियल की उम्मीद करें!

देखें डेमो

चरण 1: एक HTML दस्तावेज़ बनाएँ

हम एक नया HTML दस्तावेज़ बनाकर शुरू करेंगे। यह एचटीएमएल 5 बॉयलरप्लेट पर आधारित होगा ताकि हमारे पास एक सुविधाजनक शुरुआती बिंदु हो। अब हम लिंक के साथ एक सूची जोड़ देंगे। यह मूल रूप से यह है, अतिरिक्त div और स्पैन का उपयोग नहीं करने के लिए CSS3 का धन्यवाद।
सूची में प्रत्येक आइटम के लिए, हम 'बटन' की एक कक्षा प्रदान करते हैं। और जब से ओरमैन ने अलग-अलग रंगों का इस्तेमाल किया है, हम प्रत्येक बटन को एक वर्ग के रूप में अपना रंग सौंपेंगे।

<ul class="buttons"> <li><a href="#" class="button gray">Download</a></li> <li><a href="#" class="button pink">Download</a></li> <li><a href="#" class="button blue">Download</a></li> <li><a href="#" class="button green">Download</a></li> <li><a href="#" class="button turquoise">Download</a></li> <li><a href="#" class="button black">Download</a></li> <li><a href="#" class="button darkgray">Download</a></li> <li><a href="#" class="button yellow">Download</a></li> <li><a href="#" class="button purple">Download</a></li> <li><a href="#" class="button darkblue">Download</a></li> </ul>

हमें इस स्तर पर इसकी आवश्यकता है

चरण 2: बुनियादी सीएसएस नियम

इससे पहले कि आप ग्रेडिएंट्स, गोल कोनों आदि से निपटें, आपको बुनियादी नियमों का ध्यान रखना होगा। कुछ खास नहीं, सादे CSS2:

 ul { list-style: none; } a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; }

अब विभिन्न रंगों के लिए नियम लागू करें। उदाहरण के लिए, ग्रे के लिए। अन्य सभी रंगों को डेमो में देखा जा सकता है।

 /*  */ .gray, .gray:hover { color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; .gray:hover { background: #e2e2e2; } }

आपको कुछ ऐसा मिलना चाहिए। यह 2008 के यार्ड में बहुत ठोस लग रहा है

चरण 3: डबल फ्रेम्स!

यदि आप अंतिम परिणाम को ध्यान से देखते हैं, तो आप देखेंगे कि एक पतली रेखा बटन की पूरी परिधि के आसपास स्थित है। इस प्रभाव को लागू करने के लिए, हम छद्म तत्वों का उपयोग करेंगे : पहले और बाद में ।

 a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; } a.button:before, a.button:after { content: ''; position: absolute; left: -1px; height: 25px; width: 80px; bottom: -1px; } a.button:before { height: 23px; bottom: -4px; border-top: 0; }

रंग जोड़ते समय, बटन बहुत बेहतर दिखते हैं।

 /*  */ .gray, .gray:hover { color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; } .gray:before, .gray:after { border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; } .gray:hover { background: #e2e2e2; }

चरण 4: CSS3 के जादू का एक सा

अब CSS3 के तत्काल भाग के लिए नीचे आते हैं। आइए शुरू करते हैं गोल कोनों से:

 a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

स्वाभाविक रूप से :: पहले और : तत्वों को भी गोल कोनों की आवश्यकता होती है।

 a.button:before, a.button:after { content: ''; position: absolute; left: -1px; height: 25px; width: 80px; bottom: -1px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.button:before { height: 23px; bottom: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px #bfbfbf; box-shadow: 0 1px 1px 0px #bfbfbf; }

अंत में, हम टेक्स्ट के लिए ग्रेडिएंट्स, इनर शैडो और शैडो लगाते हैं। IE6 में बग से बचने के लिए, राज्य जोड़ें: दौरा किया।

 /*  */ a.gray, a.gray:hover, a.gray:visited { color: #555; border-bottom: 4px solid #b2b1b1; text-shadow: 0px 1px 0px #fafafa; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2)); background: -moz-linear-gradient(top, #eee, #e2e2e2); box-shadow: inset 1px 1px 0 #f5f5f5; } .gray:before, .gray:after { border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; } .gray:hover { background: #e2e2e2; background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee)); background: -moz-linear-gradient(top, #e2e2e2, #eee); }

हमारा अंतिम परिणाम इतना बुरा नहीं है!

चरण 5: हम कुछ भी नहीं भूल गए हैं?

अपने डिजाइन में, ओरमैन ने भी राज्य प्रदान किया: सक्रिय। इसलिए, हमें बस इसे अपने कोड में जोड़ना होगा।
हम विभिन्न रंगों के नियमों के तहत कोड के इस हिस्से को रखेंगे।

 /* ACTIVE STATE */ a.button:active { border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); } a.button:active:before, a.button:active:after { border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

यहाँ हमें क्या मिलता है:

चरण 6 (वैकल्पिक): पुराने ब्राउज़र

इसलिए, हमने अच्छे CSS3 बटन बनाए हैं जो सभी आधुनिक ब्राउज़रों में काम करते हैं। लेकिन इंटरनेट एक्सप्लोरर 8 और उससे नीचे के बारे में क्या। इन ब्राउज़रों के पास पाठ या ग्रेडिएंट के लिए छाया के लिए कोई समर्थन नहीं है।
इस समस्या को हल करने के लिए, हम जावास्क्रिप्ट लाइब्रेरी Modernizr का उपयोग कर सकते हैं, जो यह निर्धारित कर सकती है कि आपका ब्राउज़र CSS3 और HTML5 का समर्थन करता है या नहीं। पुस्तकालय समस्याओं को ठीक नहीं करता है, यह केवल एक वैकल्पिक शैली प्रदान करता है।
सबसे पहले, हम अपने खुद के संस्करण का निर्माण करेंगे, ताकि वे विशाल जावास्क्रिप्ट को न ले जा सकें। यह उनकी वेबसाइट पर किया जा सकता है। एक बार जब हमने अपने दस्तावेज़ में जावास्क्रिप्ट सम्मिलित कर लिया है, तो वैकल्पिक शैली के लिए विभिन्न वर्गों के नियमों को परिभाषित करना आवश्यक है। हम उन ब्राउज़र के लिए छवियों का उपयोग करेंगे जो सीमा-त्रिज्या और ग्रेडिएंट का समर्थन नहीं करते हैं।

 /* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited { background: url(images/sprite.png) no-repeat 0 0px; height: 32px; width: 82px; } .no-cssgradients a.button:hover, .no-borderradius a.button:hover, .no-generatedcontent a.button:hover { background: url(images/sprite.png) no-repeat 0 -32px; } .no-cssgradients a.button:active, .no-borderradius a.button:active, .no-generatedcontent a.button:active { background: url(images/sprite.png) no-repeat 0 -64px; bottom: 0; line-height: 35px; } .no-cssgradients a.gray, .no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover { background-position-x: 0; } .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover { background-position-x: -82px; } .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover { background-position-x: -164px; } .no-cssgradients a.green,, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover { background-position-x: -246px; } .no-cssgradients a.turquoise, .no-cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover { background-position-x: -328px; } .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a.black:hover { background-position-x: -410px; } .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover { background-position-x: -492px; } .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover { background-position-x: -574px; } .no-cssgradients a.purple, .no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover { background-position-x: -656px; } .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no-cssgradients a.darkblue:hover { background-position-x: -738px; } .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a.button:before, .no-cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:before, .no-borderradius a.button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before, .no-generatedcontent a.button:after { border: 0; }

निष्कर्ष

इस प्रकार, हमें अच्छा क्रॉस-ब्राउज़र CSS3 बटन मिला। आप पा सकते हैं कि 10 बटन के लिए बहुत अधिक कोड है, लेकिन यह सिर्फ एक प्रदर्शन है जो CSS3 कर सकता है या नहीं। आप इसके साथ कुछ भी कर सकते हैं! मुझे आशा है कि मेरा पाठ उपयोगी था, आपके ध्यान के लिए धन्यवाद!

DEMO | स्रोत | JSFIDDLE

PS खुशी के साथ मैं अनुवाद के बारे में सभी टिप्पणियों को सुनने के लिए तैयार हूं।

CSS3 का उपयोग करके 3 डी बटन