CSS Text Shadow: टेक्स्ट पर शैडो इफेक्ट लगाने का पूरा गाइड

CSS Text Shadow प्रॉपर्टी

किसी एलिमेंट पर शैडो जोड़ना एक आकर्षक हेडर बनाने का एक घटक है। उदाहरण के लिए, यदि आप वेबसाइट डिज़ाइन कर रहे हैं, तो आप हर टॉप हेडर पर शैडो जोड़ना चाह सकते हैं ताकि हेडर वेब पेज पर अन्य हेडर टेक्स्ट से अलग दिखे।

यहीं पर CSS text-shadow प्रॉपर्टी काम आती है। text-shadow प्रॉपर्टी आपको किसी टेक्स्ट एलिमेंट पर शैडो इफेक्ट जोड़ने की अनुमति देती है। यह ट्यूटोरियल उदाहरणों के साथ, टेक्स्ट शैडोज़ की बुनियादी बातों और वेब पेज पर टेक्स्ट पर शैडो जोड़ने के लिए text-shadow प्रॉपर्टी का उपयोग कैसे करें, इस पर चर्चा करेगा।

Text Shadow सिंटैक्स

text-shadow: offset-x offset-y blur-radius color;

text-shadow प्रॉपर्टी का सिंटैक्स box-shadow प्रॉपर्टी के सिंटैक्स के समान है, जिसका उपयोग बॉक्स-आधारित HTML एलिमेंट्स पर शैडो लागू करने के लिए किया जाता है। CSS में बॉक्स शैडोज़ के बारे में अधिक जानने के लिए, CSS बॉक्स शैडोज़ के लिए हमारे बिगिनर्स गाइड को पढ़ें।

Text Shadow सिंटैक्स के मुख्य घटक

offset-x शैडो के लिए हॉरिजॉन्टल (x एक्सिस) ऑफसेट है (आवश्यक)।
offset-y शैडो के लिए वर्टिकल (y एक्सिस) ऑफसेट है (आवश्यक)।
blur-radius शैडो के लिए ब्लर इफेक्ट की त्रिज्या है (वैकल्पिक)।
color शैडो का रंग है। टेक्स्ट-शैडो के लिए डिफ़ॉल्ट रंग काला है (वैकल्पिक)।

Text Shadow के उदाहरण

आइए text-shadow प्रॉपर्टी के कुछ उदाहरणों का पता लगाएं ताकि यह समझ सकें कि प्रॉपर्टी का उपयोग करके अपने खुद के टेक्स्ट शैडोज़ कैसे बनाएं। इस ट्यूटोरियल के उद्देश्य के लिए, हम निम्न HTML एलिमेंट का उपयोग करने जा रहे हैं:

<html>
  <h1>Career Karma</h1>
<style>
  h1 { color: lightblue; }
</style>

CSS Text Shadow: टेक्स्ट पर शैडो इफेक्ट लगाने का पूरा गाइड

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

जब हम अपना कोड चलाते हैं, तो एक <h1> एलिमेंट रेंडर होता है जो स्क्रीन पर Career Karma टेक्स्ट प्रस्तुत करता है। <h1> HTML द्वारा समर्थित सबसे बड़ा हेडर एलिमेंट है। हमारा CSS कोड हमारे हेडर में color प्रॉपर्टी का मान lightblue पर सेट करता है। इसका मतलब है कि हमारा हेडर हल्के नीले टेक्स्ट में दिखाई देता है।

1. बेसिक टेक्स्ट शैडो (Basic Text Shadow)

text-shadow प्रॉपर्टी के साथ काम करते समय आपको केवल दो आवश्यक एट्रिब्यूट्स निर्दिष्ट करने की आवश्यकता होती है: offset-x और offset-y। यदि हम इन दो प्रॉपर्टीज़ को निर्दिष्ट करते हैं, तो हम हॉरिजॉन्टल और वर्टिकल शैडो के साथ टेक्स्ट बना सकते हैं।

यहां दोनों वैल्यूज़ निर्दिष्ट के साथ text-shadow प्रॉपर्टी का एक उदाहरण है:

<html>
  <h1>Career Karma</h1>
