01 ते 04
CSS3 सह क्रॉस-ब्राउझर रेषेचा ग्रेडियंट निर्माण करणे
लिनीयर ग्रेडियंट्स
आपण पहाल की सर्वात सामान्य प्रकारचे ग्रेडियंट दोन रंगांचे एक रेषीय ग्रेडियंट आहे. याचा अर्थ ग्रेडीयन हळुहळु सरळ रेषेत पहिल्या रांगेत दुसर्या ओळीत बदलत जाईल. या पृष्ठावरील प्रतिमा # 99 9 (गडद राखाडी) पासून #fff (पांढर्या) पर्यंत एक डावीकडून उजवीकडे डावीकडे हलवते.
लिनियर ग्रेडियंट्स हे परिभाषित करणे सर्वात सोपे आहे, आणि ब्राउझरमध्ये सर्वाधिक समर्थन प्राप्त करतात. CSS3 रेखीय ग्रेडीयंट Android 2.3+, क्रोम 1+, Firefox 3.6+, ऑपेरा 11.1+, आणि सफारी 4+ मध्ये समर्थित आहेत. इंटरनेट एक्स्प्लोरर फिल्टरचा वापर करून ग्रॅडीएन्ट्स जोडू शकतो आणि त्यांना IE 5.5 वर परत पाठवेल. हे CSS3 नाही, परंतु हे क्रॉस-ब्राउझर सहत्वतासाठी एक पर्याय आहे.
जेव्हा आपण एखादा ग्रेडियंट परिभाषित करता तेव्हा आपल्याला अनेक भिन्न गोष्टी परिभाषित करण्याची आवश्यकता असते:
- कोणत्या प्रकारचे ग्रेडियंट आहे - रेखीय किंवा त्रिज्यात्मक
- जेथे ग्रेडियंट प्रारंभ होईल
- जेथे ढाल थांबेल
- ग्रेडियंटमध्ये कोणते रंग आहेत आणि ते कुठे सुरू करावे आणि थांबवावेत
CSS3 वापरून रेखीय ग्रेडीयंट ठरवण्यासाठी, आपण लिहू:
रेषीय-ग्रेडियंट ( कोन किंवा बाजू किंवा कोपरा , रंग थांबा , रंग थांबा )
- सर्वप्रथम आपण ग्रेगरीयण प्रकाराला नाव रेखीय- ग्रेडियंटसह परिभाषित करता.
- नंतर, आपण दोन पैकी एका मागाने ग्रेडीयंटच्या सुरवातीस आणि स्टॉप पॉइण्ट्सची व्याख्या करता: 0 ते 35 9 अंश असलेल्या ओळीच्या कोनासह, 0 अंश सरळ वर सरळ किंवा "बाजू किंवा कोपऱ्यात" कार्य, जसे डाव्या, उजव्या, खालचा आणि वरचा हे पुढील पृष्ठावर अधिक तपशीलवार स्पष्ट केले जाईल. आपण हे बाहेर सोडल्यास, ग्रेडियेंट शीर्षस्थानाच्या तळाशी तळाशी असेल.
- मग आपण रंग थांबा परिभाषित आपण कलर कोडसह रंग थांबे आणि एक वैकल्पिक टक्केवारी परिभाषित करता. टक्केवारी सांगते की जिथे त्या रंगाने सुरू होणाऱ्या किंवा त्या रंगाने समाप्त होणाऱ्या ब्राउझरवर. रेषेवर समानतेने रंग ठेवण्यासाठी मुलभूत आहे आपण पृष्ठ 3 वर रंग थांबा बद्दल अधिक जाणून घ्या
तर वरील ग्रेडीयंटची व्याख्या CSS3 सह, आपण लिहू शकता:
रेषीय-श्रेणीत्मक (डावीकड, # 999999 0%, # फॉर्मफ्फ 100%);
आणि आपण लिहिता त्या div चा पार्श्वभूमी म्हणून सेट करणे:
div {
पार्श्वभूमी-प्रतिमा: रेषीय-श्रेणीत्मक (डावीकड, # 999999 0%, #ffffff 100%;
}
CSS3 रेषीय ग्रेडियंटसाठी ब्राउझर विस्तार
क्रॉस-ब्राऊझर कार्य करण्यासाठी आपले ग्रेडियंट मिळविण्यासाठी, आपण बर्याच ब्राउझर्ससाठी ब्राउझर एक्सप्लोरर 9 आणि कमी (वास्तविकतः 2 फिल्टर) साठी फिल्टर आणि वापरता येण्याची आवश्यकता आहे. हे सर्व आपले ग्रेडियंट परिभाषित करण्यासाठी समान घटक घेतात (फक्त आपण फक्त IE मध्ये 2-रंग ग्रेडीयंट परिभाषित करू शकता).
मायक्रोसॉफ्ट फिल्टर आणि विस्तार - इंटरनेट एक्सप्लोरर हे सर्वात आव्हानात्मक आहे, कारण वेगवेगळ्या ब्राउजर आवृत्त्यांना पाठिंबा देण्यासाठी तुम्हाला तीन वेगवेगळ्या ओळींची गरज आहे. वरील राखाडी पांढरा ग्रेडियंटवर मिळवण्यासाठी आपण लिहू:
/ * IE 5.5-7 * /
फिल्टर: प्रॉडिड: डीएक्सआयएमजट्रान्सफॉर्म. मायक्रोसॉफ्ट.एआरडीएन्ट (startColorstr = '# 999999', एंडकोलस्ट्रॉफ्ट = '# एफएफएफएफएफएफ', ग्रेडियंटटिप = 1);
/ * IE 8- 9 * /
-मशी-फिल्टर: "प्रॉडगेट: डीएक्सआयएमज ट्रांसफॉर्म. मायक्रोसॉफ्ट.एग्रॅडिट (startColorstr = '# 999999', एंडकोलस्ट्रॉफ्ट = '# एफएफएफएफएफएफ', ग्रेडियंट टाईप = 1)";
/ * IE 10 * /
-एमएमएस-रेखीय-ग्रेडियंट (डावी, # 99 99 99 0%, # फॉर्मफ्फ 100%);
मोज़िला विस्तार- the -moz- विस्तार CSS3 मालमत्तेसारख्या काम करतो, फक्त -मोझ विस्तार सह. फायरफॉक्ससाठी वरील ग्रेडियंट प्राप्त करण्यासाठी, लिहा:
-मोझ-रेखीय-ग्रेडियंट (डावे, # 99 99 99 0%, # फॉर्मफ्फफ 100%);
ऑपेरा विस्तारा- The -o- एक्सटेंशन ओपेरा 11.1+ वर ग्रेडियंट जोडतात वरील ग्रेडियंट प्राप्त करण्यासाठी, लिहा:
-ओ-रेखीय-ग्रेडियंट (डावे, # 99 99 99 0%, # फॉर्मफ्फ 100%);
Webkit विस्तार -The-webkit- विस्तार CSS3 गुणधर्म सारख्या भरपूर कार्य करते. Safari 5.1+ किंवा Chrome 10+ साठी वरील ग्रेडियंट परिभाषित करण्यासाठी आपण लिहू शकता:
-webkit-linear-gradient (डावे, # 999999 0%, #ffffff 100%);
वेबकिट विस्ताराची जुनी आवृत्ती देखील आहे जी Chrome 2+ आणि Safari 4+ सह कार्य करते. त्यामध्ये आपण ग्रॅडिएंन्सचे प्रकार, मालमत्ता नावापेक्षा, मूल्य म्हणून परिभाषित करता. या विस्तारासह पांढरे ग्रेडियंटसह राखाडी मिळवण्यासाठी, लिहा:
-विबकिट-ग्रेडिएंट (रेखीय, डावा शीर्ष, उजवा शीर्ष, रंग-थेंब (0%, # 99 99 99), रंग-थांबवा (100%, # ffffff));
पूर्ण CSS3 रेखीय ग्रेडियंट सीएसएस कोड
संपूर्ण पांढर्या ग्रेडियंट वर राखाडी मिळवण्यासाठी पूर्ण क्रॉस-ब्राऊझर समर्थनासाठी आपण आधी अशा ब्राऊजर्ससाठी फॉलबॅक सॉलिड रंग समाविष्ट केले पाहिजे जे ग्रेडियंट्सचे समर्थन करत नाहीत आणि शेवटचे आयटम पूर्णतः सुसंगत असलेल्या ब्राउझरसाठी CSS3 शैली असावी. तर, आपण लिहू:
पार्श्वभूमी: # 999999;
पार्श्वभूमी: -मोझ-रेखीय-ग्रेडियंट (डावे, # 99 99 99 0%, # फॉर्मफ्फ 100%);
पार्श्वभूमी: -विबकिट-ग्रेडिएंट (रेषेचा, डावीकडे शीर्षस्थानी, उजवा शीर्ष, रंग-थेंब (0%, # 99 99 99), रंग-स्टॉप (100%, # ffffff));
पार्श्वभूमी: -webkit-linear-gradient (डावे, # 999999 0%, #ffffff 100%);
पार्श्वभूमी: -ओ-रेखीय-ग्रेडियंट (डावे, # 999999 0%, # फॉर्मफ्फ 100%);
पार्श्वभूमी: -एमएमएस-रेखीय-ग्रेडियंट (डावे, # 99 9999 0%, # फॉर्मफ्फ 100%);
फिल्टर: प्रॉडिड: डीएक्सआयएमजट्रान्सफॉर्म. मायक्रोसॉफ्ट.एआरडीएन्ट (startColorstr = '# 999999', एंडकोलस्ट्रॉफ्ट = '# एफएफएफएफएफएफ', ग्रेडियंटटिप = 1);
-मशी-फिल्टर: कॉग्गीड: डीएक्सआयएमज ट्रांसफॉर्म. मायक्रोसॉफ्ट.एआरडीएन्ट (startColorstr = '# 999999', एंडकोलस्ट्रॉफ्ट = '# एफएफएफएफएफएफ', ग्रेडियंट टाईप = 1);
पार्श्वभूमी: रेषेचा-ग्रेडियंट (डावी, # 99 99 99 0%, # फॉर्मफ्फ 100%);
या ट्यूटोरियल मध्ये पुढील पृष्ठे अधिक तपशीलावरील ग्रेडीयंटचे भाग स्पष्ट करतात, आणि शेवटचे पृष्ठ तुम्हास असे साधन देते की जी CSS3 ग्रेडीयंट्स आपोआप तयार करण्याचा उत्कृष्ट मार्ग आहे.
फक्त सीएसओ वापरून ही रेखीय ढाल पहा.
02 ते 04
विकर्ण ग्रेडियंट तयार करणे-ग्रेडियंटचे कोन
प्रारंभ आणि स्टॉप पॉइण्ट हे ग्रेडीयंटच्या कोन निश्चित करतात. सर्वाधिक रेषीय ग्रेडीयंट्स वरपासून खालपर्यंत किंवा डावीकडून उजवीकडे आहेत पण एक दुरूस्ती तयार करणे शक्य आहे जे एका दुरूस्ती ओळीवर चालते. या पृष्ठावरील प्रतिमा एका साध्या ग्रेडीयंट दर्शविते जी इमेजवर 45 अंशग्रहाच्या कोनातून उजवीकडून डावीकडे हलते.
ग्रेडियंट रेखा परिभाषित करण्यासाठी कोन
कोन घटकांच्या मध्यभागी काल्पनिक वर्तुळ वर एक ओळी आहे. 0deg अप दिशेने, उजवीकडे 90deg बिंदू, 180deg बिंदू खाली, आणि 270deg गुण डाव्या बाजूला. आपण 0 ते 35 9 अंशांपासून कोणत्याही कोनाची व्याख्या करू शकता.
आपण हे नोंद घ्यावे की एका चौरसमध्ये, डावीकडील उजव्या कोपर्यातून 45 डिग्री कोन खाली डाव्या कोपर्यातून हलवेल, परंतु आयतामध्ये सुरूवातीच्या आणि शेवटच्या बिंदु थोड्या आकाराच्या बाहेर आहेत, आपण प्रतिमेत पाहू शकता.
कर्ण ग्रेडीयंट डिफाईन करण्याचा अधिक सामान्य मार्ग म्हणजे कोपरा परिभाषित करणे, जसे की टॉप उजव्या आणि ग्रेडीयंट त्या कोपऱ्यापासून उलट कोपर्यात जातील आपण पुढील कीवर्डसह प्रारंभिक पद परिभाषित करू शकता:
- शीर्षस्थानी
- उजवीकडे
- तळ
- डावीकडे
- केंद्र
आणि ते अधिक विशिष्ट होण्यासाठी एकत्रित केले जाऊ शकतात, जसे की:
- वर उजवीकडे
- शीर्षस्थानी डावीकडे
- शीर्षस्थानी केंद्र
- तळाशी उजवीकडे
- खाली डावीकडे
- तळ केंद्र
- उजवे केंद्र
- डावे केंद्र
येथे चित्रित केलेल्या ग्रेडिअन साठी सीएसएस आहे, डावीकडील उजवीकडील कोपर्यातून हलणारी पांढरी लाल:
पार्श्वभूमी: ## 901 ए 1 सी;
पार्श्वभूमी-प्रतिमा: -मोझ-रेखीय-ग्रेडियंट (उजवा शीर्ष, # 901 ए 1 सी 0%, # एफएफएफएफएफ 100%);
पार्श्वभूमी-प्रतिमा: -विबकिट-ग्रेडिएंट (रेखीय, उजवा शीर्ष, डावा तळ, रंग-थेंब (0, # 901 ए 1 सी), रंग-थेंब (1, #FFFFFF));
पार्श्वभूमी: -webkit-linear-gradient (उजवीक Top, # 901A1C 0%, #ffffff 100%);
पार्श्वभूमी: -ओ-रेखीय-ग्रेडियंट (उजवा शीर्ष, # 901 ए 1 सी 0%, # फॉर्मसिफ 100%);
पार्श्वभूमी: -एमएमएस-रेखीय-ग्रेडियंट (उजवा शीर्ष, # 901 ए 1 सी 0%, # फॉर्मसिफ 100%);
पार्श्वभूमी: रेषेचा-ग्रेडियंट (उजवा शीर्ष, # 901 ए 1 सी 0%, # फॉर्मफ्फ 100%);
आपण असे पाहिले असेल की या उदाहरणामध्ये कोणतेही IE फिल्टर नाहीत. कारण आयई केवळ दोन प्रकारच्या फिल्टरला परवानगी देते: वरपासून खालपर्यंत (डीफॉल्ट) आणि डावीकडून उजवीकडे (ग्रेडियंटटिप = 1 स्विचसह).
फक्त सीएसएस वापरून ही कर्णरेषा रेषेचा ढाल पहा.
04 पैकी 04
रंग थेंब
CSS3च्या रेखीय ग्रेडीयंट्ससह, आपण अगदी फॅन्सीअर प्रभाव निर्माण करण्यासाठी आपल्या ग्रेडिएन्टमध्ये एकाधिक रंग जोडू शकता. हे रंग जोडण्यासाठी, आपण आपल्या मालमत्तेच्या शेवटी अतिरिक्त रंग जोडू शकता, स्वल्पविरामाने विभक्त केलेले. आपण कोठे ओळीवर रंग लावा किंवा समाप्त कराल हे समाविष्ट केले पाहिजे.
इंटरनेट एक्स्प्लोरर फिल्टर केवळ दोन रंगीत स्टॉपचे समर्थन करते, त्यामुळे जेव्हा आपण हे ग्रेडीयंट तयार करता, तेव्हा आपण फक्त पहिल्या आणि दुस-या रंगांचा समावेश करावा.
वरील 3-रंगाच्या ग्रेडियंटसाठी सीएसएस आहे:
पार्श्वभूमी: #ffffff;
पार्श्वभूमी: -मोझ-रेखीय-ग्रेडियंट (डावे, # फफीफ 0%, # 901 ए 1 सी 51%, # फॉर्मफ्फ 100%);
पार्श्वभूमी: -विबकिट-ग्रेडिएंट (रेषेचा, डावीकडे शीर्षस्थानी, उजवा शीर्ष, रंग-थेंब (0%, # ffffff), रंग-थांबा (51%, # 901 ए 1 सी), रंग-थांबवा (100%, # ffffff));
पार्श्वभूमी: -webkit-linear-gradient (डावी, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
पार्श्वभूमी: -ओ-रेखीय-ग्रेडियंट (डावे, # फफीफ 0%, # 901 ए 1 सी 51%, # एफएफएफएफएफएफ 100%);
पार्श्वभूमी: -एमएमएस-रेखीय-ग्रेडियंट (डावी, # फफीफ 0%, # 901 ए 1 सी 51%, # एफएफएफएफएफएफ 100%);
फिल्टर: प्रॉडिड: डीएक्सआयएमज ट्रांसफॉर्म. मायक्रोसॉफ्ट.एग्रेटिंट (startColorstr = '# ffffff', एंडॉलॉस्ट्रस्ट्र = '# एफएफएफएफएफएफ', ग्रेडियंट टाईप = 1);
पार्श्वभूमी: रेषेचा-ग्रेडियंट (डावी, # फफफff 0%, # 901 ए 1 सी 51%, # एफएफएफएफएफएफ 100%);
या रेषेचा ग्रेडियंट पहा, फक्त सीएसएस वापरून कृतीमध्ये तीन रंग थांबे.
04 ते 04
बिल्डिंग ग्रेडिअन्ट्स सोपे करा
दोन साइट मी शिफारस करतो की आपण बांधणी तयार करण्यास मदत करतो, त्या प्रत्येकासाठी त्यांना फायदे आणि त्रुटी आहेत, मला एक ग्रेडियंट बिल्डर सापडत नाही जो सर्व काही अद्याप करीत नाही.
अंतिम सीएसएस ग्रेडियंट जनरेटर
हे ग्रेडीयंट जनरेटर अतिशय लोकप्रिय आहे कारण ते फोटोशॉप सारख्या प्रोग्राममध्ये ग्रेडियंट बिल्डरना समान प्रकारे कार्य करते. मला हे आवडते कारण ते केवळ वेबकिट आणि मोझीला नव्हे तर आपल्याला सर्व सीएसएस विस्तार देते. या जनरेटर सह समस्या आहे की तो फक्त क्षैतिज आणि उभ्या gradients समर्थन करते. आपण दुरूस्ती ग्रेडीयंट करू इच्छित असल्यास, आपण शिफारस इतर जनरेटर जावे लागेल.
CSS3 ग्रेडियंट जनरेटर
या जनरेटरने मला पहिल्यांदा समजून घेण्यास थोडा जास्त वेळ दिला आहे, परंतु ती दुरूस्ती करण्यासाठी दिशा बदलणे समर्थित करते.
आपल्याला यापेक्षा चांगले वाटणाऱ्या दुसर्या CSS ग्रेडियंट जनरेटरबद्दल माहिती असल्यास, कृपया आम्हाला कळवा .