इस लेख में
CSS Text Shadow क्या करता है
CSS की text-shadow प्रॉपर्टी टेक्स्ट अक्षरों में शैडो प्रभाव जोड़ती है। हर शैडो को क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर त्रिज्या और रंग द्वारा परिभाषित किया जाता है। box-shadow के विपरीत, text-shadow हर अक्षर ग्लिफ़ की सटीक आकृति का अनुसरण करती है, जिससे ऐसे प्रभाव बनते हैं जो आयताकार बॉक्स के बजाय अक्षरों के रूप के इर्द-गिर्द लिपट जाते हैं।
आप एक ही एलिमेंट पर कई शैडो को अल्पविराम से अलग करके स्टैक कर सकते हैं। यह नियॉन ग्लो, उभरी हुई लिखावट, 3D एक्सट्रूज़न और अग्नि टेक्स्ट जैसे जटिल प्रभावों को सक्षम करता है — वह भी बिना किसी इमेज या canvas के, केवल शुद्ध CSS से। जनरेटर आपको इन परतदार शैडो को दृश्य रूप से बनाने और पूर्वावलोकन करने देता है।
Text Shadow जनरेटर का उपयोग
जनरेटर CSS सिंटैक्स को याद किए बिना टेक्स्ट शैडो तैयार करने के लिए सहज नियंत्रण प्रदान करता है। आप हर पैरामीटर को रियल टाइम में समायोजित कर सकते हैं और अपने पूर्वावलोकन टेक्स्ट पर परिणाम तुरंत देख सकते हैं।
- ऑफ़सेट नियंत्रण — शैडो को टेक्स्ट के सापेक्ष स्थित करने के लिए स्लाइडर खींचें या क्षैतिज (X) और ऊर्ध्वाधर (Y) ऑफ़सेट के लिए सटीक पिक्सेल मान दर्ज करें
- ब्लर त्रिज्या — नरम, चमकते प्रभावों के लिए ब्लर बढ़ाएँ या ठोस प्रतियों जैसे तीखे, स्पष्ट शैडो के लिए इसे शून्य पर रखें
- कई परतें — आउटलाइन, ग्लो और गहराई जैसे जटिल मिश्रित प्रभाव बनाने के लिए कई शैडो परतें जोड़ें और उन्हें फिर से क्रमबद्ध करें
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
Text Shadow CSS जनरेट करें →Text Shadow के साथ रचनात्मक टेक्स्ट प्रभाव
टेक्स्ट शैडो केवल सूक्ष्म गहराई प्रभावों के लिए नहीं हैं। अलग-अलग ऑफ़सेट, ब्लर मान और रंगों वाली कई शैडो परतों को जोड़कर, आप पूरी तरह CSS में आकर्षक विज़ुअल प्रभाव बना सकते हैं।
- नियॉन ग्लो — नियॉन ट्यूब की चमक का अनुकरण करने के लिए बढ़ते ब्लर के साथ कई परतों में दोहराए गए शून्य ऑफ़सेट, बड़ी ब्लर त्रिज्या और एक चमकीले रंग (सियान, मैजेंटा, लाइम) का उपयोग करें
- उभरा और लेटरप्रेस — धातु में दबे हुए प्रभाव के लिए मध्यम-ग्रे बैकग्राउंड पर थोड़ा नीचे-दाएँ ऑफ़सेट वाले हल्के शैडो को थोड़ा ऊपर-बाएँ ऑफ़सेट वाले गहरे शैडो के साथ जोड़ें
- 3D एक्सट्रूज़न — एक ठोस त्रि-आयामी टेक्स्ट प्रभाव बनाने के लिए धीरे-धीरे गहराते रंगों में बढ़ते ऑफ़सेट (1px 1px, 2px 2px, 3px 3px...) के साथ कई शैडो स्टैक करें
अक्सर पूछे जाने वाले प्रश्न
क्या text-shadow प्रदर्शन को प्रभावित करता है?
एकल शैडो का प्रदर्शन पर नगण्य प्रभाव पड़ता है। हालाँकि, बड़ी ब्लर त्रिज्या के साथ कई शैडो स्टैक करना (20px+ ब्लर के साथ 10+ परतें) रेंडरिंग को धीमा कर सकता है, खासकर मोबाइल डिवाइस पर। जटिल प्रभावों के लिए, लक्ष्य डिवाइस पर परीक्षण करें और बॉडी टेक्स्ट के बजाय हेडिंग पर प्रभाव का संयम से उपयोग करने पर विचार करें।
कौन-से ब्राउज़र text-shadow का समर्थन करते हैं?
text-shadow का Chrome, Firefox, Safari, Edge और मोबाइल ब्राउज़र सहित सभी आधुनिक ब्राउज़रों में उत्कृष्ट समर्थन है। यह IE10 से समर्थित है और प्रोडक्शन में फ़ॉलबैक के बिना उपयोग करने के लिए सुरक्षित माना जाता है।
क्या text-shadow को CSS ट्रांज़िशन के साथ एनिमेट किया जा सकता है?
हाँ। text-shadow CSS ट्रांज़िशन और कीफ़्रेम एनिमेशन के साथ पूरी तरह एनिमेट किया जा सकता है। आप होवर प्रभावों, लोडिंग संकेतकों या ध्यान खींचने वाले एनिमेशन के लिए अलग-अलग शैडो अवस्थाओं के बीच सहजता से ट्रांज़िशन कर सकते हैं। सबसे सहज ट्रांज़िशन के लिए अवस्थाओं के बीच शैडो परतों की संख्या समान रखें।