रेडियल-ग्रेडिएंट (): रेडियल ग्रेडिएंट। रेडियल ग्रेडिएंट सीएसएस सिंटैक्स रेडियल-ग्रेडिएंट

💖क्या आपको यह पसंद है?लिंक को अपने दोस्तों के साथ साझा करें

चावल। 1. रेडियल और रैखिक ढाल

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

उदाहरण 1: ग्रेडिएंट

ढाल

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 1. कृपया ध्यान दें कि उदाहरण IE10 और ओपेरा 12 में सही ढंग से काम करता है, प्रारंभिक संस्करणये ब्राउज़र रेडियल ग्रेडिएंट का समर्थन नहीं करते हैं, और सफारी 5.1 में काम नहीं करते हैं, जिसके लिए -वेबकिट उपसर्ग की आवश्यकता होती है।

चावल। 2. रेडियल ग्रेडिएंट

ग्रेडिएंट का प्रारंभिक बिंदु तत्व में कहीं भी सेट किया जा सकता है, इस उद्देश्य के लिए इसकी स्थिति पहले निर्दिष्ट की जाती है।

किसी बिंदु की स्थिति पृष्ठभूमि-स्थिति संपत्ति के मानों के समान कीवर्ड या माप की उपलब्ध इकाइयों जैसे पिक्सेल या प्रतिशत का उपयोग करके लिखी जाती है; नीचे संभावित संयोजन हैं.

ऊपर बायीं ओर = बायीं ओर शीर्ष पर = 0% 0% (बायीं ओर) शीर्ष कोना);
शीर्ष पर = शीर्ष केंद्र पर = केंद्र पर शीर्ष = 50% 0% (शीर्ष केंद्र);
दाएँ शीर्ष पर = शीर्ष दाएँ पर = 100% 0% पर (ऊपरी दाएँ कोने में);
बाईं ओर = बाएं केंद्र पर = केंद्र पर बाईं ओर = 0% 50% (बाएं और केंद्र);
केंद्र पर = केंद्र पर केंद्र = 50% पर 50% (केंद्र) डिफ़ॉल्ट मान है;
दाईं ओर = दाएं केंद्र पर = केंद्र पर दाईं ओर = 100% 50% (दाएं और केंद्र);
नीचे बाईं ओर = बाईं ओर नीचे = 0% 100% (निचले बाएं कोने में);
तल पर = निचले केंद्र पर = केंद्र तल पर = 50% 100% (नीचे केंद्र पर);
नीचे दाईं ओर = दाईं ओर नीचे = 100% 100% (निचले दाएं कोने में)।

