कॉनिक ग्रेडिएंट का इस्तेमाल कुछ दिलचस्प इफ़ेक्ट बनाने के लिए किया जा सकता है. जैसे, बॉर्डर का यह अच्छा उदाहरण.
एडम आर्गाइल के बनाए गए इस CodePen को मूल रूप से Twitter पर इस ट्वीट के ज़रिए शेयर किया गया था. इसमें दिखाया गया है कि बॉर्डर बनाने के लिए कॉनिक ग्रेडिएंट का इस्तेमाल कैसे किया जाता है.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
टेरी मुन ने क्रिएटिव तरीके से ऐडम का कोडपेन का इस्तेमाल करके यह CodePen बनाया. अपने माउस को एलिमेंट पर ले जाएं और आपको ग्रेडिएंट में बदलाव दिखेगा. यह सुविधा, रोटेशन ऐंगल को स्टोर करने वाली सीएसएस कस्टम प्रॉपर्टी को अपडेट करती है.
इन उदाहरणों में, border-image-source प्रॉपर्टी का इस्तेमाल किया गया है. यह प्रॉपर्टी, किसी एलिमेंट की बॉर्डर बनाने के लिए इस्तेमाल की जाने वाली सोर्स इमेज सेट करती है. इमेज की वैल्यू स्वीकार करने वाली दूसरी प्रॉपर्टी की तरह ही, कोई भी सीएसएस ग्रेडिएंट टाइप भी मान्य होता है.
border-image-source
कॉनिक ग्रेडिएंट