👝 ☮️ 🙇 छवियों के बिना CSS3 लुप्त होती धारियों 🤾🏿 👧🏽 🤙🏿

मैं आपके साथ छवियों का उपयोग किए बिना लुप्त होती धारियों को बनाने का अपना तरीका साझा करना चाहता हूं। आगे बिल्ली के नीचे, टिप्पणियों और उदाहरण के साथ ऐसे तत्वों को बनाने के लिए एक विधि का वर्णन किया गया है।

सबसे पहले, आपको html-layout तैयार करने की आवश्यकता है। मैं निम्नलिखित कोड के साथ काम करूंगा:

<html> <body> <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> </body> </html>

धारियां बनाने के लिए, हम css3 संपत्ति का उपयोग करेंगे: रैखिक-ढाल। यह IE को छोड़कर सभी नवीनतम ब्राउज़रों के स्थिर संस्करणों में समर्थित है। IE10 में ग्रेडिएंट के लिए समर्थन है, लेकिन IE10, दुर्भाग्य से, केवल विंडोज 8 के तहत काम करता है, इसलिए हमने इस लेख में IE समर्थन के बारे में बात नहीं की।
क्षीणन के साथ एक सरल अंधेरे ढाल इस तरह दिखता है: पृष्ठभूमि-छवि: रैखिक-ढाल (आरजीबीए (0,0,0,0,0), आरजीबीए (0,0,0,0.1.1), आरजीबीए (0,0,0,0));

एक पट्टी बनाने के लिए, हम ऊंचाई में 1 पिक्सेल के लिए इस ढाल को "समतल" करते हैं, और पृष्ठभूमि के आकार की संपत्ति हमें इसके साथ मदद करेगी। हम इसमें पृष्ठभूमि-आकार के पैरामीटर सेट करते हैं: 100% 1px; और ब्लॉक की पूरी चौड़ाई और ऊंचाई में 1 पिक्सेल पर एक ढाल प्राप्त करें। परिणाम इस कोड है:

 .container li { background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)); /*   0deg        ,     */ background-repeat: no-repeat; /*   ,    background-size */ background-position: 50% 100%; background-size: 100% 1px; }

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

 .container li { background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25)); background-repeat: no-repeat, no-repeat; background-position: 50% 100%, 50% 100%; background-size: 100% 1px, 100% 1px; background-origin: padding-box, border-box; border-bottom: 1px solid transparent; }

और अंत में, आप इस तरह की एक रेडियल ढाल जोड़ सकते हैं:
रेडियल-ढाल (50% 100%, दीर्घवृत्त कवर, आरजीबीए (0,0,0, 0.05), आरजीबीए (0,0,0,0) 50%);

अंतिम संस्करण को jsfiddle डेमो पर देखा जा सकता है।

छवियों के बिना CSS3 लुप्त होती धारियों

More articles: