CSS के साथ ड्रॉप कैप्स कैसे बनाएं (टाइपोग्राफी)

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

ड्रॉप कैप्स डिज़ाइन करने का कोई एक तरीका नहीं है। ड्रॉप कैप्स का उपयोग करने का सबसे आम दृष्टिकोण अपने बॉडी टेक्स्ट के समान फ़ॉन्ट/टाइपफेस का उपयोग करना है, लेकिन उस पहले अक्षर पर फ़ॉन्ट साइज़ को काफी बड़ा बनाना, कभी-कभी बोल्डर।

मैंने इस आर्टिकल के लीड पैराग्राफ में उपयोग किए गए विशेष ड्रॉप कैप स्टाइल को प्राप्त करने के लिए निम्नलिखित कोड का उपयोग किया:

.dropcap { float: left; font-size: 6em; line-height: 0.60; margin: 0; margin-left: -0.04em; padding: .09em .04em 0em 0em; }

इसे पैराग्राफ में उपयोग करने के लिए, बस अपने पैराग्राफ में पहले शब्द के पहले अक्षर को <span एलिमेंट में लपेटें और इसे dropcap क्लास एट्रिब्यूट दें, जैसे:

<p><span class="dropcap">D</span>rop cap is the first letter in a text block... </p>

सावधान रहें कि CSS के साथ आपके विशेष डॉक्यूमेंट के लिए अपने ड्रॉप कैप को कैसे स्टाइल करना है, यह पूरी तरह आपके चुने हुए टाइपफेस की शारीरिक संरचना, आपके फ़ॉन्ट साइज़, लाइन हाइट (लीडिंग), और अन्य कारकों पर निर्भर करता है। ऐसा कोई एक CSS नियम-सेट नहीं है जो आपकी सभी जरूरतों को पूरा करेगा, इसलिए आपको एक अच्छे परिणाम तक पहुंचने के लिए अपने तरीके से नज करना होगा।

आप उपरोक्त CSS को टेम्पलेट/प्रारंभिक बिंदु के रूप में उपयोग कर सकते हैं और फिर अपने ड्रॉप कैप के font-size प्रॉपर्टी को बढ़ाकर/घटाकर इसे अपने पैराग्राफ में बिल्कुल फिट करने के लिए खेल सकते हैं। यदि आप अभी भी अपने ड्रॉप कैप को वैसे अलाइन नहीं कर पा रहे हैं जैसा आप चाहते हैं, तो line-height प्रॉपर्टी मान को थोड़ा ऊपर या नीचे एडजस्ट करने का प्रयास करें। अंत में, आपको अपने ड्रॉप कैप को थोड़ा ऊपर या नीचे ले जाने के लिए margin-top प्रॉपर्टी के साथ खेलने की आवश्यकता हो सकती है।

ड्रॉप कैप स्टाइल्स

मेरे ड्रॉप कैप के लिए चुनी गई विशिष्ट स्टाइलिंग कई में से सिर्फ एक है। ऐसा कोई नियम नहीं है कि ड्रॉप कैप को पैराग्राफ के टेक्स्ट के साथ शीर्ष-नीचे समान रूप से अलाइन होना चाहिए। कुछ डिज़ाइनर ड्रॉप कैप को पहली लाइन के असेंडर से थोड़ा ऊपर उठाएंगे — अन्य इसे काफी ऊपर उठाएंगे। कुछ विपरीत करेंगे और ड्रॉप कैप को टेक्स्ट ब्लॉक में गहराई तक छिपा देंगे, इसके ऊपर और बाईं ओर बहुत सारा व्हाइटस्पेस बनाकर।

कभी-कभी ड्रॉप कैप्स अलग टेक्स्ट, और/या बैकग्राउंड कलर का उपयोग करते हैं।

अलग टेक्स्ट कलर के साथ ड्रॉप कैप

L orem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

अलग बैकग्राउंड-कलर के साथ ड्रॉप कैप

ऊपर के दो उदाहरण उसी CSS का उपयोग करते हैं जो मैंने पहले ड्रॉप कैप क्लास के लिए प्रदान किया था, सिवाय इसके कि वे अलग कलर/बैकग्राउंड-कलर का उपयोग करते हैं। मैंने दूसरे उदाहरण को नज करने के लिए थोड़ा पैडिंग-बॉटम और मार्जिन-राइट भी जोड़ा।

ड्रॉप कैप कई टाइपोग्राफिक जोर उपकरणों में से एक है, लेकिन यह सबसे अधिक ध्यान आकर्षित करने वालों में से एक है — इसलिए इसका संयम से उपयोग करें।