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