लोड हो रहा है...

CSS टेक्स्ट इफ़ेक्ट

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

एक छोटा इफ़ेक्ट टूलकिट

📊 एक नज़र में टेक्स्ट इफ़ेक्ट

टूल रोज़ का काम
text-shadow अक्षरों के पीछे नरम गहराई या ग्लो (offset, blur, रंग)
text-overflow कटे टेक्स्ट का अंत — अक्सर ellipsis (…)
overflow + white-space एलिप्सिस के साथी (hidden + nowrap)
overflow-wrap लंबी शब्द/URL तोड़कर बॉक्स में फिट करता है
writing-mode टेक्स्ट दूसरी दिशा में चलाता है (जैसे लंबवत)

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

text-shadow — offset, blur, रंग

क्रम आमतौर पर क्षैतिज offset, ऊर्ध्वाधर, blur त्रिज्या, फिर रंग। छोटे मान शांत लगते हैं; बहुत बड़ा blur अक्षर धुँधले कर देता है।

बेसिक text-shadow

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

परतदार छाया

आप अल्पविराम से कई छाया सूचीबद्ध कर सकते हैं — कठोर किनारे के बिना नरम उठान के लिए उपयोगी।

दो नरम परतें

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

टेक्स्ट बहुत चौड़ा हो तो एलिप्सिस

text-overflow: ellipsis केवल क्लिप सेटअप के साथ काम करता है: आमतौर पर सीमित चौड़ाई वाले बॉक्स पर overflow: hidden और white-space: nowrap।

संकीर्ण लेबल पर एलिप्सिस

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — लंबे शब्द काबू करें

लंबी URL या बिना स्पेस की स्ट्रिंग संकीर्ण कॉलम तोड़ सकती है। overflow-wrap: break-word (पुराना नाम word-wrap) जरूरत पड़ने पर शब्द के अंदर तोड़ने देता है।

लंबी स्ट्रिंग तोड़ें

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — लंबवत झलक

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

लंबवत टेक्स्ट झलक

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

शांत शीर्षक आदत

छोटे शीर्षक पर एक नरम छाया अक्सर काफी है। बॉडी पर भारी ग्लो न लगाएँ, और एलिप्सिस सिर्फ जहाँ जगह सच में कम हो।

हल्की शीर्षक पॉलिश

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

खुद आज़माएँ

  1. शीर्षक पर नरम text-shadow लगाएँ (छोटे offset, मामूली blur)।
  2. अल्पविराम से दूसरी हल्की छाया जोड़ें।
  3. एलिप्सिस लेबल बनाएँ: max-width, overflow: hidden, nowrap, ellipsis।
  4. संकीर्ण बॉक्स में लंबी URL रखें और overflow-wrap: break-word दें।
  5. छोटे साइड लेबल पर writing-mode: vertical-rl आज़माएँ — फिर सामान्य पढ़ाई पर लौटें।

आम गलतियाँ

  • लंबे पैराग्राफ़ पर नीयन बहु-छाया (पढ़ना कठिन)
  • overflow: hidden और nowrap के बिना text-overflow: ellipsis
  • जब overflow-wrap काफ़ी हो तो आक्रामक word-break से हर शब्द तोड़ना
  • पूरे लेख पर लंबवत writing-mode
  • इस पाठ को @font-face / वेब फ़ॉन्ट लोड से मिलाना (पिछला पाठ)

सारांश

  • text-shadow में offset, blur और रंग — मान मामूली रखें
  • कई छाया नरम उठान के लिए परत बन सकती हैं
  • एलिप्सिस को overflow, nowrap और चौड़ाई सीमा चाहिए
  • overflow-wrap लंबे शब्द और URL मदद करता है
  • writing-mode विशेष उपकरण है; रोज़ की बॉडी क्षैतिज रहती है

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
7
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 1 का 1
Css ट्यूटोरियल