उपयोग करना सीखें सीएसएस उत्पन्न करनाकल्पना आपके पैराग्राफ के लिए प्रारंभिक कैप। आपकी प्रारंभिक टोपी के लिए ग्राफिकल छवि का उपयोग करने के लिए एक साधारण छवि प्रतिस्थापन तकनीक भी है।
प्रारंभिक कैप्स की मूल शैलियाँ
दस्तावेज़ों में प्रारंभिक कैप की तीन बुनियादी शैलियाँ हैं:
- उठाया - सबसे आम, जहां पहला अक्षर बड़ा है और वर्तमान पाठ के समान पंक्ति पर है।
- गिरा - यह भी काफी सामान्य है, जहां पहला अक्षर बड़ा है और पाठ की पहली पंक्ति के नीचे गिरा है। निम्नलिखित पाठ इसके चारों ओर तैरता है।
- सटा हुआ - जहां पहला अक्षर बाकी टेक्स्ट के बगल में एक कॉलम में है। यह वेब डिज़ाइन की तुलना में प्रिंट में अधिक सामान्य है।
प्रारंभिक कैप या ड्रॉप कैप बहुत परिचित हैं। वे अन्यथा लंबे और उबाऊ पाठ को तैयार करने का एक शानदार तरीका हैं। और CSS संपत्ति के साथ: पहला अक्षर, आप आसानी से परिभाषित कर सकते हैं कि अपने पहले अक्षर को कैसे अधिक आकर्षक बनाया जाए।
एक साधारण प्रारंभिक कैप बनाएं Create
एक साधारण उभरी हुई प्रारंभिक टोपी बनाने के लिए आपको बस इतना करना है कि अपने पैराग्राफ के पहले अक्षर को पहले अक्षर के छद्म तत्व के साथ आकार में बड़ा बनाना है:
पी: पहला अक्षर {फ़ॉन्ट-आकार: 3em; }
लेकिन कई ब्राउज़रों देखें कि पहला अक्षर लाइन के बाकी टेक्स्ट से बड़ा है, इसलिए वे लीडिंग को उसी के बराबर बनाते हैं जो उस पहले अक्षर के लिए मायने रखता है, बाकी लाइन के लिए नहीं। सौभाग्य से, पहली-पंक्ति छद्म-तत्व और लाइन-ऊंचाई संपत्ति के साथ इसे ठीक करना आसान है:
पी: पहला अक्षर {फ़ॉन्ट-आकार: 3em; }
पी: पहली पंक्ति {लाइन-ऊंचाई: 1em; }
अपने दस्तावेज़ के भीतर लाइन की ऊंचाई के साथ तब तक खेलें जब तक आपको अपने टेक्स्ट के लिए सही आकार न मिल जाए।
अपनी प्रारंभिक कैप के साथ खेलें
एक बार जब आप समझ जाते हैं कि प्रारंभिक टोपी कैसे बनाई जाती है, तो आप इसे फैंसी कपड़ों में तैयार कर सकते हैं ताकि इसे बाहर खड़ा किया जा सके। रंगों, पृष्ठभूमि के रंगों, सीमाओं, या जो कुछ भी आपके फैंस को भाता है, उसके साथ खेलें। केवल पहले अक्षर के लिए अपने फ़ॉन्ट के रंगों और पृष्ठभूमि के रंग को उलटने के लिए एक काफी सरल शैली है:
पी: पहला अक्षर {
फ़ॉन्ट-आकार: ३००%;
पृष्ठभूमि-रंग: #000;
रंग: #fff;
}
पी: पहली पंक्ति {लाइन-ऊंचाई: 100%; }
पहली पंक्ति को केंद्र में रखना एक और चाल है। यह सीएसएस के साथ मुश्किल हो सकता है, क्योंकि यदि आपका लेआउट लचीला है तो टेक्स्ट लाइन का मध्य अलग हो सकता है। लेकिन कुछ मूल्यों के साथ खिलवाड़ करते हुए, आप अपनी पहली पंक्ति को इतना इंडेंट कर सकते हैं कि पहला अक्षर बीच में दिखाई दे। पैराग्राफ के टेक्स्ट-इंडेंट पर प्रतिशत के साथ तब तक खेलें जब तक यह सही न लगे:
पी: पहला अक्षर {
फ़ॉन्ट-आकार: ३००%;
पृष्ठभूमि-रंग: #000;
रंग: #fff;
}
पी: पहली पंक्ति {लाइन-ऊंचाई: 100%; }
पी { टेक्स्ट इंडेंट: 45%; }
आसन्न प्रारंभिक कैप्स सीएसएस के साथ कठिन हैं
सीएसएस के साथ आसन्न प्रारंभिक कैप मुश्किल हो सकते हैं क्योंकि विभिन्न ब्राउज़र अलग-अलग फ़ॉन्ट प्रदर्शित करते हैं। सीएसएस में एक आसन्न टोपी बनाने के पीछे का विचार पहली पंक्ति पर टेक्स्ट-इंडेंट संपत्ति का उपयोग करना है ताकि इसे (बाईं ओर) नकारात्मक मान से बाहर निकाला जा सके। आपको उस अनुच्छेद के बाएँ हाशिया को कुछ मात्रा में बदलना होगा। इन नंबरों के साथ तब तक खेलें जब तक पैराग्राफ अच्छा न लगे।
पी {
टेक्स्ट इंडेंट: -2.5em;
मार्जिन-बाएं: 3em;
}
पी: पहला अक्षर {फ़ॉन्ट-आकार: 3em; }
पी: पहली पंक्ति {लाइन-ऊंचाई: 100%; }
वास्तव में फैंसी प्रारंभिक कैप्स प्राप्त करना
एक फैंसी प्रारंभिक टोपी बनाने का सबसे अच्छा तरीका फ़ॉन्ट को अधिक सजावटी फ़ॉन्ट परिवार में बदलना है। यदि आप a. का उपयोग करते हैं फोंट की श्रृंखला उसके बाद a सामान्य फ़ॉन्ट, यह गारंटी देने में मदद करेगा कि आपकी प्रारंभिक सीमा अच्छी तरह से प्रदर्शित होती है ताकि आपके ग्राहक इसे देख सकें, बिना पहुंच और उपयोगिता के मुद्दों में शामिल हुए।
पी: पहला अक्षर {
फ़ॉन्ट-आकार: 3em;
फ़ॉन्ट-परिवार: "एडवर्डियन स्क्रिप्ट आईटीसी", "ब्रश स्क्रिप्ट एमटी", कर्सिव;
}
पी: पहली पंक्ति {लाइन-ऊंचाई: 100%; }
और, हमेशा की तरह, आप इन सभी सुझावों को एक साथ रखकर एक प्रारंभिक सीमा बना सकते हैं जो आपके अनुच्छेद को विज्ञापन शैली प्रदान करे।
ग्राफिकल प्रारंभिक कैप का उपयोग करना Using
यदि, इतना सब होने के बाद भी, आपको अभी भी यह पसंद नहीं है कि पृष्ठ पर आपके प्रारंभिक कैप कैसे दिखते हैं, तो आप सटीक प्रभाव प्राप्त करने के लिए ग्राफ़िक्स का सहारा ले सकते हैं जिसकी आप तलाश कर रहे हैं। लेकिन इससे पहले कि आप सीधे ग्राफिक्स पर जाने का फैसला करें, आपको इस पद्धति की कमियों के बारे में पता होना चाहिए:
- बिना छवियों वाले ग्राहकों को प्रारंभिक कैप नहीं दिखाई देगी, और हो सकता है कि छवि द्वारा प्रतिस्थापित किए जा रहे छिपे हुए टेक्स्ट को न देखें। यह पैराग्राफ को दुर्गम बना सकता है, या पढ़ने में सबसे कठिन बना सकता है।
- छवियां हमेशा एक पृष्ठ के डाउनलोड समय में जुड़ जाती हैं। यदि आपके पास बहुत सी प्रारंभिक सीमाएँ हैं, तो आप कुछ ऐसे लोगों के लिए डाउनलोड समय को महत्वपूर्ण रूप से बढ़ा सकते हैं जो बहुत से लोगों को महत्वहीन लगेगा।
- कुछ ब्राउज़र छिपे हुए पहले अक्षर और छवि दोनों को प्रदर्शित करेंगे जो पैराग्राफ टेक्स्ट को अजीब बना सकते हैं।
- इस विकल्प को स्वचालित करना बहुत कठिन है, क्योंकि आपको यह जानना होगा कि पहला अक्षर वास्तव में क्या है ताकि आप सही ग्राफिक का उपयोग कर सकें। इसलिए, हर बार जब पैराग्राफ संपादित किया जाता है, तो आपको एक नया ग्राफिक बनाने की आवश्यकता हो सकती है।
सबसे पहले, आपको पहले अक्षर का ग्राफिक बनाना होगा। हमने "Edwardian Script ITC" फ़ॉन्ट के साथ L अक्षर बनाने के लिए Photoshop का उपयोग किया। हमने इसे विशाल बनाया - आकार में 300pt। फिर हमने छवि को अक्षर के चारों ओर न्यूनतम तक क्रॉप किया और छवि की चौड़ाई और ऊंचाई को नोट किया।
फिर हमने अपने अनुच्छेद के लिए एक वर्ग "capL" बनाया। यह वह जगह है जहां हम परिभाषित करते हैं कि किस छवि का उपयोग करना है, अग्रणी (लाइन-ऊंचाई), और इसी तरह।
अनुच्छेद के टेक्स्ट-इंडेंट और पैडिंग-टॉप को सेट करने के लिए आपको छवि चौड़ाई और ऊंचाई का उपयोग करने की आवश्यकता है। हमारी एल छवि के लिए, हमें 95px इंडेंट और 72px पैडिंग की आवश्यकता है।
पी.कैप एल {
लाइन-ऊंचाई: 1em;
पृष्ठभूमि-छवि: यूआरएल (capL.gif);
बैकग्राउंड-रिपीट: नो-रिपीट;
टेक्स्ट इंडेंट: 95px;
पैडिंग-टॉप: 72px;
}
लेकिन वह सब नहीं है। यदि आप इसे वहीं छोड़ देते हैं, तो पहले अक्षर को पैराग्राफ में, पहले ग्राफिक के साथ, फिर टेक्स्ट में डुप्लिकेट किया जाएगा। इसलिए हमने "प्रारंभिक" वर्ग के साथ उस पहले तत्व के चारों ओर एक अवधि जोड़ दी और ब्राउज़र को उस पत्र को प्रदर्शित न करने के लिए कहा:
अवधि। प्रारंभिक {प्रदर्शन: कोई नहीं; }
ग्राफिक तब सही ढंग से प्रदर्शित होता है। टेक्स्ट को सीधे अक्षर तक ले जाने के लिए आप पैराग्राफ पर टेक्स्ट इंडेंट के साथ खेल सकते हैं, हालांकि आप इसे प्रदर्शित करना चाहते हैं।