CSS3 के परिपत्र और अण्डाकार ग्रेड [CSS3 के टिप्स]

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

द ग्रैडिएंट सिंटेक्स

CSS3 में ढाल का उपयोग करके घोषित किया गया है पृष्ठभूमि छवि संपत्ति। यह बेहतर संगतता के लिए है जब हमें भी जोड़ना होगा पीछे का रंग एक ही नियम के सेट में, ताकि वे एक-दूसरे से न टकराएं। फिर, रेडियल ग्रेडिएंट बनाने के लिए हम बस इसे इसके साथ कहते हैं रेडियल-ढाल () समारोह। ग्रेडिएंट को ठीक से सेट करने के लिए फ़ंक्शन में शामिल होने के लिए चार मान हैं.

पहला मान परिभाषित करता है ढाल की स्थिति. हम एक वर्णनात्मक कीवर्ड का उपयोग कर सकते हैं जैसे कि ऊपर, नीचे, केंद्र और बाएं, या हम भी अधिक विशिष्ट हो सकते हैं जैसे, 50% 50% केंद्र में ग्रेडिएंट सेट करने के लिए या 0% 0% शुरू करने के लिए ढाल सेट करने के लिए बाएं से बाएं.

दूसरा मान परिभाषित करता है आकार और ढाल का आकार, ग्रेडियरों को आकार देने के लिए दो तर्क हैं, पहला अंडाकार जो डिफ़ॉल्ट है, और दूसरा है वृत्त.

और के लिए ढाल का आकार, हम निम्नलिखित छह तर्कों में से एक का चयन कर सकते हैं.

तालिका स्रोत: मोज़िला डेवलपर नेटवर्क.

अंत में, तीसरा और चौथा परिभाषित करते हैं रंग संयोजन. तो, यहाँ बताया गया है कि हम किस तरह से वाक्य रचना को बनाते हैं दीर्घ वृत्ताकार ढ़ाल, और इस समय हम उपयोग करेंगे आवरण ढाल के आकार के लिए, इसलिए यह कंटेनर को कवर करने के लिए व्यापक रूप से फैल जाएगा;

 शरीर पृष्ठभूमि-छवि: रेडियल-ग्रेडिएंट (केंद्र केंद्र, दीर्घवृत्त आवरण, # ffeda3, # ff800800);  

बनाने के लिए परिपत्र ढाल हम बस इसे इस तरह से कर सकते हैं:

 शरीर पृष्ठभूमि-छवि: रेडियल-ग्रेडिएंट (केंद्र केंद्र, सर्कल कवर, # ffeda3, # ffc800);  

जैसा कि नाम से ही स्पष्ट है, ढाल का आकार एक चक्र होगा.

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

बस ध्यान दें, हालांकि सभी ब्राउज़र अभी भी इस सुविधा के लिए पूर्ण समर्थन प्रदान करने की प्रक्रिया में हैं, इसलिए उन्हें अभी भी विक्रेता उपसर्ग की आवश्यकता है। इस प्रकार, संपूर्ण संपूर्ण सिंटैक्स जो सभी आधुनिक ब्राउज़रों में काम करेगा - IE10 +, फ़ायरफ़ॉक्स 3.6+, क्रोम 4.0+, सफारी 4.0+ और ओपेरा 11+ - कुछ ऐसा दिखाई देगा;

 शरीर पृष्ठभूमि-छवि: रेडियल-ढाल (केंद्र तल, दीर्घवृत्त आवरण, # ffeda3, # ff800800); पृष्ठभूमि-छवि: -o- रेडियल-ग्रेडिएंट (केंद्र तल, दीर्घवृत्त कवर, # ffeda3, # ffc800); पृष्ठभूमि-छवि: -ms-रेडियल-ग्रेडिएंट (केंद्र तल, दीर्घवृत्त कवर, # ffeda3, # ffc800); पृष्ठभूमि-छवि: -मोज़-रेडियल-ग्रेडिएंट (केंद्र तल, दीर्घवृत्त कवर, # ffeda3, # ffc800); पृष्ठभूमि-चित्र: -webkit-radial-gradient (केंद्र तल, दीर्घवृत्त आवरण, # ffeda3, # ffc800);  

डेमो देखें या ग्रेडिएंट के साथ खेलने के लिए स्रोत डाउनलोड करें.

• डेमो
• स्रोत डाउनलोड करें

अंतिम शब्द

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

• Colorzilla स्नातक
• Gradientoo

रेडियल ग्रेडिएंट केवल एक प्रकार का CSS3 के गैजेट हैं, हम भविष्य की पोस्ट में इस विषय पर अपनी चर्चा जारी रखेंगे, इसलिए Hongkiat.com पर बने रहें