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

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

CSS टेक्स्ट शैडो

शैडो वेब पेज पर किसी तत्व को अलग करने का एक तरीका है। उदाहरण के लिए, हरे रंग की छाया के साथ पाठ की एक पंक्ति, काले पाठ की एक मानक पंक्ति की तुलना में उपयोगकर्ता की नज़र में आने की अधिक संभावना है।

टेक्स्ट-शैडो प्रॉपर्टी आपको CSS में टेक्स्ट एलिमेंट के चारों ओर एक शैडो जोड़ने की अनुमति देती है। आप टेक्स्ट-छाया तत्व को HTML में हेडर, पैराग्राफ टेक्स्ट और अन्य टेक्स्ट-आधारित तत्वों पर लागू कर सकते हैं।

टेक्स्ट-शैडो प्रॉपर्टी का मूल सिंटैक्स इस प्रकार है:

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

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

टेक्स्ट-शैडो प्रॉपर्टी के सिंटैक्स के मुख्य घटक यहां दिए गए हैं:

offset-x छाया के लिए क्षैतिज (x अक्ष) ऑफसेट है (आवश्यक)।
ऑफ़सेट-y छाया के लिए लंबवत (y अक्ष) ऑफ़सेट है (आवश्यक)।
धुंधला-त्रिज्या छाया के लिए धुंधले प्रभाव की त्रिज्या है (वैकल्पिक)।
रंग छाया का रंग है। टेक्स्ट-छाया के लिए डिफ़ॉल्ट रंग काला (वैकल्पिक) है।

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

<html>

<h1>Career Karma</h1>

<style>

h1 {
	color: lightblue;
}

सीएसएस पाठ छाया हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

जब हम अपना कोड चलाते हैं, तो एक

तत्व प्रस्तुत किया जाता है जो `Career Karma` टेक्स्ट प्रस्तुत करता है स्क्रीन पर।

HTML द्वारा समर्थित सबसे बड़ा हेडर तत्व है। हमारा CSS कोड हमारे हेडर में कलर प्रॉपर्टी का मान `lightblue` . पर सेट करता है . इसका मतलब है कि हमारा हेडर हल्के नीले रंग के टेक्स्ट में दिखाई देता है।

बेसिक टेक्स्ट शैडो

टेक्स्ट-शैडो प्रॉपर्टी के साथ काम करते समय आपको केवल दो आवश्यक विशेषताएँ निर्दिष्ट करने की आवश्यकता होती है:ऑफ़सेट-एक्स और ऑफ़सेट-वाई। यदि हम इन दो गुणों को निर्दिष्ट करते हैं, तो हम एक क्षैतिज और ऊर्ध्वाधर छाया के साथ पाठ बना सकते हैं।

इन दोनों मानों के साथ टेक्स्ट-शैडो प्रॉपर्टी का एक उदाहरण यहां दिया गया है:

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 1px 1px;
}

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

छाया रंग

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

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

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 1px 1px pink;
}

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

धुंधली छाया

टेक्स्ट-शैडो प्रॉपर्टी का इस्तेमाल ब्लर-रेडियस एट्रिब्यूट के साथ ब्लर शैडो बनाने के लिए किया जा सकता है।

अब, मान लें कि हम एक छाया बनाना चाहते हैं जो क्षैतिज और ऊर्ध्वाधर दोनों अक्षों पर 3px से ऑफसेट हो और छाया के चारों ओर 2px धुंधला प्रभाव हो। हम निम्नलिखित कोड का उपयोग करके इस छाया को बना सकते हैं:

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 3px 3px 2px pink;
}

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

एकाधिक छाया

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

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

text-shadow: shadowOne, shadowTwo;

आप जितनी चाहें उतनी छाया निर्दिष्ट कर सकते हैं, जब तक कि प्रत्येक छाया अल्पविराम का उपयोग करके अलग हो जाती है। हालाँकि, प्रत्येक छाया के लिए आपके द्वारा निर्दिष्ट x-ऑफ़सेट और y-ऑफ़सेट मान समय के साथ बढ़ना चाहिए, अन्यथा, आपकी छाया ओवरलैप हो जाएगी और दिखाई नहीं दे सकती है।

छाया उस क्रम में दिखाई देंगी जिस क्रम में वे निर्दिष्ट हैं। तो, शैडोवन शैडो टू से पहले दिखाई देगा।

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

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}

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

संपत्ति का नाम	छाया एक	छाया दो
ऑफ़सेट-x	3px	6px
ऑफ़सेट-y	3px	6px
धुंधला-त्रिज्या	2px	5px
रंग	गुलाबी	नारंगी

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

निष्कर्ष

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

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

सीएसएस पाठ छाया