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