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

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

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

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

.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 के साथ अपने ड्रॉप कैप को कैसे स्टाइल करें विशेष दस्तावेज़, पूरी तरह से depends पर निर्भर करता है आपके चुने हुए टाइपफेस संरचनात्मक संरचना, आपके फ़ॉन्ट आकार, रेखा ऊंचाई (अग्रणी), और अन्य कारकों पर। एक भी सीएसएस नियम-सेट नहीं है जो आपकी सभी ज़रूरतों को पूरा करेगा, इसलिए आपको एक अच्छे परिणाम के लिए अपना रास्ता बनाना होगा।

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

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

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

कभी-कभी ड्रॉप कैप एक अलग टेक्स्ट और/या पृष्ठभूमि रंग का उपयोग करते हैं।

विभिन्न टेक्स्ट रंगों के साथ ड्रॉप कैप

लोरेम इप्सम, या लिपसम, जैसा कि कभी-कभी जाना जाता है, डमी टेक्स्ट है जिसका उपयोग प्रिंट, ग्राफिक या वेब डिज़ाइन को बिछाने में किया जाता है। इस मार्ग का श्रेय 15वीं शताब्दी में एक अज्ञात टाइपसेटर को दिया जाता है, जिसके बारे में माना जाता है कि उसने एक प्रकार की नमूना पुस्तक में उपयोग के लिए सिसेरो के डी फ़िनिबस बोनोरम एट मालोरम के कुछ हिस्सों को तराशा था।

अलग पृष्ठभूमि-रंग के साथ ड्रॉप कैप

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

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