CSS3 का पाठ लुप्त होती

सभी को नमस्कार। आज की पोस्ट छोटी होगी, लेकिन मुझे लगता है कि यह उपयोगी है।
अक्सर आप सुनते हैं कि पाठ को नीचे, ऊपर आदि के लिए "फीका" कैसे किया जाए।
Js पर विकल्प होते हैं, चित्र के साथ विकल्प होते हैं और पाठ के शीर्ष पर सिर्फ एक css ग्रेडिएंट होता है।
आज, इस समस्या को हल करने के लिए थोड़ा अलग दृष्टिकोण दिमाग में आया।
इसका कार्यान्वयन तीन पेनी के समान सरल है।

हमें दो ब्लॉकों की आवश्यकता होगी - एक कंटेनर और पाठ के साथ एक ब्लॉक।

<div class="shadow"> <div class="text"> ---------------------------- </div> </div> 

और सीएसएस में सिर्फ दो कक्षाएं

 .shadow{ width:400px; margin:20px auto; cursor:text; box-shadow:inset 0px -190px 190px -50px #add7f8; } .text{ color:#000; position:relative; z-index:-1; background:#f9fca3; } 

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

पेशेवरों से:
1) पाठ पूरी तरह से हाइलाइट किया गया है
2) टेक्स्ट ब्लॉक स्ट्रीम से बाहर नहीं जाता है और किसी भी सामग्री को div आवरण में जोड़ा जा सकता है (लेकिन यह अब फीका नहीं होगा)
3) क्षीणन ब्लॉक आकार पर निर्भर नहीं करता है और हमेशा वही रहेगा जहां हमने इसे जोड़ा है।

Minuses की:
1) नकारात्मक z- इंडेक्स के कारण, मुझे टेक्स्ट के लिए एक कर्सर आइकन जोड़ना पड़ा (स्पष्टता के लिए)
2) ओपेरा (11.52) में, स्ट्रेचिंग का अभ्यास कुछ अलग तरीके से किया जाता है, जिसके परिणामस्वरूप छाया बहुत तीव्र हो जाती है।
3) IE में 8 समावेशी तक काम नहीं करता है

तदनुसार, रंगों, तीव्रता और आकार को छाया मापदंडों में सेट किया जा सकता है।

यहाँ उदाहरण है

रिसीवर कॉमरेड वीटाज़ेल्टीताकोव मुख्य पृष्ठभूमि के साथ अधिक सुचारू रूप से विलय करने के लिए एक और छाया लागू करने का सुझाव देता है।