CSS සහ පින්තූර භාවිතයෙන් අලංකාර ආරම්භක Caps නිර්මාණය කරන්නේ කෙසේදැයි ඉගෙන ගන්න
ඔබගේ ඡේද සඳහා අලංකාර ආරම්භක කෝප්පයක් නිර්මාණය කිරීමට CSS භාවිතා කරන ආකාරය ඉගෙන ගන්න. ඔබේ ආරම්භක සීමාව සඳහා චිත්රක රූපයක් භාවිතා කිරීම සඳහා සරල ප්රතිරූප ක්රමයක් පවා ඇත.
ආරම්භක කේබල් මූලික විලාසිතා
ලියකියවිලිවල මුල් ප්රස්ථාර තුනේ මූලික ස්වරූප තුනක් තිබේ:
- ඉහළම පොදු වන අතර, පළමු අකුර විශාල වන අතර වත්මන් පෙළට සමාන පේළියක දක්නට ලැබේ.
- අක්ෂරයෙන් පිටත - පළමු අකුර විශාල වන අතර එහි මුල් පේළිය පහළට පහළින් පහළ වැටුණි. ඊළඟ පාඨය පසුව එය වටේ.
- යාබද අකුරු - පළමු අකුර අනෙක් තීරුව අසළ එක් තීරුවක ඇත. වෙබ් නිර්මාණයට වඩා එය මුද්රණයට වඩා බහුල වේ.
ආරම්භක කැප් හෝ ඩ්රොප් කැපුම් ඉතා හුරුපුරුදුය. ඒවා දිගු හා වෙහෙස මහන්සි වී වැඩ කරන්නට හොඳම ක්රමයකි. CSS දේපල සමඟ: මුල් අකුරෙන්, ඔබේ පළමු අකුරු අනුමත කිරීමට ඔබට පහසුවෙන්ම අර්ථ දැක්විය හැක.
සරල ආරම්භක කේප් එකක් සාදන්න
සරල උනුසුම් ආරම්භක කෝණයක් නිර්මාණය කිරීම සඳහා ඔබ කළ යුතු සියල්ල පළමු අකුරේ ව්යාජ-මූලද්රව්යය සමඟ ඔබේ ඡේදයේ පළමු අකුර විශාල වන පරිදි කිරීමයි:
p: පළමු අකුර {font-size: 3em; }}නමුත් බොහෝ බ්රව්සරයන් පේළියෙහි ඉතිරි පෙළට වඩා විශාල අකුරු අකුරුවලට වඩා විශාල වන අතර එය එම පළමු අකුරට නොව, එම රේඛාවේ ඉතිරි නොවන බව පෙන්වයි. කනගාටුවට කරුණක් නම්, පළමු පේළියෙහි ව්යාජ-මූලද්රව්යය සහ රේඛාවෙහි උස ගුණය සමඟ එය නිවැරදි කිරීමයි:
p: පළමු අකුර {font-size: 3em; } p: පළමු පේළිය {line-height: 1em; }}ඔබගේ පෙළ සඳහා නිවැරදි ප්රමාණය සොයාගන්නා තුරු ඔබගේ ලේඛනයේ පේළිය උස සෙල්ලම් කරන්න.
ඔබේ ආරම්භක කැප් එක සමඟ සෙල්ලම් කරන්න
ආරම්භක කූඩුවක් සෑදීමට ඔබට හැකි වූ පසු, ඔබ එය කැපී පෙනෙන අන්දමින් ඇඳුම් සාදාගත හැකිය. වර්ණ, පසුබිම් වර්ණ, දේශසීමා හෝ ඔබේ වර්ණ ගැන්වීම සඳහා ක්රීඩා කරන්න. ඉතා සරල ආකාරයක් වන්නේ අකුරු සහ පසුබිමේ වර්ණයන්හි වර්ණ ආපසු හරවන්න පළමු අකුර සඳහා පමණි:
p: පළමු අකුර {font-size: 300%; පසුබිම් වර්ණය: # 000; වර්ණය: #fff; } p: පළමු පේළිය {line-height: 100%; }}තවත් උපක්රමයක් වන්නේ පළමු පේළිය කේන්ද්රගත කිරීමයි. CSS සමඟ ගැටලුවක් විය හැක. ඔබේ සැලැස්ම නම්යශීලී නම් පෙළ පෙළේ මැද වෙනස් විය හැකිය. එහෙත් සමහරුන්ගේ වටිනාකම් සමඟ සෙල්ලම් කරමින්, පළමු අකුර මැද ඇති බව පෙනෙන පරිදි ඔබේ පළමු පේළිය හරවා ගත හැකිය. ඡේදයේ පෙළ-පරතරය මත ප්රතිශතයක් සමඟ සෙල්ලම් කරන්න:
p: පළමු අකුර {font-size: 300%; පසුබිම් වර්ණය: # 000; වර්ණය: #fff; } p: පළමු පේළිය {line-height: 100%; } p {පෙළ-indent: 45% ; }}අනුබද්ධ ආරම්භක කේබල් CSS සමඟ දැඩි වේ
විවිධ බ්රවුසර්වල විවිධ අකුරු පෙන්වයි, ආසන්න වශයෙන් ආරම්භක සීමා කිරීම් CSS සමග අපහසු විය හැකිය. CSS හි යාබද ආවරණයක් නිර්මාණය කිරීම සඳහා වූ අදහස වන්නේ, පළමු පේළියේ (වමේ සිට) ඍණ අගයක් ටයිප් කිරීමයි. සමහර විට එම ඡේදයේ වම් පරාසය වෙනස් කිරීමටද ඔබට අවශ්ය වනු ඇත. ඡේදය හොඳට පෙනෙන තුරු මෙම අංක සමඟ සෙල්ලම් කරන්න.
p {පෙළ-indent: -2.5em; ආන්තික වම: 3em; } p: පළමු අකුර {font-size: 3em; } p: පළමු පේළිය {line-height: 100%; }}ඇත්තෙන්ම පිස්සු ආරම්භක කේප්
අලංකාර ආරම්භක පියනක් නිර්මාණය කිරීමේ හොඳම ක්රමය වනුයේ ෆොන්ට වැඩිහිටි ෆොන්ටේ පවුලට අකුරු වෙනස් කිරීමයි. ඔබ ෆොර්ස් වර්ණ මාලාවක් අනුගමනය කරන්නේ නම්, ඔබේ ආරම්භක කූපය හොඳින් පෙනෙන පරිදි ඔබේ පාරිභෝගිකයින්ට එය දැක ගත හැකිය, ප්රවේශ්යතාව සහ භාවිතයට ඇති ගැටළු වලට ප්රවේශ වීමෙන් තොරව එය සහතික කරනු ඇත.
p: පළමු අකුර {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", සාපේක්ෂ; } p: පළමු පේළිය {line-height: 100%; }}සාමාන්යයෙන්, ඔබේ ඡේදයට දැන්වීම්වල ශෛලිය වන මුලික අගයක් නිර්මාණය කිරීමට මෙම යෝජනා සියල්ල එකට එකතු කළ හැකිය.
චිත්රක මූලික ආරම්භකයක් භාවිතා කරමින්
ඒ සියල්ලට පසුව, ඔබේ මුල් කෝප් පිටු බැලීමට ඔබට තවමත් අකමැති නම්, ඔබ සොයන නිශ්චිත බලපෑම ලබා ගැනීම සඳහා ඔබට චිත්රක යෙදිය හැකිය. නමුත් ඔබ කෙළින්ම ග්රැෆික්ස් වෙත යොමු කිරීමට පෙර, මෙම ක්රමයෙහි දුර්වලතා ඔබ දැන සිටිය යුතුය:
- රූප නොමැතිව පාරිභෝගිකයින්ට ආරම්භක කූටය නොදක්වන අතර රූපය ප්රතිස්ථාපනය කරන ලද සැඟවුණු පාඨ දැකිය නොහැක. මෙම ඡේදය ප්රවේශ විය නොහැකිය, හෝ කියවීමට අමාරුය.
- පින්තූර සෑම විටම පිටුවක බාගැනීමේ කාලය වෙත එක් කරයි. ඔබට ආරම්භක සීමාවන් ගොඩක් තිබේ නම්, බොහෝ දෙනෙකුට සැලකිය යුතු යමක් හැඟෙන දෙයක් සඳහා බාගත කිරීමේ කාලය සැලකිය යුතු ලෙස වැඩි කළ හැකිය.
- සමහර බ්රව්සර්වල සැඟවුණු මුල් අකුර සහ පිංතූරය පෙන්නුම් කරනු ඇත - ඡේදයේ පාඨය අහඹු ලෙස පෙනෙනු ඇත.
- ඔබට මෙම විකල්පය ස්වයංක්රීය කිරීමට ඉතා අපහසු වේ, ඔබ පළමු අකුර නිවැරදි ලෙස ග්රැෆික් භාවිතා කරන බව ඔබ දැන සිටිය යුතුය. එබැවින්, ඡේදය සංස්කරණය කරන සෑම අවස්ථාවකදීම, ඔබට නව ග්රැෆික් නිර්මාණය කිරීමට අවශ්ය විය හැකිය.
පළමුවෙන්ම, පළමු අකුරේ ග්රැෆික් නිර්මාණය කළ යුතුය. මම L අකුරු "Edwardian Script ITC" යන අකුරු සහිතව Photoshop භාවිතා කළා. මම එය විශාලයි - ප්රමාණයෙන් 300 පටුන. ඉන්පසු මා රූපය වටා ඇති අවම රූපය දක්වා රූපය රූපය හා පළල සලකුණු කර ඇත.
ඊටපස්සේ මම මගේ ඡේදය සඳහා පන්ති "capL" නිර්මාණය කළා. මා විසින් භාවිතා කරන රූපය, ප්රධාන (රේඛාව-උස) සහ වෙනත් යනාදි ලෙස මෙහි අර්ථය මෙහි දැක්වේ.
ඡේදයේ පෙළ-indent සහ padding-top සැකසීම සඳහා රූපයේ පළල සහ උස භාවිතා කළ යුතුය. මගේ L ප්රතිරූපයට, 95px indent සහ 72px padding අවශ්ය විය.
p.capL {line-height: 1em; පසුබිම් රූප: url (capL.gif); පසුබිම්-පුනරාවර්තනය: නො-නැවත කියවීම; පෙළ-indent: 95px; padding-top: 72px; }}නමුත් එය සියල්ලම නොවේ. ඔබ එය එහි තබාගන්නවා නම්, පළමු අකුර ඡේදයෙහි අනුපිටපත් කරනු ලැබේ - පළමුව ග්රැෆික් සමග, ඉන්පසු පෙළෙහි. ඉතින්, මම පළමු මූලද්රව්යය "මුල්" පන්තිය සමඟ එක් වස්තුවක් එකතු කළා - එම ලිපිය ප්රදර්ශනය නොකිරීමට බ්රවුසරයට පැවසුවේ:
span.initial {display: none; }}එවිට ග්රැෆික් නිවැරදිව ප්රදර්ශනය වේ. අකුරු ඇඩැප්ටරය සමඟ අකුරින් අකුරු ආයාචනය කිරීම සඳහා ඔබට අකුරු ඇටවීම කළ හැකිය.