CSS3 रैखिक ग्रेड [CSS3 युक्तियाँ]

ढाल CSS3 में एक महान रंग सुविधा जोड़ है। केवल एक रंग जोड़ने के बजाय, हम अब छवियों पर भरोसा किए बिना एक घोषणा ब्लॉक में कई रंग संयोजन जोड़ सकते हैं, जो हमारी वेबसाइट में HTTP अनुरोध को कम कर सकता है जिससे वेबसाइट तेजी से लोड हो सकती है.

यदि आपने CSS3 में ग्रेडिएंट के साथ खेला है, तो आप शायद दो तरीकों से परिचित हैं: रेडियल और लीनियर ग्रेडिएंट। आज की पोस्ट बाद की बात होगी.

स्नातक बनाना

जैसा कि कल्पना कहती है कि सीएसएस 3 में ग्रेडिएंट एक छवि है, इसमें अन्य नई सुविधा के अतिरिक्त कोई विशेष गुण नहीं है, इसलिए इसका उपयोग करके घोषित किया जाता है पृष्ठभूमि छवि इसके बजाय संपत्ति.

यदि हम ढाल के लिए पूर्ण वाक्यविन्यास पर एक नज़र डालें, तो यह थोड़ा दिखता है overstuffed, जिससे कुछ लोगों को भ्रम हो सकता है.

 div पृष्ठभूमि-छवि: -webkit-linear-gradient (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # FF5A00 0%, # FFAE00 100%);  

तो चलो चीजों को स्पष्ट करने के लिए एक-एक करके वाक्यविन्यास के प्रत्येक भाग में खुदाई करें.

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

 div पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # FF5A00, # FFAE00);  

ऊपर का स्निपेट ग्रेडिएंट बनाने के लिए W3C से आधिकारिक संस्करण है। यह वास्तव में सरल और काफी आत्म-व्याख्यात्मक है और यह निम्नलिखित ढाल भी बनाएगा.

आप भी उपयोग कर सकते हैं तल विपरीत करने के लिए, वरना सही तथा बाएं.

हम एक विकर्ण ढाल का उपयोग करके भी बना सकते हैं कोण की डिग्री धीरे-धीरे शुरुआती स्थिति के रूप में। यहाँ एक उदाहरण है:

 div पृष्ठभूमि-छवि: रैखिक-ढाल (45deg, # FF5A00, # FFAE00);  

उपरोक्त स्निपेट निम्नलिखित रंग ढाल बनाएगा:

फ़ंक्शन का दूसरा मान बताएगा पहला रंग जानकारी और इसके बंद करो स्थिति जो प्रतिशत में बताया गया है। स्टॉप स्थिति वास्तव में वैकल्पिक है; ब्राउज़र उचित स्थिति को निर्धारित करने के लिए पर्याप्त चतुर है, इसलिए जब हम पहले रंग के स्टॉप को निर्दिष्ट नहीं करते हैं तो ब्राउज़र ले जाएगा 0% डिफ़ॉल्ट के रूप में.

और, अगला मूल्य है दूसरा रंग मेल। यह पिछले मूल्य की तरह काम करता है, केवल अगर यह अंतिम रंग लागू किया गया है, और हम निर्दिष्ट नहीं करते हैं बंद करो स्थिति, का एक मूल्य 100% डिफ़ॉल्ट के रूप में लिया जाएगा। अब, नीचे दिए गए उदाहरण को देखें:

 div पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # FF5A00 0%, # FFAE00 100%);  

ऊपर वाला स्निपेट एक ढाल का निर्माण करेगा जैसा हमने पहले देखा था (कोई अंतर नहीं) लेकिन अब हम रंग रोकने की स्थिति निर्दिष्ट करते हैं;

अब हम बदलते हैं रंग बंद करो, और इस बार हम निर्दिष्ट करेंगे 50% पहले रंग के लिए और 51% दूसरे रंग के लिए, और देखते हैं कि यह कैसे निकलता है;

 div पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # FF5A00 50%, # FFAE00 51%);  

पारदर्शिता

बनाना पारदर्शिता ढाल में भी संभव है। प्रभाव बनाने के लिए हमें रंग का अनुवाद करना होगा हेक्स में RGBA मोड और अल्फा चैनल कम.

 div पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, आरजीबीए (255,90,0,0.2.2), आरजीबी (255,174,0,0.2));  

ऊपर का स्निपेट रंग की तीव्रता को कम कर देगा 20%, और ढाल इस तरह बाहर निकलेगी:

कई रंग

क्या आप और अधिक रंग जोड़ना चाहते हैं, बस एक कॉमा सीमांकक के साथ दूसरे के आगे रंगों को जोड़ें और ब्राउज़र को प्रत्येक रंग स्टॉप की स्थिति निर्धारित करने दें.

 div बैकग्राउंड-इमेज: लीनियर-ग्रेडिएंट (टॉप, रेड, ऑरेंज, येलो, ग्रीन, ब्लू, इंडिगो, वॉयलेट);  

उपरोक्त स्निपेट निम्नलिखित इंद्रधनुष बना देगा.

ब्राउज़र संगतता

दुर्भाग्य से, इस लेखन के समय, सभी वर्तमान ब्राउज़रों को अभी भी मानक सिंटैक्स का समर्थन करना है। वे अभी भी विक्रेता उपसर्ग की जरूरत है (-वेबकिट-, -moz-, -सुश्री- तथा -ओ-)। तो, यही कारण है कि पूरा वाक्यविन्यास इस तरह दिखाई देता है:

 div पृष्ठभूमि-छवि: -webkit-linear-gradient (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # FF5A00 0%, # FFAE00 100%); पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # FF5A00 0%, # FFAE00 100%);  

दूसरी ओर, इंटरनेट एक्सप्लोरर, विशेष रूप से संस्करण 9 और निचला, मानक से बहुत दूर है। में ढाल IE9 और नीचे के साथ घोषित किया गया है फिल्टर, इसलिए यदि हम उन ब्राउज़रों पर ग्रेडिएंट जोड़ना चाहते हैं, तो हमें कुछ इस तरह लिखना होगा;

 div फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);  

फिल्टर इसकी सीमाएं हैं: पहला, यह तीन से अधिक रंगों को जोड़ने की अनुमति नहीं देता है, और पारदर्शिता प्रभाव पैदा करना भी थोड़ा मुश्किल है - यह अनुमति नहीं देता है RGBA, लेकिन आईई फिल्टर का उपयोग करता है #ARGB;

 div फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);  

यहाँ एक उपकरण है जो आपको परिवर्तित करने में मदद करेगा RGBA सेवा मेरे #ARGB.

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

सिंटेक्स फास्टर लिखना

जैसा कि आप ऊपर देख सकते हैं, ब्राउज़रों में धीरे-धीरे अनुकूलता बनाए रखने के लिए, हमें कोड की पाँच और पंक्तियों को जोड़ना होगा जो अक्षम है।.

ऐसे कई तरीके हैं जिनसे हम कार्य को सरल बना सकते हैं; जैसे कि उपसर्ग-मुक्त, उपसर्ग, LESS या Sass का उपयोग कोड संकलित करने में मदद करने के लिए, लेकिन सबसे बढ़कर, हम इस टूल, ColorZilla Gradient का उपयोग करने की सलाह देते हैं। यह उपकरण केवल सभी ब्राउज़रों में काम करने के लिए ग्रेडिएंट के लिए सभी आवश्यक कोड उत्पन्न करेगा.

अंतिम शब्द

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

अभी भी कई चीजें हैं जिन्हें हम तलाशने की योजना बना रहे हैं CSS3 के स्नातक हमारे भविष्य के पोस्ट में, तो Hongkiat.com के लिए बने रहें। अंत में, इस पोस्ट को पढ़ने के लिए धन्यवाद, हमें उम्मीद है कि आपको यह पसंद आया होगा.

आगे की पढाई

• बुलेट प्रूफ क्रॉस ब्राउज़र RGBA बैकग्राउंड्स - ली वर्उ
• CSS3 की छवि - W3.org
• जब मैं CSS3 के ग्रेडर - CanIUse.com का उपयोग कर सकता हूं