CSS एनिमेटेड ग्रेडिएंट बॉर्डर जनरेटर

एक घूमता हुआ इंद्रधनुषी बॉर्डर देखने में आसान लगता है, जब तक आप इसे CSS में बनाने की कोशिश न करें: किसी सादे कस्टम प्रॉपर्टी के ज़रिए conic-gradient() के अंदर कोण एनिमेट करने से कुछ उपयोगी नहीं होता, क्योंकि ब्राउज़र को पता ही नहीं होता कि वैल्यू एक कोण है और 0deg और 360deg के बीच इंटरपोलेट नहीं कर सकता — बस एक झटका लगता है। यह जनरेटर असली समाधान का इस्तेमाल करता है, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` ब्राउज़र को ठीक-ठीक बता देता है कि कस्टम प्रॉपर्टी में किस प्रकार की वैल्यू है, जिससे @keyframes नियम में सहज, GPU-अनुकूल इंटरपोलेशन संभव होता है।

रिंग ख़ुद एक ::before स्यूडो-एलिमेंट है जो बॉक्स से बड़ा साइज़ का होता है (बॉर्डर की चौड़ाई के नेगेटिव मान से इनसेट करके), जिसकी बैकग्राउंड `conic-gradient(from var(--border-angle), ...)` पर सेट है और पहले रंग पर वापस लूप करती है ताकि स्वीप में कोई दिखने वाला जोड़ न हो। फिर एक मास्क असली आकार देने का काम करता है: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` पैडिंग-बॉक्स और कंटेंट-बॉक्स के बीच केवल रिंग के आकार का अंतर रखता है, बाकी जगहों पर ठोस ग्रेडिएंट आयत को हटा देता है। Safari का पुराना `-webkit-mask-composite: xor` बिल्कुल वही काम करता है और स्टैंडर्ड प्रॉपर्टी के साथ शामिल रहता है, जिससे प्रभाव एक इंजन पर चुपचाप विफल होने के बजाय सभी जगह एक जैसा दिखता है।

बॉर्डर-रेडियस का समर्थन ऊपर से थोपा हुआ कोई बाद का जोड़ नहीं है — स्यूडो-एलिमेंट का `border-radius: inherit` मतलब है कि बॉक्स में आप जो भी रेडियस डायल करें, वह अपने आप रिंग पर आ जाता है, तो एक पिल शेप का बटन या गोल कार्ड को सीधे किनारों के कोनों से बाहर निकलने के बजाय एक गोल चमकदार बॉर्डर मिलता है। लाइव टेस्ट करें: रेडियस स्लाइडर को नुकीले आयत से पूरी पिल तक खींचें और देखें कि रिंग हर कदम पर आकार का अनुसरण करती है, यही वह बारीकी है जो इस तकनीक के असली कार्यान्वयन को नकली स्क्रीनशॉट से अलग करती है।

पेज पर बाकी सब कुछ सीधे जनरेटेड कोड से मैप होता है: चौड़ाई का स्लाइडर रिंग की मोटाई और स्यूडो-एलिमेंट की इनसेट/पैडिंग है, अवधि का स्लाइडर @keyframes का एनिमेशन-ड्यूरेशन है, दिशा स्विच कीफ़्रेम के अंतिम कोण का चिह्न पलटता है (+360deg या -360deg), और हर कलर स्टॉप conic-gradient() कॉल के अंदर एक कॉमा-सेपरेटेड एंट्री है। पूरी चीज़ आपके ब्राउज़र में बिना किसी इमेज, बिना JavaScript-चालित एनिमेशन लूप और बिना किसी बाहरी सेवा के चलती है — CSS ब्लॉक कॉपी करें और जहाँ पेस्ट करें, वहीं घूमता रहेगा।