CSS के साथ अपने टेक्स्ट तत्वों में एक रेखीय ग्रेडिएंट रंग जोड़ने का तरीका जानें, और एक सामान्य ग्रेडिएंट गलती से कैसे बचें।
अपने HTML टेक्स्ट तत्वों में एक ग्रेडिएंट टेक्स्ट रंग जोड़ने के लिए, आपको निम्नलिखित CSS गुणों की आवश्यकता होगी:
background-webkit-background-clip-webkit-text-fill-color
हम background का उपयोग क्यों कर रहे हैं? पाठ रंगने के लिए संपत्ति? दृष्टिकोण थोड़ा हैकी लगता है, लेकिन मैं वादा करता हूं कि यह काम करता है!
आइए एक त्वरित उदाहरण बनाएं जहां हम निम्नलिखित दो रंगों, नारंगी और लाल का उपयोग करके टेक्स्ट तत्व पर बाएं से दाएं एक रैखिक ढाल लागू करते हैं:
एचटीएमएल
एक <h2> text-gradient called नामक वर्ग विशेषता के साथ शीर्षक तत्व :
<h2 class="text-gradient">Gradient text color!</h2>CSS
.text-gradient . में रंग ढाल शैलियों को जोड़ें कक्षा:
.text-gradient {
/* Set the background color */
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
/* Mask the color to the text, and remove the rest */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
}परिणाम:
ग्रेडिएंट टेक्स्ट का रंग!
बढ़िया!
लेकिन एक सेकंड रुकें!
क्या आपको कोई समस्या दिखाई देती है कि टेक्स्ट तत्व पर दो रंग कैसे लागू होते हैं? रंग असमान रूप से लागू होते हैं।
linear-gradient CSS फ़ंक्शन दो रंग मान लेता है:
#ff8a00(नारंगी)#DD4C4F(लाल)
और इसे 0 से 100% तक समान रूप से फैलाना चाहिए, जैसा कि CSS में बताया गया है:
(to right, #ff8a00 0%, #DD4C4F 100%)तो हम चाहते हैं यह टेक्स्ट एलिमेंट पर:
लेकिन हमारा टेक्स्ट उदाहरण लगभग पूरी तरह से नारंगी:
ग्रेडिएंट टेक्स्ट का रंग!
युक्ति:यदि आप इस वेबसाइट पर रंग विषय को डार्क मोड (चंद्रमा आइकन पर क्लिक करें) पर टॉगल करते हैं तो इसे देखना आसान हो जाता है।
ऐसा इसलिए होता है क्योंकि <h2> शीर्षक तत्व एक ब्लॉक-स्तर है तत्व, डिफ़ॉल्ट रूप से। इसका मतलब है कि उनकी पृष्ठभूमि पूरी चौड़ाई . तक फैली हुई है उनके मूल कंटेनर का।
यह ग्रेडिएंट क्लास से रंग बनाता है (.text-gradient ) जिसे हमने <h2> . में जोड़ा है तत्व आपके टेक्स्ट की चौड़ाई से अधिक फैला हुआ है क्योंकि यह background . को लक्षित कर रहा है संपत्ति।
मैं अपनी बात स्पष्ट करने के लिए टेक्स्ट उदाहरण में एक बॉर्डर जोड़ूंगा:
ग्रेडिएंट टेक्स्ट कलर!
क्या आप इसे देखते हैं?
टेक्स्ट ग्रेडियेंट को केवल टेक्स्ट पर सेट किया जाना चाहिए, उसकी पृष्ठभूमि पर नहीं (लेकिन हमें background का उपयोग करने की आवश्यकता है। यह काम करने के लिए संपत्ति)।
इसे ठीक करने के लिए, आपको <h2> . को ओवरराइड करना होगा एलिमेंट का डिफ़ॉल्ट display:block inline-block . जोड़कर सेटिंग इसके बजाय:
.text-gradient {
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}परिणाम:
ग्रेडिएंट टेक्स्ट कलर!
मिठाई! आपको फर्क दिखता हैं? अब दो-रंग के ग्रेडिएंट का लाल हिस्सा नारंगी जितना ही पॉप हो रहा है क्योंकि वे 50-50 पर लागू होते हैं।
ब्राउज़र संगतता
ग्रेडिएंट कलर ट्रिक केवल वेबकिट ब्राउज़र में समर्थित है। अन्य ब्राउज़रों के लिए नियमित CSS color का उपयोग करें एक फ़ॉलबैक विकल्प के रूप में संपत्ति और ग्रेडिएंट के समान रंग का उपयोग करें।