CSS ഉം ചിത്രങ്ങളും ഉപയോഗിച്ച് ഫാൻസി ഇനീഷ്യൻ Caps സൃഷ്ടിക്കുക എങ്ങനെ അറിയുക
നിങ്ങളുടെ ഖണ്ഡികകൾക്കായി ഫാൻസി പ്രാരംഭ തൊപ്പികൾ സൃഷ്ടിക്കാൻ CSS എങ്ങനെ ഉപയോഗിക്കുമെന്നത് മനസിലാക്കുക. നിങ്ങളുടെ ആദ്യ പരിധിക്കായി ഒരു ഗ്രാഫിക്കൽ ചിത്രം ഉപയോഗിക്കുന്നതിന് ലളിതമായ ഇമേജ് മാറ്റിസ്ഥാപിക്കാനുള്ള സാങ്കേതികവിദ്യ പോലും ഉണ്ട്.
ഇനീഷ്യൽ കാപ്സിന്റെ അടിസ്ഥാന ശൈലികൾ
പ്രമാണങ്ങളിൽ പ്രാരംഭ പരിപാടികളുടെ മൂന്ന് അടിസ്ഥാന ശൈലികളുണ്ട്:
- ഉയർത്തിക്കാട്ടുന്നു - ആദ്യത്തെ അക്ഷരം വലുതും അതേ ടെക്സ്റ്റിലുള്ള അതേ വരിയിൽ തന്നെ നിൽക്കുന്ന ഏറ്റവും സാധാരണവും.
- ആദ്യ കത്ത് വലുതായിരിക്കുമ്പോൾ, ടെക്സ്റ്റിന്റെ ആദ്യ വരി താഴേക്ക് തന്നെ കുറയുകയും ചെയ്തു. താഴെ പറയുന്ന വാചകം അതിനുചുറ്റും ഒഴുകുന്നു.
- സമീപത്തെ - ആദ്യത്തെ കത്ത് ടെക്സ്റ്റിന്റെ ശേഷിക്കുന്ന ഭാഗത്ത് ഒരു നിരയിലായിരിക്കും. ഇത് വെബ് ഡിസൈനിനേക്കാൾ പ്രിന്റിൽ സാധാരണമാണ്.
പ്രാഥമിക കാപ്സ് അല്ലെങ്കിൽ ഡ്രോപ്പ് ക്യാപ്സ് വളരെ പരിചിതമാണ്. ടെക്സ്റ്റിന്റെ മറ്റ് ദീർഘമായ വ്രണങ്ങളുള്ള വസ്ത്രങ്ങൾ ധരിക്കാനുള്ള മികച്ച മാർഗമാണിത്. കൂടാതെ CSS വസ്തുവിലും: ആദ്യലേഖനം, നിങ്ങളുടെ ആദ്യ അക്ഷരങ്ങൾ എങ്ങനെ ഉണ്ടാക്കാം എന്നത് എളുപ്പത്തിൽ നിർവചിക്കാം.
ഒരു ലളിത ഇനീഷ്യൽ ക്യാപ് സൃഷ്ടിക്കുക
ഒരു ചെറിയ ഉയരം സൃഷ്ടിക്കുന്ന ആദ്യ തൊപ്പി സൃഷ്ടിക്കാൻ നിങ്ങൾ ചെയ്യേണ്ടതെല്ലാം നിങ്ങളുടെ ഖണ്ഡികയിലെ ആദ്യ അക്ഷരം വലുപ്പമുള്ള ആദ്യ കഷണം പൂജ്യം കൊണ്ട് ഉണ്ടാക്കുക എന്നതാണ്.
p: ആദ്യലേഖനം {font-size: 3em; }പക്ഷെ, മിക്ക ബ്രൌസറുകളും ഒന്നാം കക്ഷത്തെ ടെക്സ്റ്റിലെ ബാക്കി ഭാഗത്തേക്കാൾ വലുതാണെന്ന് മനസ്സിലാക്കുന്നു, അതിനാൽ അവ ആദ്യകോഡിന് എന്ത് അർഥം നൽകുമെന്ന് സൂചിപ്പിക്കുന്നു, ബാക്കിയുള്ള ഭാഗം ബാക്കി ഭാഗമല്ല. ഭാഗ്യപരമായി, ആദ്യത്തെ വരി സ്യൂഡോ-എലമെൻറ് കൂടാതെ ലൈൻ-എയ്റ്റ് പ്രോപ്പർട്ടിയോ ഉപയോഗിച്ച് ഇത് പരിഹരിക്കാൻ എളുപ്പമാണ്:
p: ആദ്യലേഖനം {font-size: 3em; } p: ആദ്യ വരി {line-height: 1em; }നിങ്ങളുടെ ടെക്സ്റ്റിന് ശരിയായ വലുപ്പം കണ്ടെത്തുന്നതുവരെ നിങ്ങളുടെ പ്രമാണത്തിനുള്ളിൽ ലൈൻ ഉയരം ഉപയോഗിച്ച് പ്ലേ ചെയ്യുക.
നിങ്ങളുടെ ആദ്യ ക്യാപ്പിനോടൊപ്പം പ്ലേ ചെയ്യുക
ഒരു പ്രാഥമിക കാപ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കിയാൽ ഫാൻസി വസ്ത്രങ്ങളിൽ വേഷിക്കുക. നിറങ്ങളോടൊപ്പം, പശ്ചാത്തല വർണ്ണങ്ങൾ, ബോർഡറുകൾ, അല്ലെങ്കിൽ നിങ്ങളുടെ ഫാൻസി തല്ലുക. നിങ്ങളുടെ അക്ഷരത്തിന്റേയും പശ്ചാത്തല വർണങ്ങളുടേയും നിറങ്ങൾ ആദ്യ അക്ഷരത്തിൽ തിരിച്ചെത്താനുള്ള ലളിതമായ ശൈലി:
p: ആദ്യലേഖനം {font-size: 300%; പശ്ചാത്തല വർണം: # 000; നിറം: # ff; } പി: ഒന്നാംവരി {line-height: 100%; }ആദ്യത്തെ വരി മദ്ധ്യത്തിലാക്കാനാണ്. നിങ്ങളുടെ ലേഔട്ട് ഫ്ലെക്സിബിളാണെങ്കിൽ ടെക്സ്റ്റ് വരിയുടെ മധ്യഭാഗം വ്യത്യസ്തമായിരിക്കുന്നതിനാൽ ഇത് CSS ഉപയോഗിച്ച് കുഴപ്പം ആകാം. എന്നാൽ ചില മൂല്യങ്ങളോടൊപ്പം കളിക്കുന്നുണ്ട്, ആദ്യ കത്ത് മധ്യത്തിൽ ദൃശ്യമാകുന്നതിന് നിങ്ങളുടെ ആദ്യ വരി ഇൻഡെന്റ് ചെയ്യാൻ കഴിയും. ഖണ്ഡികയിലെ ടെക്സ്റ്റ് ഇൻഡന്റിലെ ശതമാനത്തിൽ തന്നെ വലത് കാണിക്കുന്നതുവരെ അത് കളിക്കുക:
p: ആദ്യലേഖനം {font-size: 300%; പശ്ചാത്തല വർണം: # 000; നിറം: # ff; } പി: ഒന്നാംവരി {line-height: 100%; } p {ടെക്സ്റ്റ്-ഇൻഡന്റ്: 45% ; }സമീപമുള്ള പ്രാഥമിക കാപ്സ് എന്നത് CSS ഉള്ള ഹാർഡ് ആണ്
വിവിധ ബ്രൌസറുകൾ വ്യത്യസ്ത ഫോണ്ടുകൾ പ്രദർശിപ്പിക്കുന്നത് കാരണം സമീപമുള്ള പ്രാരംഭ പരിപാടികൾ CSS ഉപയോഗിച്ച് ബുദ്ധിമുട്ടുള്ളതായിരിക്കും. CSS- ൽ തൊട്ടടുത്തുള്ള ക്യാപ്പ് സൃഷ്ടിക്കുന്നതിനു പിന്നിലുള്ള ആശയം ആദ്യത്തെ വരിയിലെ ടെക്സ്റ്റ് ഇൻഡന്ഡഡ് പ്രോപ്പർട്ടി (ഇടതുവശത്ത്) ഒരു നെഗറ്റീവ് മൂല്യം മാറ്റാൻ ഉപയോഗിക്കുക എന്നതാണ്. ആ ഖണ്ഡത്തിന്റെ ഇടതു മാർജിനും കുറച്ച് തുക മാറ്റേണ്ടിയും വരും. ഖണ്ഡിക കാണിക്കുന്നതുവരെ ഈ നമ്പറുകളുമായി പ്ലേ ചെയ്യുക.
p {ടെക്സ്റ്റ്-ഇൻഡന്റ്: -2.5E; മാർജിൻ-ഇടത്: 3 മണിക്കൂർ; } p: ആദ്യലേഖനം {font-size: 3em; } പി: ഒന്നാംവരി {line-height: 100%; }യഥാർത്ഥ ഫാൻസി ഇനീഷ്യൻ ക്യാപ്സ് സ്വീകരിക്കുക
ഒരു ഫാൻസി പ്രാരംഭ തൊപ്പി സൃഷ്ടിക്കുന്നതിനുള്ള മികച്ച മാർഗ്ഗം കൂടുതൽ അലങ്കാരമായ ഫോണ്ട് കുടുംബത്തിലേക്ക് മാറ്റുന്നതിന് ഉപയോഗിക്കുക എന്നതാണ്. നിങ്ങൾ ഒരു ഫോണ്ടിന്റെ ഒരു പരമ്പര പിന്തുടർന്നു, ഒരു സാധാരണ ഫോണ്ട് തുടർന്ന് ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ പ്രാഥമിക ക്യാപ് നന്നായി കാണിക്കുന്നുവെന്ന് ഉറപ്പുതരുന്നതിനാൽ നിങ്ങളുടെ ഉപഭോക്താക്കൾക്ക് ഇത് ആക്സസ് ചെയ്യാവുന്നതും ഉപയോഗക്ഷമതാ പ്രശ്നങ്ങളും ഇല്ലാതെതന്നെ കാണാൻ കഴിയും.
p: ആദ്യലേഖനം {font-size: 3em; font-family: "എഡ്വാർഡിയൻ സ്ക്രിപ്റ്റ് ഐടിസി", "ബ്രഷ് സ്ക്രിപ്റ്റ് എം.ടി.", കുശവൻ; } പി: ഒന്നാംവരി {line-height: 100%; }പതിവുപോലെ നിങ്ങളുടെ എല്ലാ ഖണ്ഡികകളും നിങ്ങളുടെ ഖണ്ഡികയിലെ ആ രീതിയിൽ ഒരു ആമുഖ കുപ്പി സൃഷ്ടിക്കുന്നതിനായി നിങ്ങൾക്ക് എല്ലാ നിർദ്ദേശങ്ങളും ഒരുമിച്ച് നൽകാം.
ഒരു ഗ്രാഫിക്കൽ ഇനീഷ്യൽ ക്യാപ് ഉപയോഗിക്കുന്നു
അതിനുശേഷം, നിങ്ങളുടെ പ്രാരംഭ പരിപാടികൾ ആ പേജിൽ എങ്ങനെയാണ് കാണുന്നത് എന്നതിനെ നിങ്ങൾ ഇപ്പോഴും ഇഷ്ടപ്പെടുന്നില്ലെങ്കിൽ, നിങ്ങൾ തിരയുന്ന കൃത്യമായ പ്രതീതി ലഭിക്കാൻ ഗ്രാഫിക്കിലേക്ക് നിങ്ങൾക്ക് എത്തിച്ചേരാനാകും. ഗ്രാഫിക്കിലേക്ക് നേരെ നീങ്ങാൻ നിങ്ങൾ തീരുമാനിക്കുന്നതിനു മുമ്പ്, ഈ രീതിയിലെ പോരായ്മകൾ നിങ്ങൾ അറിഞ്ഞിരിക്കണം:
- ഇമേജുകൾ ഇല്ലാതെ ഉപഭോക്താക്കൾക്ക് പ്രാരംഭ പരിപ്പ് കാണാൻ കഴിയില്ല, കൂടാതെ ചിത്രം മാറ്റിസ്ഥാപിക്കുന്ന മറഞ്ഞിരിക്കുന്ന ടെക്സ്റ്റ് കാണാനിടയില്ല. ഇത് ഖണ്ഡിക നടത്താൻ കഴിയുകയില്ല, അല്ലെങ്കിൽ വായിക്കാൻ ഏറ്റവും പ്രയാസമുള്ളതായിരിക്കും.
- ചിത്രങ്ങൾ എല്ലായ്പ്പോഴും ഒരു പേജ് ഡൌൺലോഡ് സമയത്തിൽ ചേർക്കുന്നു. നിങ്ങൾക്ക് ധാരാളം പ്രാഥമിക സൗകര്യങ്ങൾ ഉണ്ടെങ്കിൽ, ഡൌൺലോഡ് ചെയ്യുന്ന സമയം ഗണ്യമായി വർദ്ധിപ്പിക്കാൻ നിങ്ങൾക്ക് ധാരാളം സമയം എടുക്കും.
- ചില ബ്രൗസറുകൾ മറച്ച ആദ്യ അക്ഷരവും ഇമേജും പ്രദർശിപ്പിക്കും - ഖണ്ഡികാ പാഠം ഒറ്റനോട്ടത്തിൽ കാണിക്കാൻ കഴിയും.
- ഈ ഓപ്ഷൻ ഓട്ടോമേറ്റ് ചെയ്യുന്നത് വളരെ ബുദ്ധിമുട്ടാണ്, കാരണം നിങ്ങൾ ശരിയായ ഗ്രാഫിക്കാണ് ഉപയോഗിക്കുന്നതെന്നത് കൃത്യമായി നിങ്ങൾക്കറിയേണ്ടതാണ്. അതിനാൽ, ഖണ്ഡിക എഡിറ്റുചെയ്ത ഓരോ തവണയും നിങ്ങൾ ഒരു പുതിയ ഗ്രാഫിക് സൃഷ്ടിക്കേണ്ടതുണ്ട്.
ആദ്യം, നിങ്ങൾ ആദ്യ കത്തിന്റെ ഗ്രാഫിക് സൃഷ്ടിക്കേണ്ടതുണ്ട്. ഫോണ്ട് "എഡ്വാർഡിയൻ സ്ക്രിപ്റ്റ് ഐടിസി" എന്ന അക്ഷരം ഉപയോഗിച്ച് ഫോട്ടോഷോപ്പ് ഞാൻ ഉപയോഗിച്ചു. ഞാൻ വലുപ്പത്തിൽ ചെയ്തു - 300 ഡിസ്പ്ലേ വലുപ്പത്തിൽ. ഞാൻ കത്തിന്റെ ചുറ്റിനു താഴെയായി ചിത്രം ഇറക്കി, ഇമേജ് വീതിയും ഉയരവും ശ്രദ്ധിച്ചു.
അപ്പോൾ ഞാൻ എന്റെ ഖണ്ഡികയ്ക്കായി ഒരു ക്ലാസ് "capL" സൃഷ്ടിച്ചു. ഇവിടെയാണ് ഞാൻ എന്ത് ചിത്രം ഉപയോഗിക്കണം എന്ന് നിർവചിക്കുന്നു, മുൻനിര (ലൈൻ-ഉയരം), തുടങ്ങിയവ.
ഖണ്ഡികയുടെ ടെക്സ്റ്റ് ഇൻഡന്ഡും പാഡിംഗ്-ടോപ്പും സജ്ജമാക്കാൻ നിങ്ങൾ ഇമേജിന്റെ വീതിയും ഉയരവും ഉപയോഗിക്കേണ്ടതുണ്ട്. എന്റെ എൽ ഇമേജിനായി എനിക്ക് 95px ഇൻഡെന്റ്, 72px പാഡിംഗ് ആവശ്യമാണ്.
p.capL {line-height: 1em; പശ്ചാത്തല-ഇമേജ്: url (capL.gif); പശ്ചാത്തലം-ആവർത്തിക്കുക: ആവർത്തിക്കില്ല; ടെക്സ്റ്റ്-ഇൻഡന്റ്: 95px; പാഡിംഗ്-ടോപ്പ്: 72px; }എന്നാൽ അതല്ല എല്ലാം. നിങ്ങൾ അവിടെ നിന്ന് പുറത്തുപോകുകയാണെങ്കിൽ, ആദ്യ അക്ഷരം ഗ്രാഫിക്കിലും ആദ്യം വാചകത്തിലും ഖണ്ഡികയിൽ പകർത്തപ്പെടും. അങ്ങനെ, ക്ലാസ് "പ്രാരംഭം" ഉള്ള ആദ്യ ഘടകം ഞാൻ ഒരു സ്പാൻ ചേർത്തു - ആ കത്ത് പ്രദർശിപ്പിക്കാൻ ബ്രൌസറിനോട് പറഞ്ഞു:
span.initial {display: none; }പിന്നെ ഗ്രാഫിക് ശരിയായി കാണിക്കുന്നു. അക്ഷരത്തെഴുതിയതിന് ശേഷം നിങ്ങൾക്ക് അക്ഷരത്തിലേക്ക് വാചക-ഇൻഡെന്റ് ഉപയോഗിച്ച് പ്ലേ ചെയ്യാവുന്നതാണ്, എന്നിരുന്നാലും നിങ്ങൾ അത് പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്നു.