CSS Text Effects
In this page:
selector {
text-shadow: h-offset v-offset blur color;
text-overflow: ellipsis;
word-wrap: break-word;
}-webkit-text-stroke से Outlined Text
Non-standard लेकिन widely-supported -webkit-text-stroke property हर letter की glyph shape के चारों ओर एक outline draw करती है, text-shadow से अलग जो text के पीछे एक colored copy को blur करती है। यह एक width और color लेती है, और pure outline effect के लिए अक्सर एक transparent fill के साथ combine की जाती है।
- Accepted values:
- webkit-text-stroke-width — length, जैसे 1px
- webkit-text-stroke-color — कोई भी color value
- shorthand — जैसे 1px black
- webkit-text-fill-color — transparent एक hollow outline देता है
उदाहरण: Outlined Text with -webkit-text-stroke
<style>
h1 {
-webkit-text-stroke: 2px black;
color: transparent;
}
</style>
<h1>Outlined Text</h1>background-clip से Gradient Text
Gradient-filled text text element पर एक background gradient लागू करके, फिर एक transparent text color के साथ background-clip: text इस्तेमाल करके पाया जाता है ताकि gradient एक rectangular box भरने के बजाय letter shapes के through दिखे। यह eye-catching headings के लिए widely used trick है।
उदाहरण: Gradient Text with background-clip
<style>
h1 {
background: linear-gradient(90deg, purple, orange);
background-clip: text;
color: transparent;
}
</style>
<h1>Gradient Heading</h1>Typographic Style के लिए Letter और Word Spacing
letter-spacing और word-spacing क्रमशः individual characters के बीच और words के बीच gap adjust करते हैं। Uppercase text पर wide letter-spacing headings और labels के लिए एक बहुत common stylistic choice है, जो default tight spacing के मुकाबले ज़्यादा spacious, deliberate, "designed" feel देता है।
- Accepted values:
- letter-spacing: normal | <length> — जैसे 2px या 0.1em (negative हो सकता है)
- word-spacing: normal | <length> | <percentage> — words के बीच extra space
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Letter and Word Spacing for Typographic Style
<style>
h2 {
letter-spacing: 0.15em;
text-transform: uppercase;
}
</style>
<h2>Designed Heading</h2>Simple Underlines से आगे Text Decoration
text-decoration-style (solid, double, dotted, dashed, wavy) और text-decoration-thickness default पतली solid line से आगे underlines पर creative control देते हैं, जबकि text-underline-offset underline को text से और दूर ले जाता है ताकि यह "g" या "y" जैसे descenders को crowd न करे।
उदाहरण: Text Decoration Beyond Simple Underlines
<style>
a {
text-decoration-style: wavy;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
</style>
<a href="#">Wavy underline, offset from the text</a>Signature Heading Style के लिए Effects Combine करना
सबसे striking text treatments आमतौर पर इनमें से कई techniques को एक साथ combine करती हैं — एक gradient fill, एक subtle stroke, और deliberate letter-spacing साथ में — किसी अकेली property पर निर्भर रहने के बजाय।
ज़्यादातर CSS effects की तरह ही, restraint मायने रखती है: हर heading पर हर technique combine करना जल्दी ही polished के बजाय noisy लगने लगता है।
उदाहरण: Combining Effects for a Signature Heading Style
<style>
h1 {
background: linear-gradient(90deg, purple, orange);
background-clip: text;
color: transparent;
-webkit-text-stroke: 1px black;
letter-spacing: 0.05em;
}
</style>
<h1>Signature Heading</h1>- यह उम्मीद करना कि
-webkit-text-strokeसिर्फ letters के बाहर draw होगा, जबकि stroke outline पर centered होता है और letter fill को पतला कर देता है। - बिना
color: transparentकेbackground-clip: textइस्तेमाल करना जिससे gradient छुप जाता है। - बहुत ज़्यादा letter spacing जोड़ना, जो words को पढ़ना मुश्किल बना देता है।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera। कुछ browsers में text stroke और gradient text (background-clip: text) अभी भी -webkit- prefix पर निर्भर करते हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: