कैसे बनाएं: होलो टेक्स्ट

कैसे होलो टेक्स्ट बनाएं

पहला कदम - HTML जोड़ें:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

दूसरा कदम - CSS जोड़ें:

mix-blend-mode गुण का इस्तेमाल करके छवि में होलो टेक्स्ट जोड़ा जा सकता है। लेकिन IE या Edge इसका समर्थन नहीं करते:

.image-container {
  background-image: url("img_nature.jpg"); /* इस्तेमाल की गई छवि - बहुत महत्वपूर्ण! */
  background-size: cover;
  position: relative; /* शीटिंग टेक्स्ट को छवि के मध्य में स्थापित करने के लिए आवश्यक */
  height: 300px; /* निश्चित ऊंचाई */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* प्रतिसादी फ़ॉन्ट आकार */
  font-weight: bold;
  margin: 0 auto; /* मध्य में टेक्स्ट कंटेनर */
  padding: 10px;
  width: 50%;
  text-align: center; /* मध्य में टेक्स्ट आवर्तन */
  position: absolute; /* टेक्स्ट को स्थापित करें */
  top: 50%; /* टेक्स्ट को मध्य में स्थापित करें */
  left: 50%; /* टेक्स्ट को मध्य में स्थापित करें */
  transform: translate(-50%, -50%); /* टेक्स्ट को मध्य में स्थापित करें */
  mix-blend-mode: screen; /* यह टेक्स्ट की काटी जाने को संभव बनाता है */
}

स्वयं आयात करें

अगर आप श्वेत बैकग्राउंड टेक्स्ट चाहते हैं, तो mix-blend-mode मिटाएं multiplyकालकृति रंग को श्वेत करें और रंग को श्वेत करें:

उदाहरण

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

स्वयं आयात करें