यदि आप उदाहरण 1 के लिए प्रारंभिक बिंदु स्थिति को 40px 45px पर सेट करते हैं, और दूसरे रंग को थोड़ा गहरा (#0076a5) बनाते हैं, तो आपको थोड़ी अधिक यथार्थवादी गेंद मिलेगी (चित्र 3)।

चावल। 3. ग्रेडिएंट का शुरुआती बिंदु बदलना

रेडियल ग्रेडिएंट के दो संभावित रूप हैं - वृत्त और दीर्घवृत्त, जो अपनी उपस्थिति में भिन्न होते हैं। डिफ़ॉल्ट एक अण्डाकार ग्रेडिएंट है.

#f9e497 और #ffb60f रंगों के लिए गोलाकार और अण्डाकार ग्रेडिएंट के बीच का अंतर चित्र में दिखाया गया है। 4.

चावल। 4. अलग - अलग प्रकारग्रेडियेंट

ऐसे तत्व के लिए जिसकी चौड़ाई उसकी ऊंचाई के बराबर है, जैसे कि गेंद के उदाहरण में, ग्रेडिएंट प्रकारों के बीच अंतर ध्यान देने योग्य नहीं होगा।

उदाहरण 2 दिखाता है कि किसी दिए गए शुरुआती बिंदु के साथ एक गोलाकार ढाल कैसे बनाई जाए। रंगों के बीच अंतर को बढ़ाने के लिए दो के बजाय तीन रंग मानों का उपयोग किया जाता है।

उदाहरण 2: वृत्ताकार ढाल

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

ढाल

यह तत्व तब मदद करता है जब आप इस तथ्य से अवगत होते हैं कि आपको बिल्कुल पता नहीं है कि कौन आपकी मदद कर सकता है और कैसे। इस समय हमारा सुझाव है कि कोई भी आपकी सहायता नहीं कर सकता।

वाक्यविन्यास पर ध्यान दें, यदि हम प्रारंभिक बिंदु के संकेत के साथ एक ढाल आकार को जोड़ना चाहते हैं, तो सर्कल कीवर्ड पहले आता है, और फिर स्थिति को एक स्थान से अलग किया जाता है। इस उदाहरण का परिणाम चित्र में दिखाया गया है। 5.

चावल। 5. वृत्ताकार ढाल

ग्रेडिएंट प्रकार के साथ-साथ आप इसका आकार भी निर्धारित कर सकते हैं, जो उपयोग किए गए कीवर्ड पर निर्भर करता है। आकार को ग्रेडिएंट प्रकार (वृत्त या दीर्घवृत्त) के बाद एक स्थान के साथ लिखा जाता है।

तालिका में 1 सफेद और काले रंग के लिए संभावित आकार मानों को उनके विवरण और परिणाम के साथ सूचीबद्ध करता है। वृत्ताकार और अण्डाकार ग्रेडिएंट के लिए कोड और प्रकार दिए गए हैं।

मेज़ 1. ग्रेडिएंट का आकार बदलने के लिए कीवर्ड

अर्थ	कोड	विवरण
	पृष्ठभूमि: रेडियल-ग्रेडिएंट (30px 20px, #fff, #000 पर निकटतम पक्ष पर वृत्त); पृष्ठभूमि: रेडियल-ग्रेडिएंट (दीर्घवृत्त निकटतम पक्ष 30px 20px, #fff, #000);	ग्रेडिएंट का आकार उसके निकटतम ब्लॉक के किनारे से मेल खाता है।
	पृष्ठभूमि: रेडियल-ग्रेडिएंट (30px 20px, #fff, #000 पर निकटतम कोने पर वृत्त); पृष्ठभूमि: रेडियल-ग्रेडिएंट (30px 20px पर दीर्घवृत्त निकटतम कोना, #fff, #000);	ग्रेडिएंट के आकार की गणना ब्लॉक के निकटतम कोने की दूरी के बारे में जानकारी के आधार पर की जाती है।
	पृष्ठभूमि: रेडियल-ग्रेडिएंट (30px 20px, #fff, #000 पर सबसे दूर वाला वृत्त); पृष्ठभूमि: रेडियल-ग्रेडिएंट (दीर्घवृत्त सबसे दूर की ओर 30px 20px, #fff, #000);	ढाल ब्लॉक के दूर तक फैली हुई है।
सबसे दूर का कोना	पृष्ठभूमि: रेडियल-ग्रेडिएंट (30px 20px, #fff, #000 पर सबसे दूर कोने पर वृत्त); पृष्ठभूमि: रेडियल-ग्रेडिएंट (दीर्घवृत्त सबसे दूर का कोना 30px 20px, #fff, #000);	ढाल के आकार की गणना ब्लॉक के दूर कोने की दूरी के बारे में जानकारी के आधार पर की जाती है,

केंद्रीय प्रारंभिक बिंदु के लिए, ग्रेडिएंट मेल खाते प्रतीत होते हैं। लेकिन यदि आप शुरुआती बिंदु को एक कोने में सेट करते हैं तो ग्रेडिएंट अलग होंगे। उदाहरण 3 एक मान का उपयोग करता है जो पिक्सेल में प्रारंभिक बिंदु निर्दिष्ट करता है।

उदाहरण 3: ढाल का आकार

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

ढाल

सामग्री

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 6.

चावल। 6. निकटतम-कोने के मान का उपयोग करना

एक रैखिक ग्रेडिएंट के समान, आप कई रंग निर्दिष्ट कर सकते हैं, उनकी स्थिति निर्धारित कर सकते हैं और रंगों के बीच तीव्र बदलाव कर सकते हैं। ऐसा करने के लिए, रंगों की एक मनमानी संख्या को अल्पविराम से अलग करके सूचीबद्ध किया जाता है, और रंग मान के बाद, एक स्थान से अलग करके, उसकी स्थिति होती है, जिसे पिक्सेल या प्रतिशत में निर्दिष्ट किया जा सकता है। चरम मान 0% और 100% को लिखने की आवश्यकता नहीं है, वे स्वचालित रूप से मान लिए जाते हैं।

तीव्र संक्रमण तब होता है जब एक रंग की स्थिति दूसरे रंग की स्थिति से मेल खाती है, जैसा कि उदाहरण 4 में दिखाया गया है। एक पिक्सेल का अंतर संक्रमण को थोड़ा सुचारू करने के लिए किया जाता है, अन्यथा यह पिक्सेल की "सीढ़ी" बन जाता है, जो बहुत अच्छा नहीं लगता.

उदाहरण 4. अचानक परिवर्तन

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

ढाल

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 7.

चावल। 7. विभिन्न रंगों के बीच तीव्र परिवर्तन

यदि रैखिक और रेडियल ग्रेडिएंट को पृष्ठभूमि-आकार की संपत्ति के साथ पूरक किया जाता है, तो हमें विभिन्न प्रकार की दोहराई जाने वाली पृष्ठभूमि छवियां मिलती हैं जो छवियों का उपयोग किए बिना बनाई जाती हैं।

सीएसएस ग्रेडिएंटएक रंग से दूसरे रंग में संक्रमण का प्रतिनिधित्व करता है।

ग्रेडिएंट लीनियर-ग्रेडिएंट() और रेडियल-ग्रेडिएंट() फ़ंक्शंस का उपयोग करके बनाए जाते हैं।

ग्रेडिएंट बैकग्राउंड को बैकग्राउंड, बैकग्राउंड-इमेज, बॉर्डर-इमेज और लिस्ट-स्टाइल-इमेज प्रॉपर्टी में सेट किया जा सकता है।

CSS में ग्रेडिएंट कैसे बनाएं

ब्राउज़र समर्थन

अर्थात: 10.0
फ़ायरफ़ॉक्स: 16, 3.6 -मोज़-
क्रोम: 26.0, 10.0 -वेबकिट-
सफारी: 6.1, 5.1 -वेबकिट-
ओपेरा: 12.1, 11.1 -ओ-
आईओएस सफारी: 7.1
ऑपेरा मिनी: —
एंड्रॉइड ब्राउज़र: 4.4, 4.1 -वेबकिट-
एंड्रॉइड के लिए क्रोम: 44

1. रेखीय ढाल रेखीय-ढाल()

चावल। 1. ग्रेडिएंट लाइन, आरंभ और अंत बिंदु और ग्रेडिएंट कोण

रैखिक ढलानदो या दो से अधिक रंगों का उपयोग करके बनाया गया है जिनकी एक दिशा निर्दिष्ट है, या ढाल रेखा.

यदि दिशा निर्दिष्ट नहीं है, तो डिफ़ॉल्ट मान का उपयोग किया जाता है - उपर से नीचे.

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

पृष्ठभूमि: रैखिक-ढाल (कीवर्ड द्वारा कोण/पक्ष या तिरछा (कीवर्ड की जोड़ी), पहला रंग, दूसरा रंग, आदि);

दिशाग्रेडिएंट को दो तरीकों से निर्दिष्ट किया जा सकता है:
झुकाव कोण का उपयोग करनाडिग्री डिग्री में, जिसका मान तत्व के अंदर रेखा के झुकाव के कोण को निर्धारित करता है।

Div (ऊंचाई: 200px; पृष्ठभूमि: रैखिक-ढाल(45डिग्री, #EECFBA, #C5DDE8); )

कीवर्ड का उपयोग करनाऊपर, दांयी ओर, नीचे, बायीं ओर जो क्रमशः 0डिग्री, 90डिग्री, 180डिग्री और 270डिग्री के ढाल कोण के अनुरूप है।

Div (ऊंचाई: 200px; पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, #F6EFD2, #CEAD78); )

यदि दिशा कीवर्ड की एक जोड़ी द्वारा निर्दिष्ट की जाती है, उदाहरण के लिए, ऊपर बाईं ओर, तो ग्रेडिएंट का प्रारंभिक बिंदु विपरीत दिशा में स्थित होगा, इस मामले में नीचे दाईं ओर।

Div (ऊंचाई: 200px; पृष्ठभूमि: रैखिक-ढाल (ऊपर बाईं ओर, पाउडर नीला, गुलाबी); )

रंगों के असमान वितरण के लिए, प्रत्येक रंग की प्रारंभिक स्थिति को ग्रेडिएंट के स्टॉप पॉइंट, तथाकथित के माध्यम से इंगित किया जाता है रंग रुक जाता है. ब्रेकप्वाइंट% में निर्दिष्ट हैं, जहां 0% प्रारंभिक बिंदु है, 100% अंतिम बिंदु है, उदाहरण के लिए:

Div (ऊंचाई: 200px; पृष्ठभूमि: रैखिक-ढाल (शीर्ष पर, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); )

रंग धारियों के स्पष्ट वितरण के लिए, प्रत्येक अगले रंग को पिछले रंग के विराम बिंदु से शुरू करना चाहिए:

Div (ऊंचाई: 200px; पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, #FFDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); )

2. रेडियल ग्रेडिएंट रेडियल-ग्रेडिएंट()

रेडियल ग्रेडियेंटरैखिक से भिन्न होता है क्योंकि रंग एक बिंदु (ढाल के केंद्र) से आते हैं और एक वृत्त या दीर्घवृत्त का आकार बनाते हुए समान रूप से बाहर की ओर वितरित होते हैं।

पृष्ठभूमि: रेडियल-ग्रेडिएंट (ग्रेडिएंट आकार/आकार/केंद्र स्थिति, पहला रंग, दूसरा रंग, आदि);

ढाल आकारकीवर्ड वृत्त या दीर्घवृत्त द्वारा परिभाषित। यदि कोई आकार निर्दिष्ट नहीं है, तो रेडियल ग्रेडिएंट दीर्घवृत्त आकार में डिफ़ॉल्ट हो जाता है।

Div (ऊंचाई: 200px; पृष्ठभूमि: रेडियल-ग्रेडिएंट(सफ़ेद, #FFA9A1); )

केंद्र की स्थितिपृष्ठभूमि-स्थिति संपत्ति में उपयोग किए गए कीवर्ड का उपयोग करके निर्दिष्ट किया जाता है, उसके बाद at उपसर्ग लगाया जाता है। यदि केंद्र स्थिति निर्दिष्ट नहीं है, तो केंद्र पर डिफ़ॉल्ट मान का उपयोग किया जाता है।

Div (ऊंचाई: 200px; पृष्ठभूमि: रेडियल-ग्रेडिएंट (शीर्ष पर, #FEFFFF, #A7CECC); )

%, em, या px लंबाई इकाइयों में निर्दिष्ट मानों की एक जोड़ी का उपयोग करके, आप अण्डाकार ढाल के आकार को नियंत्रित कर सकते हैं। पहला मान दीर्घवृत्त की चौड़ाई निर्दिष्ट करता है, दूसरा - ऊँचाई।

Div (ऊंचाई: 200px; पृष्ठभूमि: रेडियल-ग्रेडिएंट(40% 50%, #FAECD5, #CAE4D8); )

ढाल का आकारकीवर्ड का उपयोग करके निर्दिष्ट किया गया। डिफ़ॉल्ट मान सबसे दूर-कोना है.

div (ऊंचाई: 200px; पृष्ठभूमि: रेडियल-ग्रेडिएंट (100px 50px पर सबसे दूर का कोना, #FBF2EB, #352A3B); )

रेडियल ग्रेडिएंट का उपयोग करके, आप गेंद और बटन जैसी यथार्थवादी त्रि-आयामी आकृतियाँ बना सकते हैं।

गेंद

div (चौड़ाई: 200px; ऊंचाई: 200px; सीमा-त्रिज्या: 50%; मार्जिन: 0 ऑटो; पृष्ठभूमि: रेडियल-ग्रेडिएंट (65% 15% पर वृत्त, एक्वा, डार्कब्लू); )

बटन

.रैप (ऊंचाई: 200px; पैडिंग: 50px 0; पृष्ठभूमि: #cccccc; ) .बटन (चौड़ाई: 100px; ऊंचाई: 100px; सीमा-त्रिज्या: 50%; मार्जिन: 0 ऑटो; पृष्ठभूमि: रेडियल-ग्रेडिएंट (सबसे दूर की ओर) ऊपर बायीं ओर दीर्घवृत्त, सफ़ेद, #आआआआ);

डाक टिकट

ग्रेडिएंट्स में पारदर्शी रंग का उपयोग करके, आप इस तरह के प्रभाव बना सकते हैं।

जेपीजी">

.कंटेनर (पृष्ठभूमि: #B7D1D8; पैडिंग: 25px; ) .रैप (पृष्ठभूमि: रेडियल-ग्रेडिएंट (पारदर्शी, पारदर्शी 4px, सफेद 4px, सफेद); पैडिंग: 10px; चौड़ाई: 300px; ऊंचाई: 220px; पृष्ठभूमि-आकार: 20px 20px; पृष्ठभूमि-स्थिति: -10px -10px; /*किनारे के साथ पैटर्न काटें*/ मार्जिन: 0 ऑटो) img (चौड़ाई: 100%;)

3. ग्रेडिएंट रिपीट

लीनियर और रेडियल ग्रेडिएंट्स के अलावा, ग्रेडिएंट रिपीटिंग भी होती है, जिसे क्रमशः रिपीटिंग-लीनियर-ग्रेडिएंट() और रिपीटिंग-रेडियल-ग्रेडिएंट() फ़ंक्शंस का उपयोग करके निर्दिष्ट किया जाता है। दोहराए जाने वाले ग्रेडिएंट्स की पृष्ठभूमि गड़बड़ दिखती है, इसलिए यह अनुशंसा की जाती है कि अगला रंग वहीं से शुरू करें जहां पिछला रंग रुका था, इस प्रकार धारीदार पैटर्न बनते हैं।

Div (ऊंचाई: 200px; पृष्ठभूमि: दोहराव-रैखिक-ग्रेडिएंट(45डिग्री, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); ) div (ऊंचाई: 200px; पृष्ठभूमि: दोहराव-रेडियल-ग्रेडिएंट(सर्कल, # B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px )

4. क्रॉस-ब्राउज़र ग्रेडिएंट

सभी ब्राउज़रों में ग्रेडिएंट्स को सही ढंग से प्रदर्शित करने के लिए, आपको एक क्रॉस-ब्राउज़र प्रविष्टि जोड़ने की आवश्यकता है।

रैखिक ढलान

एमएस-फ़िल्टर: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#1471da,endColorstr=#1C85FB)"; /* आईई 8-9 */ पृष्ठभूमि: -वेबकिट-लीनियर-ग्रेडिएंट(बाएं, लाल, #f06d06); /* सफारी 5.1, आईओएस 5.0-6.1, क्रोम 10-25, एंड्रॉइड 4.0-4.3 */ पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (बाएं, लाल, #f06d06); /* फ़ायरफ़ॉक्स 3.6-15 */ पृष्ठभूमि: -ओ-लीनियर-ग्रेडिएंट (बाएं, लाल, #f06d06); /* ओपेरा 11.1-12 */ पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, लाल, #f06d06); /* ओपेरा 15+, क्रोम 25+, IE 10+, फ़ायरफ़ॉक्स 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

रैखिक ग्रेडियेंट दोहराव

पृष्ठभूमि: -वेबकिट-दोहराव-रैखिक-ढाल (लाल, पीला 10%, हरा 20%); /* सफ़ारी 5.1 - 6.0 */ पृष्ठभूमि: -ओ-दोहराव-रैखिक-ढाल (लाल, पीला 10%, हरा 20%); /* ओपेरा 11.1-12.0 */ पृष्ठभूमि: -मोज़-रिपीटिंग-लीनियर-ग्रेडिएंट (लाल, पीला 10%, हरा 20%); /* फ़ायरफ़ॉक्स 3.6-15 */ पृष्ठभूमि: दोहराव-रैखिक-ढाल (लाल, पीला 10%, हरा 20%); /* मानक वाक्यविन्यास */

रेडियल ग्रेडियेंट

पृष्ठभूमि: -वेबकिट-रेडियल-ग्रेडिएंट (लाल, पीला, हरा); /* सफ़ारी 5.1-6.0 */ पृष्ठभूमि: -ओ-रेडियल-ग्रेडिएंट (लाल, पीला, हरा); /* ओपेरा 11.6-12.0 */ पृष्ठभूमि: -मोज़-रेडियल-ग्रेडिएंट (लाल, पीला, हरा); /* फ़ायरफ़ॉक्स 3.6-15 */ पृष्ठभूमि: रेडियल-ग्रेडिएंट (लाल, पीला, हरा); /* मानक सिंटैक्स */ पृष्ठभूमि: -वेबकिट-रेडियल-ग्रेडिएंट (60% 55%, सबसे दूर की ओर, लाल, पीला, काला); /* सफ़ारी 5.1-6.0 */ पृष्ठभूमि: -ओ-रेडियल-ग्रेडिएंट (60% 55%, सबसे दूर की ओर, लाल, पीला, काला); /* ओपेरा 11.6-12.0 */ पृष्ठभूमि: -मोज़-रेडियल-ग्रेडिएंट (60% 55%, सबसे दूर की ओर, लाल, पीला, काला); /* फ़ायरफ़ॉक्स 3.6-15 */ पृष्ठभूमि: रेडियल-ग्रेडिएंट (60% 55% पर सबसे दूर की ओर, लाल, पीला, काला); /* मानक वाक्यविन्यास */

रेडियल ग्रेडिएंट रिपीट

पृष्ठभूमि: -वेबकिट-दोहराव-रेडियल-ग्रेडिएंट (लाल, पीला 10%, हरा 15%); /* सफ़ारी 5.1-6.0 */ पृष्ठभूमि: -ओ-दोहराव-रेडियल-ग्रेडिएंट (लाल, पीला 10%, हरा 15%); /* ओपेरा 11.6-12.0 */ पृष्ठभूमि: -मोज़-रिपीटिंग-रेडियल-ग्रेडिएंट (लाल, पीला 10%, हरा 15%); /* फ़ायरफ़ॉक्स 3.6-15 */ पृष्ठभूमि: दोहराव-रेडियल-ग्रेडिएंट (लाल, पीला 10%, हरा 15%); /* मानक वाक्यविन्यास */

5. ग्रेडियेंट और पृष्ठभूमि छवि संयोजन

एक ग्रेडिएंट और एक छवि को मिलाकर, आप दिलचस्प प्रभाव बना सकते हैं। ग्रेडिएंट के लिए, आपको पारभासी रंगों का उपयोग करने की आवश्यकता है ताकि चित्र दृश्यमान रहे।

div (ऊंचाई: 453पीएक्स; पृष्ठभूमि: रैखिक-ढाल(45डिग्री, आरजीबीए(103, 0, 31, .8), आरजीबीए(34, 101, 163, ..जेपीजी); पृष्ठभूमि-आकार: कवर; ) सीएसएस फ़ंक्शन

परिभाषा और अनुप्रयोग

सीएसएस फ़ंक्शन रेडियल-ग्रेडिएंट () को उसके त्रिज्या के साथ स्थित किया जाता है, जो तत्व के केंद्र से बाहर की ओर एक गोलाकार या अण्डाकार आकार में फैला होता है, जिसमें ग्रेडिएंट के रंग तत्व के पूरे स्थान पर समान रूप से वितरित होते हैं।

रेडियल ग्रेडिएंट बनाने का सिद्धांत रैखिक ग्रेडिएंट (रैखिक-ग्रेडिएंट()) बनाने के समान है, इसके लिए आपको बस शुरुआती रंग निर्दिष्ट करने की आवश्यकता है - यह ग्रेडिएंट और अंतिम रंग के बीच में स्थित होगा, जो स्थित होगा ढाल के अंत में.

आप "" और "" लेखों में ग्रेडिएंट्स के साथ काम करने के बारे में अधिक जानकारी प्राप्त कर सकते हैं। कृपया ध्यान दें कि लेख पुराने ब्राउज़रों के साथ काम करने की बारीकियों पर प्रकाश डालते हैं और कई उदाहरण प्रदान करते हैं।

ब्राउज़र समर्थन

समारोह			ओपेरा		आईएक्सप्लोरर	किनारा
रेडियल-ग्रेडिएंट()	26.0 10.0 -वेबकिट-	16.0 3.6 -मोज़-	12.1 11.1 -ओ-	6.1 5.1 -वेबकिट-	10.0	12.0

सीएसएस सिंटैक्स:

पृष्ठभूमि-छवि / पृष्ठभूमि: रेडियल-ग्रेडिएंट ([कीवर्ड आकार (या आकार)] स्थिति x-अक्ष y-अक्ष पर, रंग 1 - रुकें 1, . . . , रंग n - रुकें n);

रूप

अण्डाकार आकारदीर्घवृत्त मान द्वारा परिभाषित किया जाता है, जो कि डिफ़ॉल्ट है (इसे निर्दिष्ट करने की कोई आवश्यकता नहीं है), और गोलाकार आकार को वृत्त मान द्वारा परिभाषित किया जाता है।

कीवर्ड

ढाल की गणना दूरी के आधार पर की जाती है निकट/दूर की ओर, या निकटतम/सबसे दूर का कोनातत्व।

अर्थ	विवरण
निकटतम पक्ष	गोल ग्रेडिएंट्स के लिए ग्रेडिएंट की गणना उसके केंद्र से तत्व के निकटतम पक्ष की दूरी के आधार पर की जाती है ( एक्स अक्षया y अक्ष) और निकटतम पार्टियों को ( एक्स अक्षऔर y अक्ष) यदि ढाल दीर्घवृत्त के आकार में है। पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (60% 60% पर निकटतम वृत्त, बेर, काला, नारंगी); पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (दीर्घवृत्त निकटतम पक्ष 60% 60% पर, बेर, काला, नारंगी);
निकटतम-कोना	ग्रेडिएंट को फैलाया जाता है ताकि यह केंद्र के निकटतम तत्व के कोने से होकर गुजरे (आकार की गणना तत्व के निकटतम कोने की दूरी के आधार पर की जाती है)। पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (60% 50% पर निकटतम कोने पर घेरा, बेर, काला, नारंगी); पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (दीर्घवृत्त निकटतम कोने पर 60% 50%, बेर, काला, नारंगी);
सबसे दूर की ओर	गोल ग्रेडिएंट्स के लिए ग्रेडिएंट की गणना उसके केंद्र से तत्व के दूर की ओर की दूरी के आधार पर की जाती है ( एक्स अक्षया y अक्ष) और निकटतम पार्टियों को ( एक्स अक्षऔर y अक्ष) यदि ढाल दीर्घवृत्त के आकार में है। पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (100% 50% पर सबसे दूर वाला वृत्त, बेर, काला, नारंगी); पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (दीर्घवृत्त सबसे दूर की ओर 100% 50%, बेर, काला, नारंगी);
सबसे दूर का कोना	ग्रेडिएंट को फैलाया जाता है ताकि यह केंद्र से सबसे दूर तत्व के कोनों से होकर गुजरे (आकार की गणना तत्व के सबसे दूर कोने की दूरी के आधार पर की जाती है)। यह व्यतिक्रम मूल्य है। पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (60% 60% पर सबसे दूर का कोना, बेर, काला, नारंगी); पृष्ठभूमि छवि: रेडियल-ग्रेडिएंट (दीर्घवृत्त सबसे दूर का कोना 60% 60%, बेर, काला, नारंगी);

आकार

ग्रेडिएंट आकार का आकार सेट करता है। वृत्त या दीर्घवृत्त मान निर्दिष्ट करने की कोई आवश्यकता नहीं है, उपयोग करना वर्जित है कीवर्डयदि आकार निर्दिष्ट है. यदि आप निर्दिष्ट करते हैं एक मान, तो इसे ब्राउज़र द्वारा माना जाएगा . यदि आप निर्दिष्ट करते हैं दो अर्थ, वह पहला मानब्राउज़र द्वारा इस पर विचार किया जाएगा क्षैतिज त्रिज्या, ए दूसरा अर्थकैसे अण्डाकार तत्व के लिए ऊर्ध्वाधर त्रिज्या .

मैं आपका ध्यान इस तथ्य की ओर आकर्षित करता हूं यदि आप केवल एक मान निर्दिष्ट करते हैं तो आपको प्रतिशत मानों का उपयोग करने की अनुमति नहीं है(गोल तत्व के लिए त्रिज्या), जब उपयोग किया जाता है दो अर्थ(अण्डाकार ढाल के लिए) इन मानों को प्रतिशत के रूप में इंगित करने की अनुमति है।

पद

रेडियल ग्रेडिएंट की प्रारंभिक स्थिति -सेंटर कीवर्ड द्वारा निर्धारित की जाती है, लेकिन इसका उपयोग करके इसे बदला जा सकता है लंबाई की इकाइयाँ(उदाहरण के लिए: पिक्सलया ईएम), प्रतिशत मानऔर कीवर्ड, जिनका उपयोग किया जाता है सीएसएस संपत्तिपृष्ठभूमि-स्थिति, यह पृष्ठभूमि छवि की स्थिति (स्थिति) के लिए ज़िम्मेदार है।

अर्थ	विवरण
बाएँ शीर्ष बायां केंद्र बायां नीचे दांया शीर्ष दायां केंद्र ठीक नीचे मध्य शीर्ष केंद्र केंद्र मध्य तल	छवि की स्थिति निर्धारित करता है. पहला मान क्षैतिज स्थिति है और दूसरा मान ऊर्ध्वाधर स्थिति है। यदि आप केवल एक कीवर्ड निर्दिष्ट करते हैं, तो दूसरा मान "केंद्र" होगा
x%y%	0% 0% (यह व्यतिक्रम मूल्य है). निचले दाएं कोने में 100% 100%. यदि केवल एक मान निर्दिष्ट है, तो दूसरा मान होगा 50%.
x y	छवि की स्थिति निर्धारित करता है. पहला मान क्षैतिज स्थिति है और दूसरा मान ऊर्ध्वाधर स्थिति है। ऊपरी बाएँ कोने में है 0 0. मान पिक्सेल या अन्य सीएसएस इकाइयों में हो सकते हैं। यदि केवल एक मान निर्दिष्ट है, तो दूसरा मान होगा 50%. आप साझा कर सकते हैं दिलचस्पीऔर इकाइयाँ।

रंग

इसे न केवल "पूर्वनिर्धारित रंगों" का उपयोग करने की अनुमति है, बल्कि किसी भी "" का भी उपयोग करने की अनुमति है - हेक्साडेसिमल (हेक्स), आरजीबी/-ए और एचएसएल/-ए रंग मान .

रुकना

मान रुकने के बिंदु (रंग रुक जाता है ) में निर्दिष्ट हैं लंबाई इकाइयाँ(उदाहरण के लिए - पिक्सलया ईएम) और में प्रतिशत मान. ब्रेकप्वाइंट ब्राउज़र को बताता है कि त्रिज्या ग्रेडिएंट को दिए गए मान द्वारा दिए गए रंग तक पहुंचना चाहिए और यदि कोई हो तो अगले रंग में आसानी से संक्रमण करना चाहिए।

उपयोग उदाहरण

आइए गोलाकार और अण्डाकार आकृतियों के रेडियल ग्रेडिएंट्स को देखें और देखें कि निम्नलिखित व्यावहारिक उदाहरण में उनका अंतर क्या है:

रेडियल ग्रेडियेंट का उपयोग करने का उदाहरण

इस उदाहरण में, हमने चार ब्लॉक बनाए और उन्हें रेडियल ग्रेडिएंट दिए। ऊपरी ब्लॉक हैं अण्डाकार आकार, और निचले ब्लॉक गोलाकार.

आइए रेडियल ग्रेडिएंट की स्थिति का एक उदाहरण देखें।

रेडियल ग्रेडिएंट्स की स्थिति का उदाहरण

5px 45px पर

क्लास = "टेस्ट2" > 50% शीर्ष पर

क्लास = "टेस्ट3" >शीर्ष बाईं ओर

0% तल पर

क्लास = "टेस्ट5" >निचले केंद्र में

क्लास = "टेस्ट6" > 100% 100% पर

इस उदाहरण में हमने बनाया है छह ब्लॉकग्रेडिएंट्स (गोलाकार और अण्डाकार) के विभिन्न आकारों के साथ और प्रत्येक ब्लॉक के लिए ग्रेडिएंट को अलग-अलग तरीके से रखा गया है, जो मूल्यों को दर्शाता है पिक्सल, प्रतिशतऔर उपयोग कर रहे हैं कीवर्ड.

कृपया ध्यान दें कि यदि रेडियल ग्रेडिएंट डिफ़ॉल्ट रूप से केंद्र में स्थित है, और तत्व का आकार चौकोर है, तो आपको गोलाकार ग्रेडिएंट और दीर्घवृत्त-आकार वाले ग्रेडिएंट के बीच अंतर नहीं दिखाई देगा।

आइए रेडियल ग्रेडिएंट स्टॉप पॉइंट का उपयोग करने का एक उदाहरण देखें:

इस उदाहरण में हमने बनाया है छह ब्लॉक: तीन शीर्ष ब्लॉकसे अलग तीन निचलेकेवल इसके द्वारा ढाल आकार, मुख्य बिंदु वही हैं:

पहला और चौथा ब्लॉक – दो रंग ढाल लाल रंग, जो आसानी से बदल जाता है हरा, तत्व के शेष भाग पर कब्जा कर रहा है।
दूसरा और पांचवां ब्लॉक – तीन रंग ढाल, जिसमें केंद्र का 10% हिस्सा भरा हुआ है लाल रंग, जो आसानी से बदल जाता है हरा 50% के रोक बिंदु के साथ, यह बदले में आसानी से आगे बढ़ता है नीला, जो शेष तत्व को ग्रहण कर लेता है।
तीसरा और छठा ब्लॉक – तीन रंग ढालजिसमें केंद्र का 50 प्रतिशत हिस्सा भरा हुआ है लाल रंग, जो आसानी से बदल जाता है हरा 85% के रोक बिंदु के साथ, यह आसानी से आगे बढ़ता है नीला, जो तत्व के पूरे शेष छोटे हिस्से को ग्रहण करता है।

आइए देखें कि सीएसएस में रेडियल ग्रेडिएंट के आकार को कैसे नियंत्रित किया जाए।

रेडियल ग्रेडियेंट के आकार का उदाहरण

इस उदाहरण में, हमने तीन ब्लॉक बनाए:

प्रथम खण- हमने संकेत दिया एक मान 50px, जिसकी व्याख्या ब्राउज़र द्वारा की गई थी वृत्ताकार ढाल के लिए त्रिज्या. ग्रेडिएंट के लिए निर्दिष्ट 7 रंग. ध्यान दें कि सबसे बाहरी रंग शेष क्षेत्र को भर देता है।

दूसरा ब्लॉक- हमने संकेत दिया दो अर्थप्रतिशत में: पहला मान - क्षैतिज त्रिज्या, ए दूसरा अर्थ - ऊर्ध्वाधर त्रिज्याएक अण्डाकार ढाल के लिए. ग्रेडिएंट के लिए निर्दिष्ट 8 रंग. कृपया ध्यान दें कि हमने सफेद को अंतिम रंग के रूप में निर्दिष्ट किया, जिसने शेष क्षेत्र को भर दिया(एक विकल्प केवल ढाल आकार छोड़ना है)।

तीसरा ब्लॉक- हमने संकेत दिया दो अर्थ लंबाई इकाइयों में (पिक्सलऔर ईएम): पहला मान - क्षैतिज त्रिज्या, ए दूसरा अर्थ - ऊर्ध्वाधर त्रिज्याएक अण्डाकार तत्व के लिए. ग्रेडिएंट के लिए निर्दिष्ट 7 रंग.

रेडियल ग्रेडिएंट्स को रैखिक ग्रेडिएंट्स की तुलना में अलग तरीके से खींचा जाता है। यदि रैखिक रंग दिशा निर्धारित करने वाली रेखा के लंबवत स्थित हैं, तो रेडियल में रंग किसी दिए गए केंद्र से अलग हो जाते हैं, और ढाल एक वृत्त या दीर्घवृत्त का आकार ले सकती है।

सबसे सरल ग्रेडिएंट के लिए, केवल रंग सेट करना पर्याप्त है:

पृष्ठभूमि: रेडियल-ग्रेडिएंट (सोना, नारंगी);

डिफ़ॉल्ट रूप से, ग्रेडिएंट का केंद्र केंद्र में होता है, ग्रेडिएंट में दीर्घवृत्त का आकार होता है:

रंगों के अलावा, आप ग्रेडिएंट का आकार, स्थिति और आकार सेट कर सकते हैं। पैरामीटर संयुक्त होते हैं और रैखिक ग्रेडिएंट्स की तुलना में अधिक जटिल व्यवहार करते हैं।

रूप(ढाल का अंतिम आकार) एक वृत्त या दीर्घवृत्त हो सकता है। डिफ़ॉल्ट एक दीर्घवृत्त है, ग्रेडिएंट तत्व के सभी खाली स्थान को घेर लेता है, यदि आवश्यक हो तो खिंच जाता है।

ग्रेडिएंट में वृत्त का आकार होने के लिए, इसे वृत्त कीवर्ड का उपयोग करके स्पष्ट रूप से निर्दिष्ट किया जाना चाहिए।

यदि आकार निर्दिष्ट नहीं है, लेकिन आकार निर्दिष्ट है, तो एक मान वृत्त की त्रिज्या निर्दिष्ट करता है; यदि दो मान हैं, तो ढाल एक दीर्घवृत्त का आकार लेती है। यदि आयाम मौजूद हैं, तो स्पष्ट रूप से ग्रेडिएंट आकार को निर्दिष्ट करने पर ध्यान नहीं दिया जाता है।

पदयह निर्धारित करता है कि यह कहाँ स्थित होगा केंद्रढाल. रैखिक ग्रेडिएंट के लिए समान कीवर्ड का उपयोग किया जाता है, लेकिन at उपसर्ग के साथ: शीर्ष पर, दाईं ओर, नीचे, बाईं ओर और केंद्र में डिफ़ॉल्ट मान होते हैं।

उन्हें किसी दिए गए पक्ष पर ढाल की स्थिति के लिए भी जोड़ा जा सकता है, उदाहरण के लिए: दाएं शीर्ष पर - ऊपरी दाएं कोने में।

नीचे आप देख सकते हैं कि विभिन्न पद कैसे काम करते हैं:

पहला वर्ग कोड:

पृष्ठभूमि: रेडियल-ग्रेडिएंट (ऊपर बाईं ओर, बैंगनी, गहरा लाल, नारंगी-लाल, सोना);

आप ग्रेडिएंट की सटीक स्थिति भी सेट कर सकते हैं, उदाहरण के लिए 20% 50% या 10px 150px पर।

आकारअंतिम ढाल आकार के आयाम निर्धारित करता है। अण्डाकार ग्रेडिएंट्स के लिए, मानों को प्रतिशत के रूप में निर्दिष्ट किया जा सकता है, लेकिन गोलाकार ग्रेडिएंट्स के लिए - नहीं।

यदि एक मान निर्दिष्ट किया गया है, तो इसे वृत्ताकार ढाल की त्रिज्या माना जाता है। यदि दो मान निर्दिष्ट हैं, तो पहले को दीर्घवृत्त की क्षैतिज त्रिज्या माना जाता है, दूसरे को ऊर्ध्वाधर त्रिज्या माना जाता है।

नीचे वृत्ताकार और अण्डाकार ग्रेडिएंट के उदाहरण दिए गए हैं। आकृति का आकार दिए गए आयामों द्वारा निर्धारित होता है:

आप कीवर्ड का भी उपयोग कर सकते हैं:

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

कोड की क्रिया को देखना आसान बनाने के लिए कुछ ग्रेडिएंट्स में निचली स्थिति जोड़ी गई:

रेडियल ग्रेडिएंट को भी दोहराया जा सकता है - यह रिपीटिंग-रेडियल-ग्रेडिएंट है।

उदाहरण कोड:

पृष्ठभूमि: दोहराव-रेडियल-ग्रेडिएंट (सर्कल, डार्कखाकी, डार्कखाकी .5em, पारदर्शी .5em, पारदर्शी 1.5em);

एक रेखीय ग्रेडिएंट की तरह, एक दोहराई जाने वाली ग्रेडिएंट बहुत अच्छी तरह से प्रस्तुत नहीं होती है।

विभिन्न पृष्ठभूमियों को विभिन्न मापदंडों के साथ जोड़कर आप अद्भुत चीजें प्राप्त कर सकते हैं:

यदि आप पैटर्न बनाते समय निरपेक्ष इकाइयों (पीएक्स) के बजाय सापेक्ष इकाइयों (ईएम,%) का उपयोग करते हैं, तो परिणामी पैटर्न का आकार केवल फ़ॉन्ट आकार को बदलकर आसानी से समायोजित किया जा सकता है।

क्रमिक पृष्ठभूमि

सीएसएस ग्रेडिएंट आपको दो या अधिक निर्दिष्ट रंगों के बीच सहज बदलाव प्रदर्शित करने की अनुमति देते हैं।

CSS दो प्रकार के ग्रेडिएंट को परिभाषित करता है:

रैखिक ग्रेडिएंट्स (नीचे/ऊपर/बाएँ/दाएँ/तिरछे जाते हैं)
रेडियल ग्रेडिएंट्स (उनके केंद्र द्वारा परिभाषित)

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

एक रेखीय ढाल बनाने के लिए, आपको कम से कम दो रंग स्टॉप परिभाषित करने होंगे। कलर स्टॉप वे रंग हैं जिन्हें आप बनाना चाहते हैं सहज परिवर्तनउन दोनों के बीच। आप ग्रेडिएंट प्रभाव के साथ एक प्रारंभिक बिंदु और दिशा (या कोण) भी निर्दिष्ट कर सकते हैं।

वाक्य - विन्यास

पृष्ठभूमि: रैखिक-ढाल( दिशा, रंग-स्टॉप1, रंग-स्टॉप2, ...);

रैखिक ढाल - ऊपर से नीचे (डिफ़ॉल्ट)

निम्नलिखित उदाहरण शीर्ष से शुरू होने वाली एक रैखिक ढाल दिखाता है। यह लाल रंग से प्रारंभ होकर पीले रंग की ओर बढ़ता है:

उदाहरण

#स्नातक (
पृष्ठभूमि: रैखिक-ढाल (लाल, पीला);
}

रैखिक ढाल - बाएँ से दाएँ

निम्नलिखित उदाहरण बाईं ओर से शुरू होने वाली एक रैखिक ढाल दिखाता है। यह लाल रंग से प्रारंभ होकर पीले रंग की ओर बढ़ता है:

उदाहरण

#स्नातक (
पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, लाल, पीला);
}

रैखिक ढाल-विकर्ण

आप क्षैतिज और ऊर्ध्वाधर दोनों प्रारंभिक स्थितियों को निर्दिष्ट करके एक विकर्ण ढाल बना सकते हैं।

निम्नलिखित उदाहरण एक रैखिक ढाल दिखाता है जो ऊपर बाईं ओर शुरू होता है (और नीचे दाईं ओर जाता है)। यह लाल रंग से प्रारंभ होकर पीले रंग की ओर बढ़ता है:

उदाहरण

#स्नातक (
पृष्ठभूमि: रैखिक-ढाल (नीचे दाईं ओर, लाल, पीला);
}

कोणों का उपयोग करना

यदि आप ढाल की दिशा पर अधिक नियंत्रण चाहते हैं, तो आप पूर्वनिर्धारित दिशाओं (नीचे, ऊपर, दाएं, बाएं, नीचे दाएं, आदि) के बजाय एक कोण परिभाषित कर सकते हैं।

वाक्य - विन्यास

पृष्ठभूमि: रैखिक-ढाल( कोण, रंग-स्टॉप1, रंग-स्टॉप2);

कोण को क्षैतिज रेखा और ढाल रेखा के बीच के कोण के रूप में निर्दिष्ट किया जाता है।

निम्नलिखित उदाहरण दिखाता है कि रैखिक ग्रेडिएंट्स पर कोणों का उपयोग कैसे करें:

उदाहरण

#स्नातक (
पृष्ठभूमि: रैखिक-ढाल (-90डिग्री, लाल, पीला);
}

एकाधिक रंग स्टॉप का उपयोग करना

निम्नलिखित उदाहरण एकाधिक रंग स्टॉप के साथ एक रैखिक ढाल (ऊपर से नीचे) दिखाता है:

उदाहरण

#स्नातक (
पृष्ठभूमि: रैखिक-ढाल (लाल, पीला, हरा);
}

निम्नलिखित उदाहरण दिखाता है कि इंद्रधनुष के रंग और कुछ पाठ के साथ एक रैखिक ढाल (बाएं से दाएं) कैसे बनाया जाए:

क्रमिक पृष्ठभूमि

उदाहरण

#स्नातक (
पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, लाल, नारंगी, पीला, हरा, नीला, नीला, बैंगनी);
}

टिप्पणी: इंटरनेट एक्सप्लोरर 9 और पुराने संस्करण ग्रेडिएंट का समर्थन नहीं करते हैं।

"/> संपादक में डेमो देखें

पारदर्शिता का उपयोग करना

सीएसएस ग्रेडिएंट पारदर्शिता का भी समर्थन करते हैं, जिसका उपयोग फ़ेडिंग प्रभाव बनाने के लिए किया जा सकता है।

पारदर्शिता जोड़ने के लिए, हम रंग स्टॉप को परिभाषित करने के लिए RGBA() फ़ंक्शन का उपयोग करते हैं। RGBA() फ़ंक्शन में अंतिम पैरामीटर 0 और 1 के बीच का मान हो सकता है, और यह रंग की पारदर्शिता निर्धारित करता है: 0 पूर्ण पारदर्शिता को इंगित करता है, 1 पूर्ण रंग (कोई पारदर्शिता नहीं) को इंगित करता है।

निम्नलिखित उदाहरण बाईं ओर से शुरू होने वाली एक रैखिक ढाल दिखाता है। यह पूरी तरह से पारदर्शी होने लगता है और पूर्ण लाल रंग में बदल जाता है:

उदाहरण

#स्नातक (
पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, आरजीबीए (255,0,0,0), आरजीबीए (255,0,0,1));
}

रैखिक ढाल दोहराएँ

रिपीट-लीनियर-ग्रेडिएंट () फ़ंक्शन का उपयोग रैखिक ग्रेडिएंट को पुनरावृत्त करने के लिए किया जाता है:

उदाहरण

दोहराई जाने वाली रैखिक ढाल:

#स्नातक (
पृष्ठभूमि: दोहराव-रैखिक-ढाल (लाल, पीला 10%, हरा 20%);
}

सीएसएस रेडियल ग्रेजुएट्स

रेडियल ग्रेडिएंट को इसके केंद्र द्वारा परिभाषित किया गया है।

रेडियल ग्रेडिएंट बनाने के लिए, आपको कम से कम दो रंग स्टॉप को भी परिभाषित करना होगा।

वाक्य - विन्यास

पृष्ठभूमि:रेडियल-ग्रेडिएंट( आकृति का आकारपर स्थिति, प्रारंभ-रंग, ..., अंतिम-रंग);

डिफ़ॉल्ट रूप से, आकृति एक दीर्घवृत्त है, आकार सबसे दूर का कोना है, और स्थिति केंद्र है।

रेडियल ग्रेडिएंट - रंगों के बीच एकसमान अंतर रुकता है (डिफ़ॉल्ट)

निम्नलिखित उदाहरण एक रेडियल ग्रेडिएंट दिखाता है जिसमें रंग समान रूप से फैलना बंद हो जाता है।

सैमसंग गेम... एंड्रॉइड डेस्कटॉप गायब हो गया है या लॉन्चर काम नहीं कर रहा है!

अगला लेख एक्सपीरिया कंपेनियन - एक्सपीरिया को अपडेट करने और पुनर्स्थापित करने के लिए विंडोज पीसी पर एक नया एप्लिकेशन

ये भी पढ़ें

Android के लिए सर्वश्रेष्ठ संगीत प्लेयर

2024-03-13 00:03:49

हब, स्विच और राउटर क्या है?

2024-03-12 00:04:38

JSON संक्षिप्त नाम डिकोडिंग

2024-03-11 00:04:21

एक दिलचस्प प्रभाव के साथ jQuery छवि गैलरी

2024-03-09 00:04:15