सीएसएस दोहराता ग्रेडर - सीएसएस-ट्रिक्स

बार-बार ग्रेडिएंट्स एक चाल लेते हैं जो हम पहले से ही color-stopsपर linear-gradient()और radial-gradient()नोटेशन के रचनात्मक उपयोग के साथ कर सकते हैं , और हमारे लिए इसे सेंकते हैं।

विचार यह है कि हम अपने द्वारा बनाए गए ग्रेडिएंट से पैटर्न बना सकते हैं और उन्हें असीम रूप से दोहराने की अनुमति दे सकते हैं।

एक रेखीय ढाल (बाएं) की तुलना दोहराए जाने वाले रैखिक ढाल (दाएं) से करें।

एक ट्रिक है, नॉन-रिपिटिंग ग्रेडिएंट्स के साथ, इस तरह से ग्रेडिएंट बनाने के लिए कि अगर यह थोड़ा सा रेक्टैंगल था, तो यह रिपीटिंग पैटर्न बनाने के लिए खुद के अन्य छोटे-छोटे रेक्टेंगल वर्जन के साथ लाइन अप हो जाएगा। इसलिए अनिवार्य रूप से उस ढाल को बनाएं और background-sizeउस छोटे से छोटे आयत को बनाने के लिए सेट करें । इससे धारियां बनाना आसान हो गया, जिसे आप फिर घुमा सकते हैं या जो भी हो।

वाक्य - विन्यास

तीन प्रकार के दोहराए जाने वाले ग्रेडिएंट हैं, जिनमें से दो वर्तमान में आधिकारिक विनिर्देश में और एक जो वर्तमान कार्य मसौदे में समर्थित हैं।

प्रत्येक अंकन के लिए सिंटैक्स इसके संबंधित ढाल प्रकार के समान है। उदाहरण के लिए, repeating-linear-gradient()एक ही वाक्यविन्यास निम्नानुसार है linear-gradient()।

धीरे-धीरे दोहराते हुए	संबंधित संकेतन	समर्थित?
`repeating-linear-gradient()`	`linear-gradient()`	हाँ
`repeating-radial-gradient`	`radial-gradient()`	हाँ
`repeating-conic-gradient`	`conic-gradient()`	नहीं न

जहां ढाल का दोहराव अंतिम रंग स्टॉप द्वारा निर्धारित किया जाता है । अगर वह मैदान पर 20px, ढाल के आकार (जो तब दोहराता है) एक है 20pxद्वारा 20pxवर्ग। यदि पैटर्न में कई रंग हैं, तो यह सच है। अंतिम स्टॉप के साथ अंतिम रंग वह है जो दोहराने के आकार और स्थान को निर्धारित करता है।

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन लाइको देखें।

रेडियल के साथ भी:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन दोहराते हुए ग्रेड देखें।

ब्राउज़र का समर्थन

वर्तमान में दोहराए जाने वाले ग्रेडिएंट्स को बढ़िया ब्राउज़र समर्थन प्राप्त है। इसने कहा, हम केवल इस लेखन के समय रैखिक और रेडियल ग्रेडिएंट के बारे में बात कर रहे हैं क्योंकि शंक्वाकार ग्रेडिएंट अभी भी विनिर्देश के स्तर 4 के काम के मसौदे में एक प्रस्तावित विशेषता है। यहाँ उम्मीद है कि उम्मीदवार की सिफारिश पर पहुँचते ही हम व्यापक रूप से अपनाएँगे।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।