नैंसी मौर्य द्वारा
साझा करनाकलरवईमेल

आप CSS में टेक्स्ट शैडो इफेक्ट्स के साथ बहुत कुछ कर सकते हैं, लेकिन यह जानना मुश्किल हो सकता है कि वास्तव में क्या संभव है। इन दृश्य उदाहरणों के साथ सहायता प्राप्त करें।

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

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

इस लेख में, आप HTML और CSS का उपयोग करके विभिन्न टेक्स्ट शैडो प्रभाव बनाने का एक प्रभावी तरीका सीखेंगे।

HTML और CSS के साथ शुरुआत करना

आप जो भी टेक्स्ट शैडो इफ़ेक्ट पसंद करते हैं उसे पाने के लिए आप इन कोड उदाहरणों को कॉपी और पेस्ट कर सकते हैं। an. बनाकर प्रारंभ करें index.html फ़ाइल और एक

instagram viewer
स्टाइल.सीएसएस फ़ाइल। उदाहरणों को आज़माने के लिए आपको केवल यही फ़ाइलें हैं, लेकिन आपको प्रत्येक उदाहरण के लिए दोनों फ़ाइलों को बदलना होगा।

index.html







 छाया #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel = "स्टाइलशीट"
/>
 छाया #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel = "स्टाइलशीट"
/>
 छाया #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel = "स्टाइलशीट"
/>
 छाया #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel = "स्टाइलशीट"
/>
 छाया #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel = "स्टाइलशीट"
/>
 छाया #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel = "स्टाइलशीट"
/>
 छाया #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel = "स्टाइलशीट"
/>

सीएसएस पाठ छाया उदाहरण


स्टाइल.सीएसएस

तन {
पाठ-रूपांतरण: अपरकेस;
लाइन-ऊंचाई: 1;
पाठ-संरेखण: केंद्र;
फ़ॉन्ट-आकार: 5rem;
प्रदर्शन: ग्रिड;
गैप: 4रेम;
}

अब, आपके लिए परीक्षण करने के लिए 11 टेक्स्ट शैडो उदाहरणों के माध्यम से चलते हैं।

सम्बंधित: सीएसएस फ़ॉन्ट-पारिवारिक संपत्ति के साथ अपनी वेबसाइट के टेक्स्ट को कैसे बदलें

रहस्यवादी

मिस्टिक एक आकर्षक शैली है जो बिना उपयोग किए एक शांत संक्रमण जैसा प्रभाव देती है परिवर्तन संपत्ति। यह एक बोल्ड और विकासोन्मुख वेबसाइट के लिए एक सुपर सरल, फिर भी सौंदर्य की दृष्टि से मनभावन, प्रभाव है।

उत्पादन

एचटीएमएल


 छाया #01 
रहस्यवादी

सीएसएस

तन {
पृष्ठभूमि-रंग: #5e5555;
}
रहस्यवादी {
फ़ॉन्ट-फ़ैमिली: 'बॉल्बी वन', कर्सिव;
रंग: आरजीबीए (255, 255, 255, 0.596);
पाठ-छाया: 20px 0px 10px आरजीबी (0, 0, 0);
}

मोनोटोन

यह 'मोनोटोन' फ़ॉन्ट का उपयोग करते हुए एक चंचल पाठ प्रभाव है। आप अपनी वेबसाइट के प्राथमिक रंगों से मेल खाने के लिए टेक्स्ट और शैडो कलर के साथ खेल सकते हैं।

उत्पादन

एचटीएमएल


 छाया #02 
मोनोटोन

सीएसएस

मोनोटोन {
फ़ॉन्ट-फ़ैमिली: 'मोनोटोन', कर्सिव;
फ़ॉन्ट-आकार: 15rem;
रंग: आरजीबी (255, 0, 0);
अस्पष्टता: 0.5;
पाठ-छाया: 0px -78px आरजीबी (255, 196, 0);
}

बंजी

यह 'बंजी शेड' फॉन्ट का उपयोग करने वाला एक अच्छा स्टाइल है। एक गहरे रंग की पृष्ठभूमि के साथ, यह संदेह की भावना के साथ एक कच्चा प्रभाव पैदा करता है।

उत्पादन

एचटीएमएल


 छाया #03 
बंजी

सीएसएस

तन {
पृष्ठभूमि-रंग: #222;
}
बंजी {
फ़ॉन्ट-परिवार: 'बंजी शेड', कर्सिव;
रंग: आरजीबी (160, 12, 12);
अस्पष्टता: 0.9;
टेक्स्ट-शैडो: -18px 18px 0 rgb (66, 45, 45);
}

