CSS மற்றும் படங்கள் பயன்படுத்தி ஆடம்பரமான ஆரம்ப Caps உருவாக்குவது எப்படி என்பதை அறிக
உங்கள் பத்திகளுக்கான ஆடம்பரமான ஆரம்ப தொப்பிகளை உருவாக்க CSS ஐப் பயன்படுத்துவது அறிக. உங்கள் ஆரம்ப தொப்பிக்கு ஒரு வரைகலை படத்தை பயன்படுத்த ஒரு எளிய பட மாற்று நுட்பம் உள்ளது.
தொடக்க Caps அடிப்படை பாங்குகள்
ஆவணங்களில் ஆரம்ப தொப்பிகளின் மூன்று அடிப்படை பாணிகள் உள்ளன:
- எழுப்பிய - மிகவும் பொதுவான, முதல் கடிதம் பெரிய மற்றும் தற்போதைய உரை அதே வரியில் எங்கே.
- கைவிடப்பட்டது - முதல் கடிதம் பெரியது மற்றும் உரை முதல் வரி கீழே கைவிடப்பட்டது எங்கே மிகவும் பொதுவான. பின்வரும் உரை பின்னர் அதை சுற்றி மிதக்கிறது.
- அருகில் - முதல் கடிதம் உரை முழுவதும் மற்ற ஒரு பத்தியில் எங்கே. இது வலை வடிவமைப்பு விட அச்சு மிகவும் பொதுவானது.
ஆரம்ப தொப்பிகள் அல்லது துளி தொப்பிகள் மிகவும் பரிச்சயமானவை. அவர்கள் மற்றபடி நீண்ட மற்றும் சலித்துவிடும் உரைகளை உடுத்தி ஒரு சிறந்த வழி. மற்றும் CSS சொத்து: முதல் கடிதம், நீங்கள் எளிதாக உங்கள் முதல் கடிதங்கள் ஆர்வலராக எப்படி வரையறுக்க முடியும்.
எளிய தொடக்கத் தலைப்பை உருவாக்கவும்
ஒரு எளிய எழுப்பப்பட்ட தொடக்க தொப்பியை உருவாக்க நீங்கள் செய்ய வேண்டியது, உங்கள் எழுத்து முதல் எழுத்து கடிதத்தை முதல் எழுத்து கடிதத்துடன் கொண்டுவருவதாகும்:
ப: முதல் எழுத்து {font-size: 3em; }ஆனால் பல உலாவிகளில் முதல் எழுத்து கடிதத்தின் மீதமுள்ளதை விட பெரியதாக இருப்பதைப் பார்க்கிறது, எனவே அந்த முதல் கடிதத்திற்கு அர்த்தம் என்ன என்பதைப் புரிந்துகொள்வதற்கு சமமான முன்னணி வகிக்கின்றன, மீதமுள்ள வரி அல்ல. அதிர்ஷ்டவசமாக, இந்த முதல் வரி போலி-உறுப்பு மற்றும் வரி உயரம் சொத்து சரி செய்ய எளிதானது:
ப: முதல் எழுத்து {font-size: 3em; } ப: முதல் வரி {வரிசை உயரம்: 1 ஏ; }உங்கள் உரையின் சரியான அளவைக் கண்டுபிடிக்கும் வரை உங்கள் ஆவணத்தில் உள்ள உயர உயரத்துடன் விளையாடவும்.
உங்கள் தொடக்க கேப் உடன் விளையாடவும்
ஒரு ஆரம்ப தொப்பியை எப்படி உருவாக்குவது என்பதை நீங்கள் புரிந்து கொண்டால், நீங்கள் தனித்தனி ஆடைகளை அணிந்து கொள்ளலாம். நிறங்கள், பின்னணி வண்ணங்கள், எல்லைகள் அல்லது உங்கள் ஆடம்பரமான தாக்குதலைத் தடுக்கவும். உங்கள் எழுத்து மற்றும் பின்னணி வண்ணத்தின் வண்ணங்களை முதல் கடிதத்திற்கு மாற்றுவது மிகவும் எளிமையான நடைமுறையாகும்:
ப: முதல் எழுத்து {font-size: 300%; பின்னணி-நிறம்: # 000; வண்ணம்: # ff; } ப: முதல் வரி {வரிசை உயரம்: 100%; }மற்றொரு தந்திரம் முதல் வரி மையமாக உள்ளது. உங்கள் தளவமைப்பு நெகிழ்வானால் உரை வரி நடுவில் வேறுபட்டிருக்கும், இது CSS உடன் தந்திரமானதாக இருக்கலாம். ஆனால் சிலர் மதிப்புகள் மூலம் விளையாடுவதைப் போலவே, முதல் கடிதத்தை நடுப்பகுதியில் இருக்கும்படி செய்ய உங்கள் முதல் வரியை நீங்கள் வரிசைப்படுத்தலாம். பத்தியை உரை-உள்தள்ளலில் உள்ள சதவீதத்துடன் சரியாகப் பார்க்கும் வரை விளையாடலாம்:
ப: முதல் எழுத்து {font-size: 300%; பின்னணி-நிறம்: # 000; வண்ணம்: # ff; } ப: முதல் வரி {வரிசை உயரம்: 100%; } p {text-indent: 45% ; }அருகில் உள்ள தொடக்க Caps CSS உடன் கடினமாக உள்ளன
வேறுபட்ட உலாவிகளில் எழுத்துருக்கள் வித்தியாசமாக இருப்பதால், அருகில் உள்ள ஆரம்ப தொப்பிகள் CSS உடன் கடினமாக இருக்கலாம். CSS இல் ஒரு அருகில் உள்ள தொப்பி உருவாக்கி பின் யோசனை (இடதுபுறம்) ஒரு எதிர்மறை மதிப்பை தள்ளும் முதல் வரியில் உரை- indent சொத்து பயன்படுத்த உள்ளது. சில பத்திரிகைகளின் இடது பக்கத்தை நீங்கள் மாற்ற வேண்டும். பத்தி நன்றாக இருக்கும் வரை இந்த எண்களுடன் விளையாடவும்.
p {text-indent: -2.5em; விளிம்பு-இடது: 3 மணி; } ப: முதல் எழுத்து {font-size: 3em; } ப: முதல் வரி {வரிசை உயரம்: 100%; }உண்மையில் ஃபேன்ஸி ஆரம்ப கேப்ஸ் பெறுதல்
ஒரு ஆடம்பரமான ஆரம்ப தொப்பியை உருவாக்க சிறந்த வழி எழுத்துருவை ஒரு அலங்கார எழுத்துரு குடும்பத்திற்கு மாற்றுவது ஆகும். நீங்கள் ஒரு பொதுவான எழுத்துருவைத் தொடர்ந்து தொடர்ச்சியான எழுத்துருவைப் பயன்படுத்தினால் , உங்கள் தொடக்க தொப்பிகளும் உங்கள் வாடிக்கையாளர்களை அணுகுவதை உறுதிப்படுத்த உதவுகிறது, அவை அணுகக்கூடிய தன்மை மற்றும் பயன்பாட்டினை சிக்கலாக்குவதில்லை.
ப: முதல் எழுத்து {font-size: 3em; எழுத்துரு-குடும்பம்: "எட்வர்டியன் ஸ்கிரிப்ட் ஐடிசி", "தூரிகை ஸ்கிரிப்ட் எம்டி", குற்றம்; } ப: முதல் வரி {வரிசை உயரம்: 100%; }மற்றும், வழக்கம் போல், உங்கள் பத்திகளுக்கு விளம்பர பாணியை ஒரு ஆரம்ப தொப்பி உருவாக்க, இந்த எல்லா ஆலோசனைகளையும் ஒன்றாக சேர்த்து வைக்கலாம்.
ஒரு வரைகலை தொடக்கக் காப்பைப் பயன்படுத்துதல்
அந்தப் பக்கத்திலேயே உங்கள் ஆரம்ப தொப்பிகள் எப்படி இருக்கும் என்பதை நீங்கள் விரும்பவில்லை என்றால், நீங்கள் தேடுகிற சரியான விளைவை கிராபிக்ஸ் செய்ய முடியும். ஆனால் நீங்கள் நேராக கிராபிக்ஸ் செல்ல முடிவு முன், நீங்கள் இந்த முறை குறைபாடுகள் பற்றி எச்சரிக்கையாக இருக்க வேண்டும்:
- படங்களை இல்லாமல் வாடிக்கையாளர்கள் ஆரம்ப தொப்பி பார்க்க முடியாது, மற்றும் படத்தை பதிலாக என்று மறைக்கப்பட்ட உரை பார்க்க முடியாது. இது பத்தி அணுக முடியாததாக இருக்கலாம் அல்லது படிக்க மிகவும் கடினமாக இருக்கலாம்.
- படங்கள் எப்போதும் ஒரு பக்கத்தின் பதிவிறக்க நேரத்தை சேர்க்கின்றன. நீங்கள் ஆரம்ப தொப்பிகளை நிறைய வைத்திருந்தால், பலர் உணரத்தக்க அளவுக்கு பதிவிறக்க நேரம் அதிகரிக்கலாம்.
- சில உலாவிகள் மறைக்கப்பட்ட முதல் எழுத்து மற்றும் உருவத்தை இரண்டுமே காண்பிக்கும் - பத்தி உரையை ஒற்றைப்படை உருவாக்கலாம்.
- இந்த விருப்பத்தை தானாகவே சுலபமாக்குவது மிகவும் கடினமானது, முதல் எழுத்து என்ன என்பதை நீங்கள் தெரிந்து கொள்ள வேண்டும், சரியான கிராஃபிக் பயன்படுத்த வேண்டும். எனவே, பத்தி திருத்தும் ஒவ்வொரு முறையும், நீங்கள் ஒரு புதிய கிராஃபிக் உருவாக்க வேண்டும்.
முதல், நீங்கள் முதல் கடிதத்தின் கிராஃபிக் உருவாக்க வேண்டும். நான் எழுத்துரு "எட்வர்டியன் ஸ்கிரிப்ட் ஐடிசி" உடன் கடிதம் எல் உருவாக்க ஃபோட்டோஷாப் பயன்படுத்தப்படுகிறது. நான் அதை பெரியதாக செய்தேன் - அளவு 300 மடங்கு. நான் படத்தை கீழே குறைந்தபட்சம் கடிதத்தை சுற்றி சரிசெய்து மற்றும் படத்தை அகலம் மற்றும் உயரம் குறிப்பிட்டார்.
பின்னர் நான் எனது பத்தியில் "வர்க்கம்" வகுப்பை உருவாக்கினேன். நான் என்ன படத்தை பயன்படுத்த வேண்டும் என்பதை விளக்கும், முன்னணி (வரிசை உயரம்), மற்றும் பல.
பத்தியின் உரை-வரிசை மற்றும் திணிப்பு-அடுக்கை அமைக்க, படத்தை அகலத்தையும் உயரத்தையும் நீங்கள் பயன்படுத்த வேண்டும். என் எல் படத்திற்கு, எனக்கு 95px indent மற்றும் 72 px padding தேவை.
p.capL {line-height: 1em; பின்னணி-படம்: url (capL.gif); பின்னணி-மீண்டும்: இல்லை மீண்டும்; உரை-உள்தள்ளல்: 95px; திணிப்பு-மேல்: 72px; }ஆனால் அது இல்லை. நீங்கள் அதை விட்டுவிட்டால், முதல் கடிதம் பத்தியில் நகல் - முதல் கிராஃபிக், பின்னர் உரை. எனவே, நான் வகுப்பு "ஆரம்ப" முதல் உறுப்பு சுற்றி ஒரு span சேர்க்க - அந்த கடிதம் காட்ட உலாவி கூறினார்:
span.initial {display: none; }மற்றும் கிராஃபிக் பின்னர் சரியாக காட்டுகிறது. கடிதத்திற்கு வலதுபுறம் snugged செய்ய நீங்கள் பத்தியில் உரை-உள்தனத்துடன் விளையாடலாம், இருப்பினும் அதை நீங்கள் காட்ட விரும்புகிறீர்கள்.