कूल बॉर्डर बनाने के लिए कोनिक ग्रेडिएंट का इस्तेमाल करें
bookmark_borderbookmark
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
कुछ दिलचस्प इफ़ेक्ट बनाने के लिए, कॉनिक ग्रेडिएंट का इस्तेमाल किया जा सकता है. जैसे, यह अच्छा बॉर्डर.
ऐडम
अर्गेल ने यह 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
ब्राउज़र के इस्तेमाल से जुड़ी सहायता
सोर्स
कोनिक ग्रेडिएंट
जब तक कुछ अलग से न बताया जाए, तब तक इस पेज की सामग्री को Creative Commons Attribution 4.0 License के तहत और कोड के नमूनों को Apache 2.0 License के तहत लाइसेंस मिला है. ज़्यादा जानकारी के लिए, Google Developers साइट नीतियां देखें. Oracle और/या इससे जुड़ी हुई कंपनियों का, Java एक रजिस्टर किया हुआ ट्रेडमार्क है.
आखिरी बार 2022-05-27 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2022-05-27 (UTC) को अपडेट किया गया."],[],[]]