सीएसएस initial-letter प्रॉपर्टी का इस्तेमाल करने से, चीज़ें काफ़ी आसान हो जाएंगी.
ब्राउज़र समर्थन
initial-letter को कहां आज़माया जा सकता है? यह Safari में और Chrome 110 से उपलब्ध है. Safari में, प्रॉपर्टी को -webkit- प्रीफ़िक्स की ज़रूरत है. Firefox में इसे लागू किए जाने में एक खुला समस्या है.
इनके साथ initial-letter सहायता की जांच करें:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
मौजूदा समाधान
आज सीएसएस में ड्रॉप कैप को किस तरह से बनाया जा सकता है?
::first-letter के स्यूडो एलिमेंट की वजह से, हम काम करना बंद कर देते हैं.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
हालांकि, फिर आपको पहले अक्षर के साइज़ की गिनती करते समय, "फ़्लोट" जैसी प्रॉपर्टी तक पहुंचना होगा.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
lh जैसी नई सीएसएस यूनिट के लॉन्च से, इस दर्द को कम किया जा सकता है. हालांकि, ये सीमित तौर पर काम करते हैं (फ़िलहाल, lh सिर्फ़ Chrome पर काम करता है).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
पेश है शुरुआती अक्षर
initial-letter प्रॉपर्टी की मदद से, आपको इस ड्रॉप कैप स्टाइल पर बेहतर कंट्रोल मिलता है. इसमें स्पेस से अलग की गई दो वैल्यू का इस्तेमाल किया जाता है:
p::first-letter {
initial-letter: 3.5 3;
}
- पहला तर्क, अक्षर का साइज़ और वह कितनी लाइन इस्तेमाल करेगा, यह बताता है. इस लेटर का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखते हुए, छोटे-बड़े साइज़ का इस्तेमाल किया जाएगा. आप ऋणात्मक मान का उपयोग नहीं कर सकते, लेकिन आप दशमलव मानों का उपयोग कर सकते हैं.
- दूसरा तर्क, लेटर सिंक के बारे में बताता है. इसे इस तरह के ऑफ़सेट के तौर पर माना जा सकता है कि पत्र कहां पर होगा. दूसरी वैल्यू ज़रूरी नहीं है और यह नेगेटिव नहीं हो सकती. अगर यह मौजूद नहीं है, तो यह मान लेता है कि अक्षर के साइज़ की वैल्यू सबसे नज़दीकी पूर्णांक पर दी गई है. यह कीवर्ड “drop” का इस्तेमाल करने के बराबर है. सिंक एक दूसरे कीवर्ड वैल्यू, “raise” को भी स्वीकार करता है जो 1 के सिंक के बराबर है.
यह डेमो देखें, जहां वैल्यू में बदलाव करके यह देखा जा सकता है कि ड्रॉप कैप स्टाइलिंग पर इसका क्या असर पड़ता है.
इसे ::first-line के साथ जोड़ें. इससे आपको ऐसा कुछ मिल सकता है
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
या शायद, इसे border दें. ध्यान दें कि यहां दिए गए उदाहरण में, “ड्रॉप” कीवर्ड का इस्तेमाल कैसे किया गया है. अगर इस कीवर्ड को हटाया जाता है और तीन के बराबर होता है, तो यह डिफ़ॉल्ट कीवर्ड होगा:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
background या कुछ box-shadow जोड़ें:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
या बैकग्राउंड को टेक्स्ट से क्लिप करें:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
आपके पास ढेरों संभावनाएं हैं!
initial-letter की मदद से अपनी ड्रॉप कैप स्टाइल पर बेहतर कंट्रोल पाएं! क्या आपको टाइपोग्राफ़ी में ड्रॉप कैप जोड़ने हैं? आप उन्हें किस तरह स्टाइल कर सकते हैं? हमें बताएं!