Post Indexing
CSS GRADIENT
जिस तरह आप CSS में किसी तत्व की पृष्ठभूमि को एक ठोस रंग घोषित कर सकते हैं, उसी तरह आप उस पृष्ठभूमि को एक ढाल के रूप में भी घोषित कर सकते हैं। CSS में घोषित Gradient का उपयोग करना, वास्तविक छवि फ़ाइल का उपयोग करने के बजाय, नियंत्रण और प्रदर्शन के लिए बेहतर है।
Gradientआमतौर पर एक रंग होता है जो दूसरे में फीका पड़ जाता है, लेकिन CSS में आप हर पहलू को नियंत्रित कर सकते हैं कि यह कैसे होता है, दिशा से लेकर रंगों तक (जितने चाहें उतने) जहां वे रंग परिवर्तन होते हैं। आइए यह सब करते हैं।
Gradient Background Image
एक ठोस रंग घोषित करते समय सीएसएस में पृष्ठभूमि-रंग संपत्ति का उपयोग करता है, ग्रेडियेंट पृष्ठभूमि-छवि का उपयोग करते हैं। यह कुछ मायनों में उपयोगी है, जिसके बारे में हम बाद में जानेंगे। शॉर्टहैंड बैकग्राउंड प्रॉपर्टी को पता चल जाएगा कि अगर आप एक या दूसरे को घोषित करते हैं तो आपका क्या मतलब है।
Linear Gradient
- शायद सबसे आम और उपयोगी प्रकार का Gradient लीनियर-Gradient() है। Gradient”अक्ष” बाएं से दाएं, ऊपर से नीचे, या आपके द्वारा चुने गए किसी भी कोण पर जा सकते हैं।
- वे अल्पविराम से अलग किए गए रंग आपके द्वारा सामान्य रूप से उपयोग किए जाने वाले रंग के प्रकार हो सकते हैं: हेक्स, नामित रंग, आरजीबीए, एचएसएलए, आदि।
- इसे बाएं से दाएं बनाने के लिए, आप “से” शब्द से शुरू होने वाले रैखिक-ढाल() फ़ंक्शन की शुरुआत में एक अतिरिक्त पैरामीटर पास करते हैं, जो दिशा को इंगित करता है, जैसे “दाएं”:
- यह “टू” सिंटैक्स कोनों के लिए भी काम करता है। उदाहरण के लिए, यदि आप चाहते हैं कि Gradient की धुरी निचले बाएँ कोने से शुरू हो और ऊपरी दाएँ कोने पर जाए, तो आप कह सकते हैं “ऊपर दाईं ओर”:
- यदि वह बॉक्स वर्गाकार होता, तो उस ढाल का कोण 45° होता, लेकिन चूंकि ऐसा नहीं है, ऐसा नहीं है। यदि आप यह सुनिश्चित करना चाहते हैं कि यह 45° है, तो आप यह घोषित कर सकते हैं कि:
- आप केवल दो रंगों तक ही सीमित नहीं हैं। वास्तव में आपके पास जितने चाहें उतने अल्पविराम से अलग किए गए रंग हो सकते हैं। यहां चार हैं:
Repeating Gradients
- आप यह भी घोषित कर सकते हैं कि आप किसी विशेष रंग को “शुरू” करना चाहते हैं। उन्हें “रंग-स्टॉप” कहा जाता है। मान लें कि आप पीले रंग को अधिकांश स्थान लेना चाहते हैं, लेकिन शुरुआत में केवल थोड़ा सा लाल, आप पीले रंग को बहुत जल्दी रोक सकते हैं:
Radial Gradients
रेडियल Gradient रैखिक से इस मायने में भिन्न होता है कि वे एक ही बिंदु से शुरू होते हैं और बाहर की ओर निकलते हैं। ग्रैडिएंट का उपयोग अक्सर एक प्रकाश व्यवस्था का अनुकरण करने के लिए किया जाता है, जैसा कि हम जानते हैं कि यह हमेशा सीधा नहीं होता है, इसलिए वे Gradient को और भी अधिक प्राकृतिक बनाने के लिए उपयोगी हो सकते हैं। डिफ़ॉल्ट पहले रंग के लिए तत्व के (केंद्र केंद्र) में शुरू होता है और तत्व के किनारे की ओर अंत रंग तक फीका होता है। फीका एक समान दर पर होता है चाहे कोई भी दिशा हो।
Conic Gradients
एक शंकु ढाल एक रेडियल ढाल के समान है। दोनों गोलाकार हैं और रंग के रुकने के स्रोत बिंदु के रूप में तत्व के केंद्र का उपयोग करते हैं। हालांकि, जहां रेडियल Gradient का रंग स्टॉप सर्कल के केंद्र से निकलता है, वहीं एक कॉनिक Gradient उन्हें सर्कल के चारों ओर रखता है।
Repeating Gradients
कभी-कभी थोड़ा कम ब्राउज़र समर्थन के साथ दोहराए जाने वाले Gradient हैं। वे रैखिक और रेडियल दोनों किस्मों में आते हैं। गैर-दोहराए जाने वाले ग्रेडिएंट के साथ एक तरकीब है, इस तरह से Gradient बनाने के लिए कि अगर यह थोड़ा छोटा आयत होता, तो यह दोहराए जाने वाले पैटर्न को बनाने के लिए खुद के अन्य छोटे छोटे आयत संस्करणों के साथ पंक्तिबद्ध होता। तो अनिवार्य रूप से उस ढाल को बनाएं और उस छोटे से छोटे आयत को बनाने के लिए पृष्ठभूमि-आकार सेट करें।
इससे पट्टियां बनाना आसान हो गया, जिसे आप घुमा सकते थे या जो भी कर सकते थे। रिपीटिंग-लीनियर-ग्रेडिएंट () के साथ, आपको उस प्रवंचना का सहारा नहीं लेना है। Gradient का आकार अंतिम रंग स्टॉप द्वारा निर्धारित किया जाता है। अगर वह 20px पर है, तो ग्रेडिएंट का आकार (जो फिर दोहराता है) 20px गुणा 20px वर्ग है।
Improper Fallback Loading
जैसा कि हमने कवर किया है, कुछ वास्तव में पुराने ब्राउज़र किसी भी सीएसएस Gradient सिंटैक्स का समर्थन नहीं करते हैं। यदि आपको एक फॉलबैक की आवश्यकता है जो अभी भी एक ढाल है, तो एक छवि (.jpg / .png) चाल कर सकती है। इसके साथ डरावना हिस्सा यह है कि कुछ कम-पुराने ब्राउज़र, जो अभी सीएसएस ग्रेडियेंट का समर्थन करना शुरू कर रहे थे, फ़ॉलबैक छवि लोड करेंगे। जैसा कि, छवि के लिए HTTP अनुरोध करें, भले ही यह CSS Gradient प्रस्तुत करेगा।
