क्रॉस-प्लेटफ़ॉर्म रंग ढाल पाठ

यहाँ दो चित्र हैं - यहाँ यह है: ^*



दोनों छवियों में हम सुंदर पाठ देखते हैं। इसकी सुंदरता के अधिकांश भाग के लिए, यह पाठ इस तथ्य के कारण है कि यह एक साधारण रंग के साथ नहीं खींचा गया है, लेकिन एक चिकनी रंग संक्रमण के साथ - तथाकथित ढाल भर।

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

ऐसा क्यों है? हां, क्योंकि पाठ के ढाल रंग के लिए केवल व्यापक रूप से ज्ञात साधन गैर-मानक सीएसएस कोड " -webkit- पृष्ठभूमि-क्लिप: पाठ " है, जो पाठ की सीमा के साथ किसी भी पृष्ठभूमि (ग्रेडिएंट सहित) में कटौती करता है - और जिसे आमतौर पर संयोजन में उपयोग किया जाता है CSS-code " -webkit-text-fill-color: पारदर्शी ", जो पाठ के अक्षरों की पारदर्शिता सुनिश्चित करता है, ताकि पृष्ठभूमि इसके माध्यम से दिखे। यह कोड 2008 के वसंत के बाद से काम कर रहा है, लेकिन, दुर्भाग्य से, केवल वेबकिट-आधारित ब्राउज़रों में, हालांकि हाल ही में संख्या बढ़ी है (ओपेरा के लिए धन्यवाद, जो अपने स्वयं के इंजन से वापस आ गया है), वे अकेले वैश्विक इंजीनियरिंग इंजीनियरिंग के फलों को समाप्त नहीं करते हैं। न तो फ़ायरफ़ॉक्स में और न ही इंटरनेट एक्सप्लोरर में यह कोड काम करेगा।

क्या इस गतिरोध को दूर करना और रंग ढाल द्वारा खींचे गए पाठ के क्रॉस-प्लेटफ़ॉर्म को प्राप्त करना संभव है? हाँ यह संभव है; लेकिन इसके लिए आपको CSS के बजाय जावास्क्रिप्ट का सहारा लेना होगा।

कोडनेम रेनबो प्रोजेक्ट वेबसाइट पर जाएं , वहां डेमो पेज खोलें (उदाहरण के लिए, फ़ायरफ़ॉक्स में) - और आपको एक ग्रेडिएंट में टेक्स्ट के नौ उदाहरण दिखाई देंगे। यह वहां से था कि मैंने ऊपर से दो उदाहरण उधार लिए थे।

यह कैसे प्राप्त किया जाता है? मैनुअल पढ़ना , यह पता लगाना आसान है कि jQuery प्लगइन काम करता है, जो टेक्स्ट को एक-पिक्सेल ऊंचाई की संकीर्ण क्षैतिज स्ट्रिप्स में काटता है, और इस तरह के प्रत्येक पट्टी के अंदर आवश्यक मध्यवर्ती रंग में चित्रित पाठ की एक प्रति प्रदर्शित करता है और ऊर्ध्वाधर रूप से स्थानांतरित हो जाता है, इसलिए यह मूल पाठ के स्थान पर बिल्कुल फिट बैठता है इस पट्टी के अंदर:



कोडेन रेनबो परियोजना के लेखकों के मन में आए इस सुखद विचार के लिए धन्यवाद, हम पाठ के क्रॉस-प्लेटफ़ॉर्म रेंडरिंग के हल किए गए कार्य को एक दिया गया रंग ढाल मान सकते हैं। सच है, यह केवल एक विशेष मामले के लिए हल किया गया था: ढाल ऊर्ध्वाधर होना चाहिए, और इसके अलावा, इस कार्यान्वयन में केवल इसके ऊपर और नीचे के रंगों को सेट करना संभव है - यह काम नहीं करेगा, उदाहरण के लिए, कई विशेष मध्यवर्ती बिंदुओं को असाइन करने और जिससे "क्रोम" अक्षरों के प्रभाव का एहसास होगा। लेकिन ऐसा करने के लिए हमारे पास खुशी मनाने के लिए कुछ है।

_______________
* _{शेक्सपियर, "हेमलेट, डेनमार्क के राजकुमार," अधिनियम III, सीन IV, पास्टरर्नक द्वारा अनुवादित।}