CSS3 रैखिक ग्रेडियेंट्स

04 में से 01

CSS3 के साथ क्रॉस-ब्राउज़र रैखिक ग्रेडियेंट बनाना

रैखिक ग्रेडियेंट्स

आप देखेंगे कि ढाल का सबसे आम प्रकार दो रंगों का एक रैखिक ढाल है। इसका मतलब यह है कि ढाल एक सीधी रेखा में धीरे-धीरे उस रंग के साथ दूसरे रंग से दूसरे स्थान पर बदल जाएगा। इस पृष्ठ की छवि # 999 (गहरा भूरा) #ff (सफेद) के लिए एक सरल बाएं से दाएं ढाल दिखाती है।

रैखिक ग्रेडियेंट परिभाषित करने के लिए सबसे आसान हैं, और ब्राउज़र में सबसे अधिक समर्थन है। CSS3 रैखिक ग्रेडियेंट Android 2.3+, क्रोम 1+, फ़ायरफ़ॉक्स 3.6+, ओपेरा 11.1+, और सफारी 4+ में समर्थित हैं। इंटरनेट एक्सप्लोरर फ़िल्टर का उपयोग करके ग्रेडियेंट जोड़ सकता है और उन्हें आईई 5.5 पर वापस समर्थन देता है। यह CSS3 नहीं है, लेकिन यह क्रॉस-ब्राउज़र संगतता का विकल्प है।

जब आप ढाल को परिभाषित करते हैं तो आपको कई अलग-अलग चीजों को परिभाषित करने की आवश्यकता होती है:

• यह किस प्रकार का ढाल है- रैखिक या रेडियल
• जहां ढाल शुरू होना चाहिए
• जहां ढाल बंद होना चाहिए
• ढाल में कौन से रंग हैं और जहां उन्हें शुरू करना और रोकना चाहिए

CSS3 का उपयोग कर रैखिक ग्रेडियेंट को परिभाषित करने के लिए, आप लिखते हैं:

रैखिक-ढाल ( कोण या साइड या कोने , रंग स्टॉप , रंग स्टॉप )

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

तो, CSS3 के साथ उपरोक्त ढाल को परिभाषित करने के लिए, आप लिखते हैं:

रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);

और इसे एक डीआईवी की पृष्ठभूमि के रूप में सेट करने के लिए आप लिखते हैं:

div {
पृष्ठभूमि-छवि: रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%;
}

CSS3 रैखिक ग्रेडियेंट्स के लिए ब्राउज़र एक्सटेंशन

अपने ढाल को क्रॉस-ब्राउजर पर काम करने के लिए, आपको अधिकांश ब्राउज़रों के लिए ब्राउज़र एक्सटेंशन और इंटरनेट एक्सप्लोरर 9 और निचले (वास्तव में 2 फ़िल्टर) के लिए फ़िल्टर का उपयोग करने की आवश्यकता है। ये सभी आपके ढाल को परिभाषित करने के लिए समान तत्व लेते हैं (सिवाय इसके कि आप केवल आईई में 2-रंग ग्रेडियेंट को परिभाषित कर सकते हैं)।

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

/ * आईई 5.5-7 * /
फ़िल्टर: प्रोजेड: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * आईई 8-9 * /
-ms-filter: "प्रोजेड: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * आईई 10 * /
-एमएस-रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);

मोज़िला एक्सटेंशन -The -moz- एक्सटेंशन CSS3 संपत्ति की तरह काम करता है, बस -मोज़-एक्सटेंशन के साथ। फ़ायरफ़ॉक्स के लिए उपरोक्त ढाल प्राप्त करने के लिए, लिखें:

-मोज़-रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);

ओपेरा एक्सटेंशन -द-ओ-एक्सटेंशन ओपेरा 11.1+ में ग्रेडियेंट जोड़ता है। उपरोक्त ढाल प्राप्त करने के लिए, लिखें:

-ओ-रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);

वेबकिट एक्सटेंशन- The -webkit- एक्सटेंशन CSS3 प्रॉपर्टी की तरह बहुत काम करता है। सफारी 5.1+ या क्रोम 10+ के लिए उपरोक्त ढाल को परिभाषित करने के लिए आप लिखते हैं:

