CSS3 दोहराते हुए ग्रेडर [CSS3 टिप्स]
कई CSS3 विशेषताएं हैं जो हम एक वेबसाइट को सजाने के तरीके को बदलते हैं, जिनमें से एक CSS3 स्नातक हैं। CSS3 से पहले, हमें ढाल प्रभाव बनाने के लिए निश्चित रूप से छवियों की आवश्यकता होती है; अब हम केवल CSS का उपयोग करके समान (और बेहतर) प्रभाव देने में सक्षम हैं
हमारी पिछली पोस्टों में, हमने दो प्रकार के ग्रेडिएंट पर चर्चा की है जिन्हें CSS3 के साथ प्राप्त किया जा सकता है:
- रेडियल और
- रैखिक स्नातक.
इस बार हम उनके भाई-बहनों पर नज़र रखने जा रहे हैं: ग्रेडिएंट को दोहराते हुए.
मूल दोहराव
बार-बार स्नातक करना अनिवार्य रूप से एक विस्तार है। वाक्यविन्यास समान है कि हम रेडियल और रैखिक ग्रेडिएंट्स को कैसे परिभाषित करते हैं, केवल यह कि जैसा कि नाम का अर्थ है, यह एक निर्दिष्ट दिशा में रंगों को भी दोहराएगा। रैखिक ढ़ाल को दोहराने के लिए, हम इस फ़ंक्शन का उपयोग कर सकते हैं: दोहराई जाने वाली रेखीय-ढाल, रेडियल या अण्डाकार ग्रेडिएटर्स को दोहराने के लिए हम इस फ़ंक्शन का उपयोग करते हैं: दोहरा-रेडियल-ढाल.
/ * रैखिक * /। ढाल पृष्ठभूमि: दोहरा-रेखीय-ढाल (0deg, # f9f9f9, #cccccc 20px); / * रेडियल * / .ग्रेडिएंट बैकग्राउंड: रिपीटिंग-रेडियल-ग्रेडिएंट (50% 50%, सर्कल, # f9f9f9, #cccccc 20px);
कोड पर बाकी के लिए बहुत अंतर नहीं है, सिवाय इसके रंग पुनरावृत्ति. नीचे यह वर्णन करने के लिए एक सरल चित्रण है कि यह रंग पुनरावृत्ति कैसे काम करता है.
यद्यपि ऊपर की छवि रेखीय ग्रेडिएटर्स को दोहराने के लिए केवल दिखाती है, मूल विचार रेडियल ग्रेडिएंट पर भी लागू होता है जिसमें रंग अनंत रूप से दोहराए जाएंगे, इस मामले में, किसी भी दिशा में। डेमो देखने के लिए नीचे दिए गए लिंक का पालन करें.
- डेमो देखें
अगले भाग में, हम आपको दिखाएंगे कि हम वास्तविक उदाहरणों में CSS3 के रिपीटिंग ग्रेडिएंट्स का उपयोग कैसे कर सकते हैं.
उदाहरण: पैटर्न बनाना
का सबसे आम कार्यान्वयन बार-बार स्नातक करना पृष्ठभूमि पैटर्न बनाने के लिए है। इस उदाहरण में, हम सरल वर्टिकल-स्ट्राइप पैटर्न बनाने जा रहे हैं.
.gradient बैकग्राउंड: रिपीटिंग-लीनियर-ग्रेडिएंट (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
ध्यान दें कि हम दो अलग-अलग रंगों को कैसे परिभाषित करते हैं - # f9f9f9 तथा #cccccc - उसी जगह पर, 20px. यह उदाहरण इन दो रंगों के बीच के अंतर को तेज करेगा और फ़िज़नेस को खत्म करेगा.
अभिविन्यास को निर्देशित करने के लिए हम बस कोण बदलते हैं - 90deg इसे क्षैतिज रूप से निर्देशित करेंगे जबकि 45deg इसे तिरछे और इतने पर निर्देशित करेंगे.
- डेमो देखें
उदाहरण: पेपरलाइन बनाना
इस दूसरे उदाहरण में, हम एक कागज़ बनाने जा रहे हैं जिसे आप अक्सर एक नोटबुक में देख सकते हैं। इस प्रभाव को बनाने के लिए, हमें केवल एक की जरूरत है div, कोई चित्र नहीं, केवल CSS.
.ढाल चौड़ाई: ऑटो; ऊंचाई: 500 पीएक्स; मार्जिन: 0 50px; पृष्ठभूमि: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); पृष्ठभूमि: -मोज़-रिपीटिंग-लीनियर-ग्रेडिएंट (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); बैकग्राउंड: -o-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); पृष्ठभूमि: दोहराव-रैखिक-ढाल (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); पृष्ठभूमि का आकार: 100% 21px;
ध्यान दें कि हमने CSS3 भी जोड़ा है पृष्ठभूमि आकार के लिए पृष्ठभूमि छवियों के आकार को निर्दिष्ट करने के लिए संपत्ति 100%, 20 पीएक्स. हालांकि CSS3 के ग्रेडर 'रंग' प्रदर्शित करते हैं, यह वास्तव में छवि के रूप में वर्गीकृत किया गया है, रंग नहीं.
अगला, हम उपयोग करेंगे : से पहले छद्म तत्व कागज के बाईं ओर एक पट्टी जोड़ने के लिए.
.ढाल: सामग्री: "" से पहले; प्रदर्शन: इनलाइन-ब्लॉक; ऊंचाई: 500 पीएक्स; चौड़ाई: 4 पीएक्स; बॉर्डर-लेफ्ट: 4px डबल # FCA1A1; स्थिति: रिश्तेदार; बाएं: 30 पीएक्स;
और हम कर रहे हैं, यह वास्तव में सही है? अब हम उन सभी को नीचे दिए गए लिंक से देख सकते हैं.
- डेमो देखें
- स्रोत डाउनलोड करें
आगे के संसाधन
- वेबकिट CSS3 के स्नातक
- Microsoft डेवलपर नेटवर्क पर CSS3 के स्नातक
