मैगजीन स्टाईल में पहला अक्षर बड़ा करके कैसे लिखें

आपने अक्सर देखा होगा कि कई पत्रिकाओं में पहला अक्षर अन्य अक्षरों की तुलना में बड़ा प्रिंट करके लिखते है। आज यही ट्रिक हम आपको बता रहे हैं जो आप अपने ब्लोग या पोस्ट के साथ कर सकते हैं।

पहले अक्षर को बड़ा करके लिखने की तकनीक को ड्रॉप कैप (Drop Cap) कहते हैं। बस इसमें एक बात का ध्यान रहे कि पहले पैरा में आपने काफी शब्द लिखें हो जिससे कि ये देखने में ढंग से व्यवस्थित लगे अगर ऐसा नही करेंगे तो कुछ बिगड़ने वाला नही है बस इसके नीचे खाली स्थान दिखेगा जो अच्छा नही लगेगा।

इसको आप Inline भी लिख सकते हैं और stylesheet में लिखकर भी उपयोग में ला सकते हैं। मैं 2 उदाहरण दूँगा आप बस कोड कॉपी करके उपयोग में ला सकते हैं। पहले उदाहरण में अक्षर का साईज 60 pixel का रखा है और इस अक्षर के द्वारा घेरे जाने वाले स्थान को adjust करने के लिये लाईन height रखी है 50 pixel। इस अक्षर को अन्य अक्षरों के साथ top align करने के लिये हमने padding रखी 0 pixel। बस उसके बाद जैसा कलर चाहिये वो रखिये। एक बात ये है कि अगर आप पहला पैराग्राफ हमेशा छोटा लिखते हैं तो अक्षर के साईज और Height को थोड़ा कम कर दीजियेगा। फोंट का हिन्दी चिट्ठों के लिये इतना महत्व नही है लेकिन अगर आप किसी अंग्रेजी चिट्ठे के लिये उपयोग में लाने का सोचते हैं तो जो फोंट चाहिये वो फोंट सेक्सन में देते जायें।

उदाहरण 1:
ऊपर के पैराग्राफ का “इ” लिखने के लिये हमने नीचे लिखे कोड का उपयोग किया,

CSS Inline style लिखने के लिये नीचे दिये गये कोड को कॉपी करके अपने ब्लोग या पोस्ट में पेस्ट करें:

<span style=”float:left;color:#D4D4C7;font-size:60px;line-height:50px;padding-top:0px;font-family: “Arial”, “Georgia”;”>इ</span>इसको आप Inline भी लिख सकते हैं और stylesheet में लिखकर भी उपयोग में ला सकते हैं।

CSS style sheet के लिये ये वाला कोड लीजियेः

<style type=”text/css”> .first-letter {float:left; color:#D4D4C7; font-size:60px; line-height:50px; padding-top:0px; font-family: “Arial”, “Georgia”; } </style>

फिर उसे इस तरह से उपयोग करें: <span class=”first-letter”>आ</span>प इस कोड को काम में लायें और अपनी पोस्ट को मैगजीन स्टाईल में दिखायें।

उदाहरण 2:

CSS Inline style sheet के लिये ये कोड है-
<span style=”float:left;margin-top:0px;color:#666;padding-top:.2em;font-size:36pt;height:1em;font-weight:bold;font-family:”arial”,”Times New Roman”;”>आ</span>प इस कोड को काम में लायें और अपनी पोस्ट को मैगजीन स्टाईल में दिखायें।

CSS stylesheet में उपयोग करने के लिये इसे काम में लायें-
<style type=”text/css”> .first-letter-1 {float:left; margin-top:0px; color:black; padding-top:.2em; font-size:36pt; height:.9em; font-weight:bold; font-family:”arial”,”Times New Roman”;} </style>

इसी तरह आप ऊपर दिये गये उदाहरण में अलग अलग value देकर कई तरह से variations दे सकते हैं। अब देर किस बात की आप शुरू हो जायें इसे ट्राई करने के लिये हम तब तक सोचते हैं अगली कौन सी ट्रिक आपको बतायें। और हाँ ये बताना मत भुलियेगा कि ये ट्रिक कैसी लगी।

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

Enter your email address:  
Delivered by FeedBurner