कूल बॉर्डर बनाने के लिए कोनिक ग्रेडिएंट का इस्तेमाल करें

कुछ दिलचस्प इफ़ेक्ट बनाने के लिए, कॉनिक ग्रेडिएंट का इस्तेमाल किया जा सकता है. जैसे, यह अच्छा बॉर्डर.

ऐडम अर्गेल ने यह 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 बनाया. अपने माउस को ऐलिमेंट पर घुमाएं और आपको ग्रेडिएंट में बदलाव दिखेगा. ऐसा, रोटेशन ऐंगल को सेव करने वाली सीएसएस कस्टम प्रॉपर्टी को अपडेट करने वाले थोड़े से JavaScript की मदद से होगा.

इन उदाहरणों में, border-image-source प्रॉपर्टी का इस्तेमाल किया गया है. यह प्रॉपर्टी, किसी ऐलिमेंट का बॉर्डर बनाने के लिए इस्तेमाल की जाने वाली सोर्स इमेज सेट करती है. इमेज वैल्यू स्वीकार करने वाली अन्य प्रॉपर्टी की तरह ही, सीएसएस ग्रेडिएंट का कोई भी टाइप भी मान्य है.

border-image-source

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

सोर्स

कोनिक ग्रेडिएंट