CSS में शानदार ग्रेडिएंट बॉर्डर बनाएं: चरण-दर-चरण गाइड

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

सिंटैक्स

/* विधि 1: border-image का उपयोग करना */
selector {
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(direction, color1, color2) 1;
}

/* विधि 2: बैकग्राउंड और पैडिंग */
.parent {
  background: linear-gradient(direction, color1, color2);
  padding: border-width;
}

/* विधि 3: छद्म-तत्व */
selector::before {
  content: "";
  position: absolute;
  inset: -border-width;
  background: linear-gradient(direction, color1, color2);
  z-index: -1;
}

विधि 1: border-image का उपयोग करना

border-image प्रॉपर्टी आपको किसी एलिमेंट के बॉर्डर के रूप में ग्रेडिएंट सेट करने की अनुमति देती है।

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-border-box {
  width: 300px;
  padding: 20px;
  text-align: center;
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
  margin: 20px auto;
}
</style>
</head>
<body>
<div class="gradient-border-box">
  यह border-image का उपयोग करके एक ग्रेडिएंट बॉर्डर है
</div>
</body>
</html>

पेज पर एक बॉक्स दिखाई देता है जिसमें लाल से टील तक संक्रमण करने वाला एक क्षैतिज ग्रेडिएंट बॉर्डर होता है।

विधि 2: नेस्टेड एलिमेंट्स के साथ बैकग्राउंड और पैडिंग

यह विधि ग्रेडिएंट बैकग्राउंड वाले पैरेंट एलिमेंट और बॉर्डर का भ्रम पैदा करने के लिए एक नेस्टेड चाइल्ड एलिमेंट का उपयोग करती है।

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-parent {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  padding: 5px;
  display: inline-block;
  margin: 20px;
}
.white-child {
  background: white;
  padding: 20px;
}
</style>
</head>
<body>
<div class="gradient-parent">
  <div class="white-child">बैकग्राउंड और पैडिंग का उपयोग करके ग्रेडिएंट बॉर्डर</div>
</div>
</body>
</html>

पेज पर बैकग्राउंड और पैडिंग का उपयोग करके बनाया गया एक विकर्ण ग्रेडिएंट बॉर्डर (लाल से टील) वाला एक बॉक्स दिखाई देता है।

विधि 3: छद्म-तत्व

::before छद्म-तत्व का उपयोग करके आप मुख्य सामग्री के पीछे एक ग्रेडिएंट लेयर कर सकते हैं।

<!DOCTYPE html>
<html>
<head>
<style>
.pseudo-border-box {
  position: relative;
  width: 300px;
  padding: 20px;
  background: white;
  margin: 30px auto;
  text-align: center;
}
.pseudo-border-box::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
  z-index: -1;
}
</style>
</head>
<body>
<div class="pseudo-border-box">
  छद्म-तत्वों का उपयोग करके ग्रेडिएंट बॉर्डर
</div>
</body>
</html>

छद्म-तत्वों का उपयोग करके बनाया गया एक ऊर्ध्वाधर ग्रेडिएंट बॉर्डर (लाल से टील) वाला एक बॉक्स पेज पर दिखाई देता है।

तुलना

निष्कर्ष

ग्रेडिएंट बॉर्डर इन तीन विधियों का उपयोग करके UI डिज़ाइन को प्रभावी ढंग से बढ़ाते हैं। सरलता के लिए border-image चुनें, सार्वभौमिक समर्थन के लिए बैकग्राउंड/पैडिंग, या लचीलेपन के लिए छद्म-तत्व। प्रत्येक दृष्टिकोण आधुनिक, नेत्रहीन आकर्षक वेब एलिमेंट्स बनाने के लिए अद्वितीय लाभ प्रदान करता है।