आज मैं सीएसएस का उपयोग करके इस प्रभाव को प्राप्त करने के लिए एक दिलचस्प तरीके के बारे में बात करना चाहता हूं:

डेमो

उद्देश्य:

फीका तभी दिखाएं जब टेक्स्ट की ऊंचाई कंटेनर की ऊंचाई से अधिक हो। यह माना जाता है कि कंटेनर के आयाम दिए गए हैं।

समाधान:

पहला कदम

सबसे पहले, मार्कअप बनाएं। हमें तीन ब्लॉक चाहिए होंगे:

• पाठ के लिए ही;
• सहायक अकड़ के लिए;
• फीका करने के लिए।

<div class="text"></div> <div class="helper"></div> <div class="fade"></div> 

दूसरा कदम

मुख्य विचार यह है कि यदि दो ब्लॉक बाईं ओर लीक होते हैं (फ्लोट: बाएं), तो उन्हें एक-दूसरे के नीचे रखा जाएगा यदि मध्यवर्ती पाठ की ऊंचाई जिसमें वे फ्लोट करते हैं वह पहले ब्लॉक की ऊंचाई से अधिक है, या एक-दूसरे के बगल में, यदि कम है। उदाहरण:

हमारे मामले में, .text और .fade लीक होगा, और .helper सुव्यवस्थित पाठ की भूमिका निभाएगा।

 .text { float: left; width: 400px; } .helper { height: 400px; } .fade { float: left; width: 400px; height: 60px; background: url(fade.png) repeat-x; } 

सहायक तत्व की ऊंचाई कंटेनर की ऊंचाई से मेल खाती है। फिर यदि .text (पहला लीक करने वाला तत्व) .helper से अधिक है, तो .fade दाईं ओर शिफ्ट हो जाएगा।

तीसरा कदम

और अब हम "इनवर्ट" करते हैं। व्यवहार को बायीं ओर चौड़ाई के 100% तक ले जाकर ऊपर करें ताकि यह कंटेनर में दिखाई दे:

 .fade { ... margin: -60px 0px 0px -400px; position: relative; } * html .fade { position: static; } 

स्थिति की आवश्यकता है ताकि पाठ के शीर्ष पर फीका हो।

चौथा चरण

कंटेनर की बात हो रही है।

 <div class="container"> <div class="wrapper"> <div class="text"></div> <div class="helper"></div> <div class="fade"></div> </div> </div> 

चारों ओर उनके प्रवाह के लिए जगह देने के लिए सभी तत्वों को लपेटें:

 .wrapper { width: 5000px; height: 100%; } .helper { height: 100%; } 

और हम कंटेनर बनाना चाहते हैं क्योंकि यह मूल रूप से इरादा था:

 .container { width: 400px; height: 400px; overflow: hidden; border: 1px solid #aaa; } 

वह सब है!

डेमो