टेक्स्ट-स्ट्रोक प्रॉपर्टी

text-stroke प्रॉपर्टी टेक्स्ट के करैक्टर्स की आउटलाइन का रंग और मोटाई या उसकी स्ट्रोक सेट करती है। प्रॉपर्टी में वैल्यू के रूप में स्ट्रोक की मोटाई और एक स्पेस के बाद स्ट्रोक का रंग देना होता है।

सिंटैक्स

cssसेलेक्टर {
  text-stroke: स्ट्रोक की मोटाई और उसका रंग;
}

बेसिक उदाहरण

साधारण टेक्स्ट स्ट्रोक:

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  -webkit-text-stroke: 2px red;
  text-stroke: 2px red;
}

Результат:

केवल स्ट्रोक

अब टेक्स्ट का रंग बैकग्राउंड के रंग (हमारे केस में सफेद) के समान कर देते हैं। नतीजतन केवल स्ट्रोक ही रह जाएगी:

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
}

Результат:

ग्रेडिएंट स्ट्रोक

background-clip प्रॉपर्टी की मदद से ग्रेडिएंट स्ट्रोक बनाते हैं:

html<div class="gradient-stroke">
  Lorem ipsum dolor sit amet
</div>

css.gradient-stroke {
  font-size: 42px;
  font-weight: bold;
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #333;
  text-stroke: 1px #333;
}

Результат:

मल्टीपल स्ट्रोक

text-shadow की मदद से डबल स्ट्रोक इफेक्ट:

html<div class="double-stroke">
  Lorem ipsum dolor sit amet
</div>

css.double-stroke {
  font-size: 40px;
  color: white;
  -webkit-text-stroke: 3px #000;
  text-stroke: 3px #000;
  text-shadow: 
    0 0 5px #000,
    0 0 10px #000;
}

Результат:

एनिमेटेड स्ट्रोक

स्ट्रोक में बदलाव की एनिमेशन जोड़ते हैं:

html<div class="animated-stroke">
  Lorem ipsum dolor sit amet
</div>

css.animated-stroke {
  font-size: 38px;
  color: white;
  -webkit-text-stroke: 1px #ff0000;
  text-stroke: 1px #ff0000;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
  50% { -webkit-text-stroke: 3px #ff0000; text-stroke: 3px #ff0000; }
  100% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
}

Результат:

यह भी देखें