सीएसएस में आश्चर्यजनक ग्रेडिएंट बॉर्डर बनाएं:एक चरण-दर-चरण मार्गदर्शिका

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

सिंटेक्स

/* Method 1: Using border-image */
selector {
 border-width: 5px;
 border-style: solid;
 border-image: linear-gradient(direction, color1, color2) 1;
}
/* Method 2: Background and Padding */
.parent {
 background: linear-gradient(direction, color1, color2);
 padding: border-width;
}
/* Method 3: Pseudo-elements */
selector::before {
 content: "";
 position: absolute;
 inset: -border-width;
 background: linear-gradient(direction, color1, color2);
 z-index: -1;
}

विधि 1:बॉर्डर-छवि का उपयोग करना

<पी> 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">
 This is a gradient border using border-image
 </div>
</body>
</html>

A box with a horizontal gradient border transitioning from red to teal appears on the page.

विधि 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">
 Gradient border using background and padding
 </div>
 </div>
</body>
</html>

A box with a diagonal gradient border (red to teal) created using background and padding appears on the page.

विधि 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">
 Gradient border using pseudo-elements
 </div>
</body>
</html>

A box with a vertical gradient border (red to teal) created using pseudo-elements appears on the page.

तुलना

विधि पेशेवर विपक्ष बॉर्डर-इमेज सरल, साफ कोड, जटिल ग्रेडिएंट्स के लिए सीमित ब्राउज़र समर्थन पृष्ठभूमि और पैडिंग यूनिवर्सल ब्राउज़र समर्थन के लिए अतिरिक्त HTML संरचना की आवश्यकता होती है छद्म-तत्व लचीले, कोई अतिरिक्त HTML नहीं सावधानीपूर्वक स्थिति की आवश्यकता होती है

निष्कर्ष

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

<पी>

सीएसएस में आश्चर्यजनक ग्रेडिएंट बॉर्डर बनाएं:एक चरण-दर-चरण मार्गदर्शिका