<style>
  h1 { text-shadow: 1px 1px; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे कोड में, हमने अपने हेडर पर एक साधारण टेक्स्ट-शैडो लागू किया। यह शैडो हॉरिजॉन्टल और वर्टिकल दोनों एक्सिस पर 1px से ऑफसेट है। यदि आप हमारे कोड के परिणाम को देखते हैं, तो आप देख सकते हैं कि हमारे टेक्स्ट के नीचे हल्की काली शैडो लागू है। काला शैडो के लिए डिफ़ॉल्ट रंग है।

2. शैडो कलर्स (Shadow Colors)

जब आप टेक्स्ट-शैडो डिज़ाइन कर रहे होते हैं, तो आप तय कर सकते हैं कि आप अपनी शैडो के लिए एक कस्टम रंग निर्दिष्ट करना चाहते हैं। यहीं पर color एट्रिब्यूट काम आता है।

मान लीजिए हम चाहते हैं कि हमारी शैडो हल्की गुलाबी हो। हम निम्न कोड का उपयोग करके अपनी शैडो का रंग गुलाबी में बदल सकते हैं:

<html>
  <h1>Career Karma</h1>
<style>
  h1 { text-shadow: 1px 1px pink; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे कोड में, हमने color एट्रिब्यूट निर्दिष्ट किया और इसका मान pink पर सेट किया। इसने हमें हमारे टेक्स्ट के नीचे गुलाबी शैडो बनाने की अनुमति दी। हमारे पहले उदाहरण की तरह, हमारी शैडो हॉरिजॉन्टल और वर्टिकल दोनों एक्सिस पर 1px से ऑफसेट है।

3. ब्लर्ड शैडो (Blurred Shadow)

text-shadow प्रॉपर्टी का उपयोग blur-radius एट्रिब्यूट के साथ संयोजन में ब्लर्ड शैडो बनाने के लिए किया जा सकता है।

अब, मान लीजिए हम एक शैडो बनाना चाहते हैं जो हॉरिजॉन्टल और वर्टिकल दोनों एक्सिस पर 3px से ऑफसेट है और शैडो के चारों ओर 2px ब्लर इफेक्ट है। हम निम्न कोड का उपयोग करके यह शैडो बना सकते हैं:

<html>
  <h1>Career Karma</h1>
<style>
  h1 { text-shadow: 3px 3px 2px pink; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

जैसा कि आप देख सकते हैं, हमारी शैडो दोनों एक्सिस पर 3px से ऑफसेट है, और हमारी शैडो ब्लर इफेक्ट से घिरी हुई है। अपने ब्लर इफेक्ट को तेज करने के लिए, हम blur-radius एट्रिब्यूट का मान बढ़ा सकते हैं। यदि हम अधिक ब्लरी शैडो चाहते हैं, तो हम blur-radius का मान 5px, या 10px, या अधिक सेट कर सकते हैं, यह इस बात पर निर्भर करता है कि हम किस ब्लर का उपयोग करना चाहते हैं। इस उदाहरण में, हमारी शैडो गुलाबी है।

4. मल्टीपल शैडोज़ (Multiple Shadows)

अब तक, हमने चर्चा की है कि text-shadow प्रॉपर्टी का उपयोग करके टेक्स्ट के ब्लॉक पर एक शैडो कैसे लागू करें। हालांकि, text-shadow प्रॉपर्टी का उपयोग टेक्स्ट एलिमेंट पर मल्टीपल शैडोज़ जोड़ने के लिए भी किया जा सकता है।

टेक्स्ट के ब्लॉक पर मल्टीपल शैडोज़ जोड़ने के लिए, आपको शैडोज़ की कॉमा-सेपरेटेड लिस्ट बनानी चाहिए। मल्टीपल टेक्स्ट शैडोज़ बनाने का सिंटैक्स इस प्रकार है:

text-shadow: shadowOne, shadowTwo;

आप जितनी चाहें उतनी शैडोज़ निर्दिष्ट कर सकते हैं, जब तक कि प्रत्येक शैडो को कॉमा का उपयोग करके अलग किया जाता है। हालांकि, आपके द्वारा प्रत्येक शैडो के लिए निर्दिष्ट x-offset और y-offset वैल्यूज़ समय के साथ बढ़नी चाहिए, अन्यथा आपकी शैडोज़ ओवरलैप हो जाएंगी और विज़िबल नहीं हो सकती हैं।

शैडोज़ उसी क्रम में दिखाई देंगी जिस क्रम में वे निर्दिष्ट हैं। इसलिए, shadowOne, shadowTwo से पहले दिखाई देगा।

उदाहरण: पिंक और ऑरेंज शैडोज़

मान लीजिए हम टेक्स्ट के पीछे पिंक और ऑरेंज शैडोज़ के साथ एक टेक्स्ट बैनर बनाना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

<html>
  <h1>Career Karma</h1>
<style>
  h1 { text-shadow: 3px 3px 2px pink, 6px 6px 5px orange; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे कोड में, हमने दो शैडोज़ निर्दिष्ट कीं। यहां वे वैल्यूज़ हैं जो हमने अपनी प्रत्येक शैडो के लिए निर्दिष्ट कीं:

प्रॉपर्टी नाम	शैडो वन	शैडो टू
offset-x	3px	6px
offset-y	3px	6px
blur-radius	2px	5px
color	pink	orange

जैसा कि आप देख सकते हैं, हमने अपने कोड में दो शैडोज़ बनाईं, प्रत्येक अलग-अलग वैल्यूज़ के साथ।

निष्कर्ष

text-shadow प्रॉपर्टी का उपयोग HTML में टेक्स्ट के ब्लॉक पर शैडो जोड़ने के लिए किया जाता है। टेक्स्ट शैडोज़ को किसी भी टेक्स्ट-आधारित एलिमेंट जैसे हेडर्स और पैराग्राफ्स पर लागू किया जा सकता है।

इस ट्यूटोरियल में उदाहरणों के संदर्भ में, टेक्स्ट शैडोज़ की बुनियादी बातों और कस्टम टेक्स्ट-शैडो बनाने के लिए text-shadow प्रॉपर्टी का उपयोग कैसे करें, इस पर चर्चा की गई। अब आपके पास एक एक्सपर्ट वेब डिज़ाइनर की तरह अपने खुद के CSS टेक्स्ट शैडोज़ डिज़ाइन करना शुरू करने के लिए ज्ञान है!