-webkit-linear-gradient (बाएं, # 99 99 99 0%, #ffffff 100%);

वेबकिट एक्सटेंशन का एक पुराना संस्करण भी है जो क्रोम 2+ और सफारी 4+ के साथ काम करता है। इसमें आप संपत्ति के नाम के बजाय, ग्रेडियेंट के प्रकार को मान के रूप में परिभाषित करते हैं। इस एक्सटेंशन के साथ भूरे रंग से सफेद ढाल पाने के लिए, लिखें:

-वेबकिट-ग्रेडिएंट (रैखिक, बाएं शीर्ष, दाएं शीर्ष, रंग-स्टॉप (0%, # 99 99 99), रंग-स्टॉप (100%, # एफएफएफएफ));

पूर्ण CSS3 रैखिक ग्रेडियेंट सीएसएस कोड

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

पृष्ठभूमि: # 99 99 99;
पृष्ठभूमि: -मोज़-रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);
पृष्ठभूमि: -webkit-gradient (रैखिक, बाएं शीर्ष, दाएं शीर्ष, रंग-स्टॉप (0%, # 99 99 99), रंग-रोक (100%, # ffffff));
पृष्ठभूमि: -वेबिट-रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);
पृष्ठभूमि: -ओ-रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);
पृष्ठभूमि: -एमएस-रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);
फ़िल्टर: प्रोजेड: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: प्रोजेड: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
पृष्ठभूमि: रैखिक-ढाल (बाएं, # 99 99 99 0%, #ffffff 100%);

इस ट्यूटोरियल में अगले पृष्ठ ढाल के हिस्सों को अधिक विस्तार से समझाते हैं, और अंतिम पृष्ठ आपको ऐसे उपकरण पर इंगित करता है जो स्वचालित रूप से CSS3 ग्रेडियेंट बनाने का एक शानदार तरीका है।

केवल सीएसएस का उपयोग करके कार्रवाई में इस रैखिक ढाल को देखें।

04 में से 02

विकर्ण ग्रेडियेंट बनाना - ग्रेडियेंट का कोण

प्रारंभ और रोक बिंदु ढाल के कोण को निर्धारित करते हैं। अधिकांश रैखिक ग्रेडियेंट ऊपर से नीचे या बाएं से दाएं होते हैं। लेकिन एक ढाल रेखा पर चलने वाला ढाल बनाना संभव है। इस पृष्ठ की छवि एक साधारण ढाल दिखाती है जो छवि में 45 डिग्री कोण में दाईं ओर से बाईं ओर जाती है।

ग्रेडियेंट लाइन को परिभाषित करने के लिए कोण

कोण तत्व के केंद्र में एक काल्पनिक सर्कल पर एक रेखा है। 0deg अंक ऊपर, 90 डिग्री अंक दाएं, 180 डिग्री अंक नीचे, और बाईं ओर 270deg अंक। आप 0 से 35 9 डिग्री से किसी भी कोण को परिभाषित कर सकते हैं।

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

एक विकर्ण ढाल को परिभाषित करने का अधिक आम तरीका एक कोने को परिभाषित करना है, जैसे कि ऊपरी दाएं और ढाल उस कोने से विपरीत कोने में स्थानांतरित हो जाएगा। आप निम्न खोजशब्दों के साथ शुरुआती पद को परिभाषित कर सकते हैं:

• चोटी
• सही
• तल
• बाएं
• केंद्र

और उन्हें अधिक विशिष्ट होने के लिए जोड़ा जा सकता है, जैसे कि:

• ठीक तरह से ऊपर
• बाएं से बाएं
• शीर्ष केंद्र
• नीचे दाएं
• नीचे बाएँ
• निचला मध्यम
• सही केंद्र
• बाएं केंद्र

यहां एक ढाल के लिए सीएसएस है जो एक चित्रित, लाल से सफेद ऊपर दाएं कोने से नीचे बाईं ओर ले जा रहा है:

पृष्ठभूमि: ## 901 ए 1 सी;
पृष्ठभूमि-छवि: -मोज़-रैखिक-ढाल (दाएं शीर्ष, # 9 01 ए 1 सी 0%, # एफएफएफएफएफएफ 100%);
पृष्ठभूमि-छवि: -वेबिट-ग्रेडियेंट (रैखिक, दायां शीर्ष, बाएं तल, रंग-स्टॉप (0, # 9 01 ए 1 सी), रंग-स्टॉप (1, # एफएफएफएफएफएफ));
पृष्ठभूमि: -वेबिट-रैखिक-ढाल (दाएं शीर्ष, # 9 01 ए 1 सी 0%, #ffffff 100%);
पृष्ठभूमि: -ओ-रैखिक-ढाल (दाएं शीर्ष, # 9 01 ए 1 सी 0%, #ffffff 100%);
पृष्ठभूमि: -एमएस-रैखिक-ढाल (दाएं शीर्ष, # 9 01 ए 1 सी 0%, #ffffff 100%);
पृष्ठभूमि: रैखिक-ढाल (दाएं शीर्ष, # 9 01 ए 1 सी 0%, #ffffff 100%);

आपने देखा होगा कि इस उदाहरण में कोई आईई फ़िल्टर नहीं है। ऐसा इसलिए है क्योंकि आईई केवल दो प्रकार के फ़िल्टर की अनुमति देता है: ऊपर से नीचे (डिफ़ॉल्ट) और बाएं से दाएं (GradientType = 1 स्विच के साथ)।

केवल सीएसएस का उपयोग करके कार्रवाई में इस विकर्ण रैखिक ढाल को देखें।

03 का 04

रंग बंद हो जाता है

CSS3 रैखिक ग्रेडियेंट के साथ, आप फैनसीयर प्रभाव बनाने के लिए अपने ढाल में कई रंग जोड़ सकते हैं। इन रंगों को जोड़ने के लिए, आप अल्पविराम से अलग, अपनी संपत्ति के अंत में अतिरिक्त रंग जोड़ते हैं। आपको रंगों को कहां से शुरू करना चाहिए या अंत में भी शामिल होना चाहिए।

इंटरनेट एक्सप्लोरर फ़िल्टर केवल दो रंग स्टॉप का समर्थन करते हैं, इसलिए जब आप इस ढाल को बनाते हैं, तो आपको केवल पहले और दूसरे रंगों को प्रदर्शित करना चाहिए जिन्हें आप प्रदर्शित करना चाहते हैं।

उपरोक्त 3-रंग ढाल के लिए सीएसएस यहां दिया गया है:

पृष्ठभूमि: #ffffff;
पृष्ठभूमि: -मोज़-रैखिक-ढाल (बाएं, #ffffff 0%, # 901 ए 1 सी 51%, #ffffff 100%);
पृष्ठभूमि: -वेबिट-ग्रेडियेंट (रैखिक, बाएं शीर्ष, दाएं शीर्ष, रंग-स्टॉप (0%, # एफएफएफएफ), रंग-स्टॉप (51%, # 9 01 ए 1 सी), रंग-स्टॉप (100%, # एफएफएफएफ));
पृष्ठभूमि: -वेबिट-रैखिक-ढाल (बाएं, #ffffff 0%, # 901 ए 1 सी 51%, # एफएफएफएफ 100%);
पृष्ठभूमि: -ओ-रैखिक-ढाल (बाएं, #ffffff 0%, # 901 ए 1 सी 51%, # एफएफएफएफ 100%);
पृष्ठभूमि: -एमएस-रैखिक-ढाल (बाएं, #ffffff 0%, # 901 ए 1 सी 51%, # एफएफएफएफ 100%);
फ़िल्टर: प्रोजेड: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
पृष्ठभूमि: रैखिक-ढाल (बाएं, #ffffff 0%, # 901 ए 1 सी 51%, # एफएफएफएफ 100%);

केवल सीएसएस का उपयोग करके कार्रवाई में तीन रंग स्टॉप के साथ इस रैखिक ढाल को देखें।

04 का 04

बिल्डिंग ग्रेडियेंट आसान बनाओ

ग्रेडिएंट बनाने में आपकी सहायता के लिए दो साइटें हैं, जिनके लिए उन्हें लाभ और कमी है, मुझे एक ढाल निर्माता नहीं मिला है जो अभी तक सबकुछ करता है।

अंतिम सीएसएस ग्रेडियेंट जेनरेटर
यह ढाल जनरेटर बहुत लोकप्रिय है क्योंकि यह फ़ोटोशॉप जैसे कार्यक्रमों में ढाल बनाने वाले निर्माताओं के समान तरीके से करता है। मुझे यह भी पसंद है क्योंकि यह आपको वेबकिट और मोज़िला न केवल सभी सीएसएस एक्सटेंशन देता है। इस जनरेटर के साथ समस्या यह है कि यह केवल क्षैतिज और लंबवत ग्रेडियेंट का समर्थन करता है। यदि आप विकर्ण ग्रेडियेंट करना चाहते हैं, तो आपको सलाह देने वाले अन्य जनरेटर पर जाना होगा।

CSS3 ग्रेडियेंट जनरेटर
इस जनरेटर ने मुझे पहले की तुलना में थोड़ा सा समय निकाला, लेकिन यह एक विकर्ण को दिशा बदलने में मदद करता है।

यदि आप किसी अन्य सीएसएस ग्रेडियेंट जनरेटर के बारे में जानते हैं जो आपको इन से बेहतर पसंद है, तो कृपया हमें बताएं ।