मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
शक्यता
मानक बटणे, टॅगद्वारे तयार केले
तांदूळ. 1. मूळ आणि सुधारित बटण
बटणाचे स्वरूप मूलत: बदलण्यासाठी, आपण प्रतिमा वापरू शकता, परंतु तुलनेत CSS क्षमता 3 हा पर्याय आता घरगुती वाटतो.
मी ब्राउझरमधील मूळ बटण आधार म्हणून घेईन, ज्यामध्ये रेखीय आहे अनुलंब ग्रेडियंटआणि गोलाकार कडा.
सर्वात सोपा मार्ग म्हणजे कोपऱ्यांवर गोल करणे, ज्यासाठी आम्ही वापरतो सीमा-त्रिज्या गुणधर्म, त्यास इच्छित गोलाकार त्रिज्या देऊन. नेहमीप्रमाणे, हे सर्व ब्राउझरमध्ये कार्य करत नाही, म्हणून तुम्हाला संपूर्ण संच जोडावा लागेल. परिणाम खालीलप्रमाणे आहे.
Moz-बॉर्डर-त्रिज्या: 5px; /* फायरफॉक्स */ -वेबकिट-बॉर्डर-त्रिज्या: 5px; /* सफारी 4 */ सीमा-त्रिज्या: 5px; /* IE 9, Safari 5, Chrome */
मध्ये बटणांचा प्रकार भिन्न ब्राउझरअंजीर मध्ये दर्शविले आहे. 2.
तांदूळ. 2. गोलाकार कोपऱ्यांसह बटणे
सर्वसाधारणपणे, सर्वकाही अपेक्षित आहे. IE च्या जुन्या आवृत्त्या CSS 3 ला समर्थन देत नाहीत, इतर मला आवश्यक असलेले कोपरे योग्यरित्या तयार करतात. काही कारणास्तव, ऑपेरा इतर ब्राउझरप्रमाणे पार्श्वभूमी डिफॉल्टनुसार प्रदर्शित करत नाही, परंतु ऑपेरा स्वतंत्रपणे चर्चा केली जाईल.
आता मजेशीर भाग म्हणजे उभ्या रेषीय ग्रेडियंट बनवणे. हे करण्यासाठी, प्रत्येक ब्राउझरसाठी स्वतंत्र शैली पुन्हा वापरल्या जातील.
पार्श्वभूमी: -moz-रेखीय-ग्रेडियंट(#00BBD6, #EBFFFF);
ग्रेडियंट सूचित करतो प्रारंभ बिंदू, ग्रेडियंट कोन, प्रारंभ आणि शेवटचा रंग. आमच्या बाबतीत, जेव्हा ग्रेडियंट वरपासून खालपर्यंत अनुलंब जातो, तेव्हा फक्त रंग सेट करणे पुरेसे आहे बाकीचे पॅरामीटर्स डीफॉल्टनुसार वापरले जातात;
क्रोम, सफारी
पार्श्वभूमी: -वेबकिट-ग्रेडियंट(रेखीय, 0 0, 0 100%, पासून(#00BBD6), ते(#EBFFFF));
येथे तुम्ही ग्रेडियंटचा प्रकार (रेषीय), ग्रेडियंट लागू करण्यासाठी प्रारंभ बिंदू (डावीकडे) निर्दिष्ट करा वरचा कोपरा), शेवटचा बिंदू (खालचा डावा कोपरा), आणि सुरुवातीचे आणि शेवटचे रंग.
फिल्टर: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");
IE ब्राउझर त्याच्या स्वत: च्या मार्गाने जातो विविध प्रभावग्रेडियंटसह फिल्टर गुणधर्म लागू करते. येथे सर्वकाही अधिक क्षुल्लक आहे, फक्त ग्रेडियंटचे प्रारंभ आणि शेवटचे रंग लिहिलेले आहेत.
ऑपेरा विश्रांती घेत आहे; ग्रेडियंट अद्याप लागू केले गेले नाहीत.
आम्ही ब्राउझर, कोपरे आणि ग्रेडियंटसाठी सर्व गुणधर्म एकत्र आणतो (उदाहरण 1).
उदाहरण 1. सह बटणे रेखीय ग्रेडियंट
तो जोरदार छान बाहेर वळले (Fig. 3), पण देखील आहे स्पष्ट फरकमूळ बटणावरून - ते बोर्डसारखे सपाट दिसते.
तांदूळ. 3. ग्रेडियंटसह बटण दृश्य
आपण ग्रेडियंट वापरून पुन्हा इच्छित आकाराचे बटण बनवू शकता, रंगांसह "खेळत". दोन ग्रेडियंट मूल्ये यापुढे पुरेशी नाहीत, सुदैवाने फायरफॉक्स आणि सफारी एक उपाय देतात.
पार्श्वभूमी: -moz-रेखीय-ग्रेडियंट(#D0ECF4, #5BC9E1, #D0ECF4);
दोन मूल्यांऐवजी, इच्छित रंगांची संख्या घाला, ग्रेडियंट एका रंगातून दुसऱ्या रंगात सहजतेने संक्रमण करेल.
क्रोम, सफारी
पार्श्वभूमी: -वेबकिट-ग्रेडियंट(रेखीय, 0 0, 0 100%, पासून(#D0ECF4), ते(#D0ECF4), रंग-स्टॉप(0.5, #5BC9E1));
कलर-स्टॉप पॅरामीटर बिंदू निर्दिष्ट करते ज्यावर नवीन रंग लागू केला जाईल. मूल्य 0 ते 1 पर्यंत आहे.
उदाहरण 2: वर्धित ग्रेडियंटसह बटणे
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. 4.
तांदूळ. 4. ग्रेडियंट, कोणत्या प्रकारचे ग्रेडियंट आवश्यक आहे
त्याचप्रमाणे, तुम्ही बटणावर किंवा इतर घटकांवर (चित्र 5) इतर कोणतेही ग्रेडियंट तयार करू शकता. पण हे स्वतः करा, म्हणूनच मी ते कार्यशाळेत जोडले.
तांदूळ. 5. अशी वेगवेगळी बटणे
मी सारांश देतो. आपण प्रतिमांशिवाय ग्रेडियंट आणि गोलाकार कोपऱ्यांसह बटण बनवू शकता. तथापि, ब्राउझरमध्ये संभ्रम आणि अशक्तपणा आहे. ओपेरा ग्रेडियंटसह अजिबात कार्य करू शकत नाही IE 9 मध्ये कोपऱ्यांसह ग्रेडियंट एकत्र करताना एक अप्रिय बग आहे (चित्र 6).
तांदूळ. 6. IE 9 मधील कोपऱ्यांवर पार्श्वभूमी आच्छादित करा
बरं, आतासाठी आम्ही "सुंदर गोष्टी" बनवू फायरफॉक्स ब्राउझर, सफारी आणि क्रोम.
आपण बटणे पाहण्यापूर्वी, त्या सर्वांसाठी सामान्य सेटिंग्ज पाहू.
HTML
साठी बटणे खूप वापरली जातील साधे HTMLकोड:
सदस्यता घ्या
CSS
तसेच सर्व बटणे असतील सामान्य सेटिंग्जमथळा मजकूर आणि निवड रद्द करण्यासाठी:
बटण टेक्स्ट ( फॉन्ट: 18px/1.5 Helvetica, Arial, sans-serif; रंग: #fff; ) a (रंग: #fff; मजकूर-सजावट: काहीही नाही;)
सामान्यतः, वापरकर्त्याला पुरेशी अपेक्षा असते मऊ प्रभावजेव्हा तुम्ही लिंक किंवा बटणावर माउस फिरवा. आणि आमच्या बाबतीत, बटण आकार बदलते - ते वाढते, अतिरिक्त संदेश दर्शविते.
मूलभूत CSS कोड
सुरुवातीला, आम्हाला फक्त बटणाचा आकार आणि रंग देणे आवश्यक आहे. 28px ची उंची आणि 115px रुंदी परिभाषित करा, समास आणि पॅडिंग जोडा आणि बटणाला हलकी सीमा देखील द्या.
#button1 (पार्श्वभूमी: #6292c2; सीमा: 2px solid #eee; उंची: 28px; रुंदी: 115px; समास: 50px 0 0 50px; पॅडिंग: 0 0 0 7px; ओव्हरफ्लो: लपलेले; डिस्प्ले: ब्लॉक; )
CSS3 प्रभाव
काही लोकांना ते आवडते तेव्हा साधे बटणपुरेशी सोबत मोठा कोड CSS. IN हा विभागदिले जातात अतिरिक्त शैलीआमच्या बटणासाठी CSS3. आपण त्यांच्याशिवाय करू शकता, परंतु ते बटण अधिक आधुनिक स्वरूप देतात.
फ्रेमच्या कोपऱ्यांना गोल करा आणि ग्रेडियंट जोडा. हे गडद ग्रेडियंटसह थोडी युक्ती वापरते जे कोणत्याही पार्श्वभूमी रंगाशी संवाद साधते.
/*गोलाकार कोपरे*/ -वेबकिट-बॉर्डर-त्रिज्या: 15px;
-moz-बॉर्डर-त्रिज्या: 15px;
सीमा-त्रिज्या: 15px; /*ग्रेडियंट*/ पार्श्वभूमी-प्रतिमा: -वेबकिट-लिनियर-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));पार्श्वभूमी-प्रतिमा: -moz-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
पार्श्वभूमी-प्रतिमा: -o-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
पार्श्वभूमी-प्रतिमा: -ms-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS ॲनिमेशन
आता इन्स्टॉल करू CSS संक्रमण. ॲनिमेशन कोणत्याही गुणधर्म बदलांसाठी वापरले जाईल आणि अर्धा सेकंद टिकेल.
माऊस ओव्हर
तुम्ही बटणावर माउस फिरवता तेव्हा ते विस्तृत करण्यासाठी एक शैली जोडणे बाकी आहे. संपूर्ण संदेश प्रदर्शित करण्यासाठी बटण 230px रुंद असणे आवश्यक आहे.
#button1:होवर (रुंदी: 230px; )
CSS3 प्रभाव
रंग टोनचा साधा बदल अतिशय साधे आणि लोकप्रिय CSS प्रभाव
/*गोलाकार कोपरे*/ -वेबकिट-बॉर्डर-त्रिज्या: 10px;
-moz-बॉर्डर-त्रिज्या: 15px;
-moz-बॉर्डर-त्रिज्या: 10px;
सीमा-त्रिज्या: 10px;
पार्श्वभूमी-प्रतिमा: -o-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*ग्रेडियंट*/ पार्श्वभूमी-प्रतिमा: -वेबकिट-लिनियर-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
पार्श्वभूमी-प्रतिमा: -moz-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
पार्श्वभूमी-प्रतिमा: -o-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
माऊस ओव्हर
पार्श्वभूमी-प्रतिमा: -ms-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));. /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
बॉक्स-छाया: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS3 प्रभाव
ॲनिमेशन व्यावहारिकदृष्ट्या मागील उदाहरणापेक्षा वेगळे नाही. /*संक्रमण*/ -वेबकिट-संक्रमण: सर्व 0.5s सहज;-moz-संक्रमण: सर्व 0.5s सहज;
-o-संक्रमण: सर्व 0.5s सहज;
-moz-बॉर्डर-त्रिज्या: 15px;
-ms-संक्रमण: सर्व 0.5s सहज;
संक्रमण: सर्व 0.5s सहज;
पार्श्वभूमी-प्रतिमा: -o-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
आता पार्श्वभूमी प्रतिमा हलवण्याची वेळ आली आहे. सुरुवातीची स्थिती "0 0" होती. दुसरा पॅरामीटर 150px वर सेट करा. क्षैतिजरित्या शिफ्ट करण्यासाठी, आपल्याला प्रथम पॅरामीटर बदलण्याची आवश्यकता आहे.
#button3:होवर (पार्श्वभूमी-स्थिती: 0px 150px; )
3D बटण दाबा सिम्युलेशन
आमच्या धड्यातील शेवटचे उदाहरण म्हणजे माउस कर्सर फिरवताना बटण दाबण्याचे अनुकरण करण्याच्या लोकप्रिय 3D पद्धतीबद्दल. या केससाठी ॲनिमेशन इतके सोपे आहे की त्याला CSS संक्रमणाचीही आवश्यकता नाही. पण अंतिम परिणाम खूप प्रभावी आहे.
माऊस ओव्हर
आमच्या बटणासाठी CSS कोड.
#button4 ( पार्श्वभूमी: #5c5c5c; मजकूर-छाया: 0px 2px 0px rgba(0, 0, 0, 0.3); फॉन्ट-आकार: 22px; उंची: 58px; रुंदी: 155px; समास: 50px 0 0 0; ओव्हरफ्लो: 50px ओव्हरफ्लो डिस्प्ले: मजकूर-संरेखित: 58px;
CSS3 प्रभाव
ॲनिमेशन व्यावहारिकदृष्ट्या मागील उदाहरणापेक्षा वेगळे नाही. या प्रकरणात CSS3 हा आता चांगला पर्याय नाही. प्रभाव साध्य करण्यासाठी, सावल्या आणि ग्रेडियंट आवश्यक आहे. तीक्ष्ण सावली 3D बटणाचे स्वरूप तयार करते.
/*गोलाकार कोपरे*/ -वेबकिट-बॉर्डर-त्रिज्या: 5px;
पार्श्वभूमी-प्रतिमा: -o-रेखीय-ग्रेडियंट(शीर्ष, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-moz-बॉर्डर-त्रिज्या: 5px;
सीमा-त्रिज्या: 5px;
आज मी तुम्हाला स्टाईलिश बटणे कशी बनवायची ते सांगू इच्छितो शुद्ध CSS. आम्ही 4 शैली तयार करू, ही एक रंगाने भरलेली बटणे, बॉर्डरने वेढलेली बटणे, छाया आणि भरणासह बटण शैली आणि शेवटची 4 शैली क्लिक प्रभाव असलेली बटणे आहेत. आम्ही हे सर्व चांगुलपणा कोणत्याही स्क्रिप्ट न वापरता, फक्त CSS वापरून करू.
डेमो आय
बटणांसाठी HTML कोड
आम्ही वापरणार HTML कोड अगदी सोपा आहे. प्रत्येक बटणासाठी आम्ही स्वतंत्र वर्ग परिभाषित करू. आमचे भविष्यातील बटण फिरवताना आणि सक्रिय करताना प्रभाव लागू करण्यासाठी आम्ही वर्ग देखील सेट करू. सर्वसाधारणपणे, येथे कोड स्वतः आहे:
सर्व बटणांसाठी CSS शैली
काही भिन्न ब्राउझर मानक नियम CSS थोड्या वेगळ्या पद्धतीने प्रस्तुत करते. या कारणास्तव मध्ये खालील कोडआम्ही सर्व CSS शैली रीसेट करू आणि काही डीफॉल्ट मूल्ये जोडू. हा कोड असा दिसतो:
बटण ( प्रदर्शन: इनलाइन-ब्लॉक; समास: 0 10px 0 0; पॅडिंग: 15px 45px; फॉन्ट-आकार: 48px; फॉन्ट-फॅमिली: "बिटर", सेरिफ; लाइन-उंची: 1.8; देखावा: काहीही नाही; बॉक्स-छाया: काहीही नाही; सीमा-त्रिज्या: 0; ) बटण: फोकस ( बाह्यरेखा: काहीही
हे अजिबात अवघड नाही. बरं, आता आमच्या स्टायलिश बटणांच्या 4 शैलींपैकी प्रत्येकाकडे जवळून पाहू.
पार्श्वभूमीने भरलेली सपाट बटणे
या प्रकारचे बटण आजकाल खूप लोकप्रिय आहे कारण ते सर्वाना भेटते आधुनिक ट्रेंडवेब डिझाइन. दुसऱ्या शब्दांत तो सपाट शैली आहे किंवा फ्लॅट डिझाइन. शिवाय, लोकांना अशा बटणांची सवय आहे आणि स्वेच्छेने त्यांच्यावर क्लिक करतात.
ही प्रतिमा बटणाच्या तीन अवस्था, सामान्य (डीफॉल्ट), होव्हरवर आणि क्लिक किंवा क्रिया दर्शवते:
या बटणांसाठी CSS कोड अगदी सोपा आहे. हे मला एक मोठे प्लस वाटते:
Section.flat बटन (रंग: #fff; background-color: #6496c8; text-shadow: -1px 1px #417cb8; बॉर्डर: none; ) section.flat button:hover, section.flat button.hover (पार्श्वभूमी-रंग: #346392; text-shadow: -1px 1px #27496d; ) section.flat button:active, section.flat button.active (background-color: #27496d; text-shadow: -1px 1px #193047; )
बॉर्डर किंवा बॉर्डर असलेली स्टाइल बटणे
ही बटण शैली त्याच वर्गात आहे सपाट बटणेफरक एवढाच आहे की येथे आपण फिल काढून टाकतो आणि त्याऐवजी बटणाची सीमा प्रदर्शित करण्यासाठी नियम सेट करतो. ही प्रतिमा सर्व काही स्पष्टपणे दर्शवते:
आणि नेहमीप्रमाणे CSS कोड अगदी सोपा आहे, आम्ही फक्त सीमा दिसण्यासाठी नियम जोडतो:
Section.border बटण ( रंग: #6496c8; पार्श्वभूमी: rgba(0,0,0,0); सीमा: ठोस 5px #6496c8; ) section.border बटण:hover, section.border button.hover ( बॉर्डर-रंग: # 346392; रंग: #346392; ) विभाग. सीमा बटण: सक्रिय, विभाग. सीमा बटण. सक्रिय ( बॉर्डर-रंग: #27496d; )
CSS मध्ये सावली आणि ग्रेडियंट असलेली बटणे
बटणांच्या या शैलीला सहजपणे जुने म्हटले जाऊ शकते, परंतु आताही ते इंटरनेटवर आढळू शकते. ही बटणे तुमच्या साइटच्या शैलीशी जुळत असल्यास, ती फक्त तुमच्यासाठी आहेत. ते बनविणे देखील खूप सोपे आहे, येथे एक प्रतिमा आहे:
CSS मध्ये आपण shadow आणि gradient fill नियम वापरू. फिरत असताना, बटणाभोवती आणि आत क्लिक केल्यावर सावली दिसेल.
Section.gradient बटण ( रंग: #fff; मजकूर-छाया: -2px 2px #346392; पार्श्वभूमी-रंग: #ff9664; पार्श्वभूमी-प्रतिमा: लिनियर-ग्रेडियंट(शीर्ष, #6496c8, #346392); बॉक्स-छाया: इनसेट 0 0 0 1px #27496d; सीमा: 15px; ) विभाग.ग्रेडियंट बटण:होवर, विभाग.ग्रेडियंट बटन section.gradient button:active, section.gradient button.active ( box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; )
स्टाइलिश क्लिक प्रभाव
ही शैली आता खूप लोकप्रिय आहे आणि वेबसाइट डिझाइनमध्ये मोठ्या प्रमाणावर वापरली जाते. वापरकर्त्याला असे दिसते की प्रत्यक्षात बटण दाबले जात आहे. येथे तुम्ही इमेजमधील तपशील पाहू शकता:
येथे CSS थोडे अधिक क्लिष्ट आहे आणि थोडे गणित आवश्यक आहे. पण हे सहज समजू शकते. सर्वसाधारणपणे, हे सर्व इतके भयानक नाही. आम्ही बटणाखाली एक अस्पष्ट सावली ठेवू जेणेकरुन ते 3D बटणाचा प्रभाव देईल किंवा थोडेसे चिकटलेले दिसेल. तुम्ही बटणांवर फिरता तेव्हा, आम्ही पार्श्वभूमी अधिक गडद करू. आणि जेव्हा वापरकर्ता बटणावर क्लिक करतो, तेव्हा आम्ही शैलींमध्ये बटणाची स्थिती बदलू. आणि हे सर्व अधिक प्रभावी आणि गुळगुळीत दिसण्यासाठी, आम्ही CSS3 ट्रान्सफॉर्मेशन (translateY) जोडू. अशा प्रकारे बटण सहजतेने खाली जाईल. आणि येथे CSS कोड स्वतः आहे:
विभाग दाबा बटण (रंग: #fff; पार्श्वभूमी-रंग: #6496c8; सीमा: काहीही नाही; सीमा-त्रिज्या: 15px; बॉक्स-छाया: 0 10px #27496d; ) विभाग. दाबा बटण: होवर, विभाग. बटण दाबा. होवर (पार्श्वभूमी-रंग: #417cb8 ) section.press button:active, section.press button.active (पार्श्वभूमी-रंग: #417cb8; बॉक्स-छाया: 0 5px #27496d; ट्रान्सफॉर्म: translateY(5px); )
डेमो आय
निष्कर्ष
बस्स! आता आपल्याकडे स्टायलिश आणि आधुनिक बटणे, जे तुम्ही तुमच्या गरजांसाठी वापरू शकता. स्वाभाविकच, ते ओळखता येत नाहीत तोपर्यंत आपण त्यांना बदलू शकता, या प्रकारच्या बटणांच्या अंमलबजावणीचे हे फक्त सर्वात सोपे उदाहरण आहे. मला आशा आहे की तुम्ही या धड्याचा आनंद घेतला असेल. लवकरच भेटू!
- भाषांतर
हॅलो, प्रिय मित्रा! आज आपण CSS3 3D बटण कसे तयार करायचे ते शिकू! हे Orman Clark च्या त्याच्या Premium Pixels वेबसाइटसाठी लोकप्रिय Freebie PSD वर आधारित आहेत. आम्ही या बटणांची प्रत तयार करण्याचा प्रयत्न करू CSS वापरून HTML कोडच्या किमान रकमेसह.
पायरी 1: HTML दस्तऐवज तयार करा
आम्ही एक नवीन तयार करून प्रारंभ करू HTML दस्तऐवज. हे HTML5 बॉयलरप्लेटवर आधारित असेल जेणेकरुन आम्हाला एक सोपा प्रारंभ बिंदू मिळेल. आता आपण दुव्यांसह यादी जोडू. मुळात तेच आहे, अतिरिक्त divs आणि spans न वापरल्याबद्दल CSS3 चे आभार.आम्ही प्रत्येक सूची आयटमला एक वर्ग 'बटन्स' नियुक्त करू. आणि Orman ने वेगवेगळे रंग वापरले असल्याने, आम्ही प्रत्येक बटणाला वेगळा रंग देऊ. स्वतःचा रंगवर्ग म्हणून.
या टप्प्यावर आपल्याला इतकेच आवश्यक आहे.
पायरी २:बेसिक CSS नियम
तुम्ही ग्रेडियंट्स, गोलाकार कोपरे इत्यादींमध्ये जाण्यापूर्वी, काळजी घेण्यासाठी काही मूलभूत नियम आहेत. विशेष काही नाही, फक्त नियमित CSS2:Ul (सूची-शैली: काहीही; ) a.बटण (प्रदर्शन: ब्लॉक; फ्लोट: डावीकडे; स्थान: सापेक्ष; उंची: 25px; रुंदी: 80px; समास: 0 10px 18px 0; मजकूर-सजावट: काहीही नाही; फॉन्ट: 12px" Helvetica Neue", Helvetica, Arial, sans-serif; फॉन्ट-वजन: ठळक; रेखा-उंची: 25px; मजकूर-संरेखित: मध्यभागी; )
आता यासाठीचे नियम लागू करूया विविध रंग. उदाहरणार्थ, राखाडी साठी. इतर सर्व रंग डेमोमध्ये पाहिले जाऊ शकतात.
/* ग्रे */ .ग्रे, .ग्रे:होवर (रंग: #555; बॉर्डर-बॉटम: 4px सॉलिड #b2b1b1; पार्श्वभूमी: #eee; .ग्रे:होवर (पार्श्वभूमी: #e2e2e2; ) )
आपण असे काहीतरी संपले पाहिजे. जर ते 2008 असेल तर खूपच ठोस दिसते. 
पायरी 3:दुहेरी फ्रेम्स!
आपण अंतिम परिणामाकडे बारकाईने पाहिल्यास, आपल्याला दिसेल की संपूर्ण बटणाच्या परिमितीसह तेथे आहे पातळ रेषा. हा प्रभाव साध्य करण्यासाठी आम्ही छद्म घटक वापरू : आधीआणि : नंतर.a.button (प्रदर्शन: ब्लॉक; फ्लोट: डावीकडे; स्थान: सापेक्ष; उंची: 25px; रुंदी: 80px; समास: 0 10px 18px 0; मजकूर-सजावट: काहीही नाही; फॉन्ट: 12px "Helvetica Neue", Helvetica, Arial, sans -सेरिफ; ओळ-उंची: 25px; मध्यभागी; a.button:fter ; रुंदी: 80px; तळाशी: -1px;
रंग जोडून बटणे अधिक चांगली दिसतात.
/* ग्रे */ .ग्रे, .ग्रे:होवर (रंग: #555; बॉर्डर-बॉटम: 4px सॉलिड #b2b1b1; पार्श्वभूमी: #eee; ) .ग्रे:पूर्वी, .ग्रे:नंतर ( सीमा: 1px घन #cbcbcb; सीमा-तळ: 1px घन #a5a5a5 .ग्रे:होवर (पार्श्वभूमी: #e2e2e2; )
पायरी ४: CSS3 जादूची थोडीशी
आता प्रत्यक्ष CSS3 भागावर उतरू. चला गोलाकार कोपऱ्यांसह प्रारंभ करूया:a.button (प्रदर्शन: ब्लॉक; फ्लोट: डावीकडे; स्थान: सापेक्ष; उंची: 25px; रुंदी: 80px; समास: 0 10px 18px 0; मजकूर-सजावट: काहीही नाही; फॉन्ट: 12px "Helvetica Neue", Helvetica, Arial, sans -सेरिफ; फॉन्ट-वजन: रेखा-उंची: 25px; -वेबकिट-बॉर्डर-त्रिज्या: 3px;
नैसर्गिक घटक : आधीआणि : नंतरदेखील आवश्यक आहे गोलाकार कोपरे.
a.button:पूर्वी, a.button:after ( सामग्री: ""; स्थिती: परिपूर्ण; डावीकडे: -1px; उंची: 25px; रुंदी: 80px; तळ: -1px; -webkit-बॉर्डर-त्रिज्या: 3px; -moz -सीमा-त्रिज्या: 3px; सीमा-त्रिज्या: 3px; ) a.button:पूर्वी (उंची: 23px; तळ: -4px; बॉर्डर-टॉप: 0; -वेबकिट-बॉर्डर-त्रिज्या: 0 0 3px; -moz- सीमा-त्रिज्या: 0 0 3px 3px; -webkit-box-shadow: 0 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0pf0px; ;
शेवटी आपण ग्रेडियंट, आतील सावली आणि मजकूर सावली लागू करू. IE6 मध्ये बग टाळण्यासाठी, राज्य:भेटलेले जोडू.
/* ग्रे */ a.gray, a.gray:hover, a.gray:भेटलेले ( रंग: #555; बॉर्डर-तळ: 4px सॉलिड #b2b1b1; मजकूर-छाया: 0px 1px 0px #fafafa; पार्श्वभूमी: #eee; पार्श्वभूमी: -वेबकिट-ग्रेडियंट(रेखीय, डाव्या शीर्षस्थानी, डाव्या तळाशी, पासून(#eee), ते(#e2e2e2));
आमचा अंतिम परिणाम फार वाईट नाही!
पायरी ५:आपण काही विसरलो का?
ऑर्मनने त्याच्या डिझाइनमध्ये:सक्रिय स्थिती देखील समाविष्ट केली. म्हणून, आम्हाला ते आमच्या कोडमध्ये जोडावे लागेल.आम्ही कोडचा हा भाग वेगवेगळ्या रंगांसाठी नियमांच्या खाली ठेवू.
/* सक्रिय स्थिती */ a.button:active ( सीमा: काहीही नाही; तळ: -4px; समास-तळा: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-छाया: 0 1px 1px #fff; box-shadow: 1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: none; )
हे आम्हाला मिळते:
पायरी 6 (पर्यायी):जुने ब्राउझर
म्हणून आम्ही काही छान CSS3 बटणे तयार केली आहेत जी सर्व काम करतात आधुनिक ब्राउझर. पण इंटरनेट एक्सप्लोरर 8 आणि त्याखालील बद्दल काय? हे ब्राउझर मजकूर सावल्या किंवा ग्रेडियंटला समर्थन देत नाहीत.या समस्येचे निराकरण करण्यासाठी आम्ही वापरू शकतो javascript लायब्ररी Modernizr, जो तुमचा ब्राउझर CSS3 आणि HTML5 ला सपोर्ट करतो की नाही हे ओळखू शकतो. लायब्ररी समस्येचे निराकरण करत नाही, ती फक्त एक पर्यायी शैली देते.
प्रथम, आम्ही तयार करू स्वतःची आवृत्तीमॉडर्निझर, आपल्यासोबत मोठी जावास्क्रिप्ट घेऊन जाऊ नये म्हणून. हे त्यांच्या वेबसाइटवर केले जाऊ शकते. एकदा आम्ही आमच्या दस्तऐवजात जावास्क्रिप्ट टाकल्यानंतर, आम्हाला पर्यायी शैलीसाठी भिन्न वर्ग नियम परिभाषित करावे लागतील. आम्ही त्या ब्राउझरसाठी प्रतिमा वापरू जे सीमा-त्रिज्या आणि ग्रेडियंटला समर्थन देत नाहीत.
/* मॉडर्निझर फॉलबॅक */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generated content, a.button .no-generatedcontent a.button:भेट दिले (पार्श्वभूमी: url(images/sprite.png) no-repeat 0 0px; उंची: 32px; रुंदी: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generated content a.button:hover (पार्श्वभूमी: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:active, .no-borderradius a.button :active, .no-generatedcontent a.button:active (पार्श्वभूमी: url(images/sprite.png) no-repeat 0 -64px; तळ: 0; लाइन-उंची: 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:भेटलेले, .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 (पार्श्वभूमी-स्थिती-x: - ४९२पीएक्स; no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover (background-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:भेटलेले, .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 .बटण:आधी, .नो-सीएसएसग्रेडियंट्स a.बटण:नंतर, .नो-बॉर्डररॅडिअस a.बटण, .नो-बॉर्डररेडियस a.बटण:भेट दिलेले, .नो-बॉर्डररेडियस a.बटण:होव्हर, .नो-बॉर्डररेडियस a.बटण :पूर्वी, .नो-बॉर्डररेडियस a.बटण:नंतर, .नो-व्युत्पन्न सामग्री a.बटण, .नो-व्युत्पन्न सामग्री a.बटण:भेट दिलेली, .नो-जनरेट केलेली सामग्री a.बटण:होव्हर, .नो-जनरेट केलेली सामग्री a.बटण:पूर्वी , .नो-जनरेट केलेली सामग्री a.button:after ( सीमा: 0; )
