CSS टेक्स्ट इफ़ेक्ट जनरेटर
अपना ख़ुद का टेक्स्ट टाइप करें और असली निऑन-ग्लो, 3D-एक्सट्रूड, लेटरप्रेस, आउटलाइन्ड और ग्रेडिएंट-फ़िल CSS इफ़ेक्ट का लाइव प्रीव्यू देखें, जिनके पैरामीटर वास्तविक गणित से कंप्यूट किए गए हैं और एक कॉपी करने लायक CSS ब्लॉक भी मिलता है।
🔒 पूरी तरह से आपके ब्राउज़र में संसाधित - आपके द्वारा यहां दर्ज की गई कोई भी चीज़ कभी भी अपलोड नहीं की जाती है।
परिणाम
अधिकतर CSS टेक्स्ट-इफ़ेक्ट गैलरियाँ आपको एक तय प्रीसेट थमा देती हैं: एक निऑन ग्लो, एक 3D एक्सट्रूज़न, लो या छोड़ो। यह जनरेटर आपके पैरामीटर से CSS बनाता है, उसी टेक्स्ट पर जो आप असल में टाइप करते हैं। इफ़ेक्ट सिलेक्ट से निऑन ग्लो, 3D-एक्सट्रूड, लेटरप्रेस/एम्बॉस, आउटलाइन्ड या ग्रेडिएंट-फ़िल चुनें, उस इफ़ेक्ट के अपने कंट्रोल घुमाएँ, और हर बदलाव पर लाइव प्रीव्यू और उसके नीचे का कॉपी करने लायक CSS ब्लॉक अपडेट हो जाता है।
3D-एक्सट्रूड इफ़ेक्ट समझने लायक है: चुनी गई गहराई (स्टैक्ड लेयरों की संख्या) और कोण के लिए, लेयर i को JavaScript में वास्तविक त्रिकोणमितीय फ़ंक्शनों का इस्तेमाल करके i × cos(कोण) क्षैतिज रूप से और i × sin(कोण) ऊर्ध्वाधर रूप से ऑफ़सेट किया जाता है — न कि पूर्व-निर्धारित कोणों की किसी लुकअप टेबल से। 45 डिग्री पर हर लेयर के लिए क्षैतिज और ऊर्ध्वाधर ऑफ़सेट बराबर निकलते हैं, क्योंकि 45° के कोसाइन और साइन का मान एक जैसा होता है; कोण स्लाइडर घुमाएँ और `text-shadow` लेयरों के पूरे ढेर को अक्षरों के चारों ओर असली समय में झूलता हुआ देखें, हर लेयर पिछली से थोड़ी गहरी होती जाती है ताकि रोशन 3D सतह का भ्रम पैदा हो।
निऑन ग्लो आपकी चुनी हुई रंगत में बढ़ते ब्लर रेडियस वाली चार `text-shadow` लेयरों को स्टैक करता है, जिसमें एक वैकल्पिक फ़्लिकर है: इसे चालू करें और ओपेसिटी में कमी के रैंडम सीक्वेंस के साथ एक `@keyframes` नियम जनरेट होता है और लाइव ऐनिमेट होता है, और एक शफ़ल बटन आपको बिना एक भी कीफ़्रेम हाथ से लिखे पैटर्न को फिर से बनाने देता है। आउटलाइन्ड टेक्स्ट उन ब्राउज़रों के लिए `-webkit-text-stroke` लगाता है जो इसे सपोर्ट करते हैं, और जो नहीं करते उनके लिए एक ईमानदार 8-दिशात्मक `text-shadow` फ़ॉलबैक — कॉपी किए गए CSS में दोनों लाइनें एक नोट के साथ जाती हैं कि ऐसा क्यों किया गया। ग्रेडिएंट-फ़िल `background-clip: text` के साथ टेक्स्ट आकार पर एक `linear-gradient` क्लिप करता है, जो अब व्यापक सपोर्ट वाली एक मानक प्रॉपर्टी है, और लीगेसी इंजनों के लिए पुरानी `-webkit-` प्रीफ़िक्स्ड लाइन रखता है।
सब कुछ स्थानीय रूप से आपके ब्राउज़र में रेंडर होता है — आपके द्वारा टाइप किया गया कोई भी टेक्स्ट कहीं नहीं भेजा जाता। तैयार CSS ब्लॉक, जिसमें ज़रूरत पड़ने पर `@keyframes` नियम भी शामिल है, सीधे अपनी स्टाइलशीट में कॉपी करें।