सीएसएस के साथ दोहरे रंग वाले टेक्स्ट को प्राप्त करना

प्रारंभिक प्रश्न:

आप अलग-अलग रंगों वाले टेक्स्ट के प्रभाव को कैसे प्राप्त कर सकते हैं सामग्री की नकल किए बिना प्रत्येक पक्ष पर रंग?

पारंपरिक दृष्टिकोण:

एक सामान्य विधि में दो अलग-अलग पाठ तत्व बनाना और उन्हें अगल-बगल रखना शामिल है, प्रत्येक का अपना अद्वितीय पृष्ठभूमि और अग्रभूमि रंग।

वैकल्पिक समाधान:

सामग्री दोहराव को कम करने के लिए, पृष्ठभूमि-क्लिप: टेक्स्ट जैसे सीएसएस गुणों का लाभ उठाने पर विचार करें। यह प्रॉपर्टी आपको टेक्स्ट में ग्रेडिएंट लागू करने की अनुमति देती है, जिससे निम्नलिखित सक्षम होता है:

सीएसएस कार्यान्वयन:

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

HTML संरचना:

स्पष्टीकरण:
#मुख्य तत्व पर एक ग्रेडिएंट लागू किया जाता है, जो पाठ को शामिल करता है .
 तत्व की पृष्ठभूमि पर एक उलटा ग्रेडिएंट लागू होता है, जिसे टेक्स्ट के पृष्ठभूमि रंग के रूप में सेट किया जाता है।
background-clip:text प्रॉपर्टी बैकग्राउंड ग्रेडिएंट को टेक्स्ट तक सीमित कर देती है क्षेत्र।
-वेबकिट-टेक्स्ट-फिल-कलर: पारदर्शी यह सुनिश्चित करता है कि टेक्स्ट पारदर्शी है, जिससे बैकग्राउंड ग्रेडिएंट दिखाई देता है।
यह तकनीक एक दोहरे रंग का टेक्स्ट बनाती है डुप्लिकेट सामग्री की आवश्यकता के बिना प्रभाव। सम्मिश्रण प्रभावों का उपयोग करके, यह अतिरिक्त पाठ तत्वों की आवश्यकता के बिना रंगों के बीच एक निर्बाध संक्रमण प्राप्त करता है।