text-shadow प्रॉपर्टी

text-shadow प्रॉपर्टी टेक्स्ट को छाया प्रदान करती है। यह प्रॉपर्टी 4 पैरामीटर्स को स्पेस से अलग करके स्वीकार करती है, या none कीवर्ड, जो छाया को पूरी तरह से हटा देता है (यह डिफॉल्ट वैल्यू है)।

सिंटैक्स

cssसिलेक्टर {
  text-shadow: x_दिशा_में_खिसकाव y_दिशा_में_खिसकाव धुंधलापन रंग;
}

cssसिलेक्टर {
  text-shadow: none;
}

पैरामीटर्स

पैरामीटर	विवरण
x दिशा में खिसकाव	X-अक्ष के साथ छाया का विस्थापन निर्धारित करता है। सकारात्मक मान दाईं ओर खिसकाता है, नकारात्मक - बाईं ओर।
y दिशा में खिसकाव	Y-अक्ष के साथ छाया का विस्थापन निर्धारित करता है। सकारात्मक मान नीचे की ओर खिसकाता है, नकारात्मक - ऊपर की ओर।
धुंधलापन	छाया का धुंधलापन निर्धारित करता है। मान जितना अधिक होगा - छाया उतनी ही अधिक धुंधली होगी। वैकल्पिक पैरामीटर। यदि निर्दिष्ट नहीं है - छाया स्पष्ट होगी।
रंग	रंग के लिए किसी भी यूनिट में छाया का रंग निर्धारित करता है। वैकल्पिक पैरामीटर। यदि निर्दिष्ट नहीं है - छाया का रंग टेक्स्ट के रंग के समान होगा।

अक्षों के साथ विस्थापन और धुंधलापन आकारों के लिए किसी भी यूनिट में निर्दिष्ट किए जाते हैं, प्रतिशत को छोड़कर।

उदाहरण

आइए छाया को नीचे और बाईं ओर खिसकाएं और थोड़ा धुंधलापन जोड़ें:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

उदाहरण . स्पष्ट छाया

अब छाया का रंग लाल करें, इसे नीचे और बाईं ओर खिसकाएं, लेकिन धुंधलापन हटा दें - छाया स्पष्ट होगी:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 10px 10px red;
}

Результат:

उदाहरण . समान छाया

अभी छाया खिसकी हुई नहीं है, लेकिन इसमें धुंधलापन जोड़ा गया है:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат:

यह भी देखें

box-shadow प्रॉपर्टी,
जो कंटेनर को छाया प्रदान करती है