रेडियोधर्मी

आप इस आशय का उपयोग सतर्क या खतरे के संकेतों के लिए कर सकते हैं। यह 'रैम्पार्ट वन' फॉन्ट का उपयोग करता है।

उत्पादन

एचटीएमएल


 छाया #04 
रेडियोधर्मी

सीएसएस

तन {
पृष्ठभूमि-रंग: #27292d;
}
रेडियोधर्मी {
फ़ॉन्ट-परिवार: 'प्राचीर वन', घसीट;
रंग: आरजीबी (97, 214, 43);
अस्पष्टता: 0.6;
पाठ-छाया: -18px -18px 20px आरजीबी (87, 255, 9);
}

पूरे वेग से दौड़ना

यह चल रहा पाठ प्रभाव 'तेज़ एक' फ़ॉन्ट का उपयोग करता है, पाठ की छाया संपत्ति, और एक ::उपरांतछद्म तत्व पाठ के समान सामग्री के साथ। यह एक 'दोगुना' प्रभाव पैदा करता है।

उत्पादन

एचटीएमएल


 छाया #05 
पूरे वेग से दौड़ना

सीएसएस

तन {
पृष्ठभूमि-रंग: #27292d;
}
स्प्रिंट {
फ़ॉन्ट-परिवार: 'तेज़ एक', घसीट;
फ़ॉन्ट-आकार: 10rem;
रंग: आरजीबीए (255, 0, 242, 0.322);
पाठ-छाया: -20px -108px 0px आरजीबीए (255, 255, 255, 0.445);
लेटर-स्पेसिंग: 1rem;
स्थिति: रिश्तेदार;
}
.sprint:: के बाद {
सामग्री: 'स्प्रिंट';
स्थिति: निरपेक्ष;
शीर्ष: 215px;
दाएं: 300 पीएक्स;
}

काँटेदार

यह भयानक कांटेदार पाठ प्रभाव 'ईटर' फ़ॉन्ट का उपयोग करता है। आप को स्थानांतरित करने का प्रयास कर सकते हैं पाठ की छाया इसके बजाय नीचे-दाईं ओर।

उत्पादन

एचटीएमएल


 छाया #06 
काँटेदार

सीएसएस

कांटेदार {
फ़ॉन्ट-परिवार: 'ईटर', घसीट;
पाठ-छाया: -18px -18px 2px #777;
}

कोडीस्टार

टेक्स्ट-शैडो टेक्स्ट के लिए धुंधली लेकिन दृश्यमान रूपरेखा के रूप में कार्य कर सकता है। यह उज्ज्वल प्रभाव 'कोडीस्टार' फ़ॉन्ट के साथ अद्भुत काम करता है।

उत्पादन

एचटीएमएल


 छाया #06 
कोडीस्टार

सीएसएस

.कोडीस्टार {
फ़ॉन्ट-परिवार: 'कोडीस्टार', कर्सिव;
फोंट की मोटाई: बोल्ड;
रंग: आरजीबी (55, 58, 255);
पाठ-छाया: 1px 1px 10px आरजीबी (16, 72, 255), 1px 1px 10px आरजीबी (0, 195, 255);
}

साम्राज्य

आप इस छाया प्रभाव के साथ आधिकारिक टाइपोग्राफी प्राप्त कर सकते हैं। यह का उपयोग करता है ::इससे पहले छद्म तत्व और परिवर्तन छाया को तिरछा करने की संपत्ति।

उत्पादन

एचटीएमएल


 छाया #08 
साम्राज्य

सीएसएस

तन {
पृष्ठभूमि-रंग: #5e5555;
}
।साम्राज्य {
रंग सफेद;
फ़ॉन्ट-फ़ैमिली: इम्पैक्ट, हेटेन्स्चवीलर, 'एरियल नैरो बोल्ड', सेन्स-सेरिफ़;
फ़ॉन्ट-आकार: 10rem;
लाइन-ऊंचाई: 1;
पाठ-संरेखण: केंद्र;
}
.किंगडम--छाया:: इससे पहले {
रंग: #000;
सामग्री: एटीआर (डेटा-पाठ);
मार्जिन-टॉप: 0.7rem;
स्थिति: निरपेक्ष;
ट्रांसफ़ॉर्म: पर्सपेक्टिव (205px) रोटेटX(38deg) स्केल (0.84);
जेड-इंडेक्स: -1;
}

सांकेतिक शब्दों में बदलनेवाला

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

उत्पादन

एचटीएमएल


 छाया #09 


खाना 

नींद 

कोड 

दोहराना

सीएसएस

तन {
पृष्ठभूमि-रंग: #5e5555;
}
डिव {
फ़ॉन्ट-परिवार: वर्दाना, जिनेवा, ताहोमा, सेन्स-सेरिफ़;
पैडिंग: 40 पीएक्स;
मार्जिन: 0px ऑटो;
फोंट की मोटाई: बोल्ड;
लाइन-ऊंचाई: 5.8rem;
पाठ-संरेखण: बाएँ;
रंग: आरजीबी (94, 94, 94);
} 
.कोडर-जीवन {
पाठ-छाया: 5px 5px #ffff00;
फ़िल्टर: ड्रॉप-शैडो (-10px 10px 20px #fff000);
}

सुरुचिपूर्ण

यदि आप अतिसूक्ष्मवाद से प्यार करते हैं, तो यह पाठ छाया प्रभाव एकदम सही है। चूंकि यह एक बड़े फ़ॉन्ट आकार का उपयोग करता है, इसलिए हमने इसे कम कर दिया है पत्र अंतराल और लागू किया पाठ की छाया इस प्रभाव को बनाने के लिए संपत्ति।

उत्पादन

एचटीएमएल


 छाया #10 


एस
एच
आर
ए
डी
डी
एच
ए

सीएसएस

।सुरुचिपूर्ण {
फ़ॉन्ट-फ़ैमिली: इम्पैक्ट, हेटेन्स्चवीलर, 'एरियल नैरो बोल्ड', सेन्स-सेरिफ़;
फ़ॉन्ट-आकार: 10rem;
लेटर-स्पेसिंग: -1rem;
रंग सफेद;
टेक्स्ट-शैडो: -18px 8px 18px #b4bbbb;
}

चंचल

पतली और बोल्ड रूपरेखा इस पाठ को आकर्षक और जीवंत बनाती है। आप के साथ खेल सकते हैं पाठ की छाया संपत्ति विभिन्न पदों पर कोई धुंधला त्रिज्या नहीं है। टेक्स्ट शैडो सभी वर्णों पर लागू होते हैं, जिनमें HTML निकाय भी शामिल हैं जैसे ♥. आप एक का उपयोग कर सकते हैं चरित्र इकाई संदर्भ चार्ट आगे का पता लगाने के लिए।

उत्पादन

एचटीएमएल


 छाया #11 
कोडिंग. है

सीएसएस

।चंचल {
फ़ॉन्ट-परिवार: 'बालू तम्मा', कर्सिव;
रंग: #fff;
लेटर-स्पेसिंग: 0.2rem;
पाठ-छाया: -2px -2px 0px #888,
4पीएक्स 4पीएक्स 0पीएक्स #888,
7px 7px 0px #888;
}

उन्नत छाया प्रभावों के साथ प्रयोग करते रहें

टेक्स्ट शैडो आपके वेब डिज़ाइन को बढ़ाने और आपकी वेबसाइट को आकर्षक बनाने का एक आसान और प्रभावी तरीका है। आप विभिन्न छाया प्रभावों के साथ भी प्रयोग कर सकते हैं। आप अपनी सीएसएस यात्रा जारी रखने के लिए ड्रॉप शैडो प्रभावों के बारे में अधिक जान सकते हैं।

CSS के साथ ड्रॉप शैडो कैसे बनाएं

CSS बॉक्स-छाया का छाया प्रभाव पर एकाधिकार नहीं है। ड्रॉप-शैडो का उपयोग कैसे और कब करें, यहां जानें।

आगे पढ़िए

साझा करनाकलरवईमेल
संबंधित विषय
  • प्रोग्रामिंग
  • सीएसएस
  • टाइपोग्राफी
  • वेब डिजाइन
लेखक के बारे में
नैंसी मौर्य (15 लेख प्रकाशित)

नैंसी अत्यधिक प्रतिक्रियाशील वेबसाइटों और वेब प्रतियों के साथ कुशल सामग्री रणनीति बनाने में माहिर हैं। वह एक स्वतंत्र तकनीकी लेखिका हैं, जो ट्रेंडिंग तकनीकों पर पैनी नज़र रखती हैं।

नैंसी मौर्य की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें