HR ടാഗുകൾ ഉള്ള വെബ് പേജുകളിൽ രസകരമായ തിരയലുകൾ ഉണ്ടാക്കുക
നിങ്ങളുടെ വെബ്സൈറ്റുകളിലേക്ക് തിരശ്ചീന, വിഭാജി-രീതിയിലുള്ള വരികൾ ചേർക്കാൻ നിങ്ങൾക്ക് ആവശ്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് കുറച്ച് ഓപ്ഷനുകൾ ഉണ്ട്. ആ വരികളുടെ യഥാർത്ഥ ഇമേജ് ഫയലുകളെ നിങ്ങളുടെ പേജിലേക്ക് ചേർക്കാൻ കഴിയും, പക്ഷേ അത് നിങ്ങളുടെ ബ്രൌസർ വീണ്ടെടുക്കാനും ലോഡ് ചെയ്യാനും ആവശ്യപ്പെടുന്നു. ഇത് സൈറ്റിന്റെ പ്രകടനത്തിൽ പ്രതികൂല സ്വാധീനം ഉണ്ടാക്കും.
സിഎസ്എസ് ബോർഡർ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ബോർഡറുകളെ മുകളിലുള്ള അല്ലെങ്കിൽ മുകളിൽ ഒരു ഘടകം പോലെ പ്രവർത്തിക്കുക, നിങ്ങളുടെ വേർപിരിയൽ വരി ഫലപ്രദമായി സൃഷ്ടിക്കുക.
അന്തിമമായി, തിരശ്ചീന റൂളിനുള്ള HTML ഘടകം നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ കഴിയും
തിരശ്ചീന റൂൾ എലമെന്റ്
നിങ്ങൾ എപ്പോഴെങ്കിലും ഒരു വെബ് പേജിൽ ഒരു ഘടകം നൽകിയിട്ടുണ്ടെങ്കിൽ, ഈ വരികൾ പ്രദർശിപ്പിച്ച സ്ഥിരസ്ഥിതി മാർഗ്ഗം മികച്ചതല്ലെന്ന് നിങ്ങൾക്ക് മനസ്സിലായി. നിങ്ങളുടെ സൈറ്റ് എങ്ങനെ കാണണമെന്ന് നിങ്ങൾക്കറിയാമെന്ന് ഈ ഘടകങ്ങളുടെ ദൃശ്യപരത ക്രമീകരിക്കാൻ നിങ്ങൾ CSS- ലേക്ക് തിരിഞ്ഞിരിക്കണം എന്നാണ് ഇതിനർത്ഥം.
ഒരു അടിസ്ഥാന HR ടാഗും ബ്രൗസർ പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന രീതിയും പ്രദർശിപ്പിച്ചിരിക്കുന്നു. ആധുനിക ബ്രൌസറുകൾ സാധാരണയായി 100% വീതിയും, 2px ഉയരം, കൂടാതെ ലൈൻ സൃഷ്ടിക്കാൻ കറുത്ത നിറമുള്ള ഒരു 3D ബോർഡും ഉപയോഗിച്ച് അക്ഷരയില്ലാത്ത എച്ച്.ആർ ടാഗുകൾ പ്രദർശിപ്പിക്കും.
ഒരു സാധാരണ എച്ച്.ആർ. മൂലകത്തിന്റെ ഒരു ഉദാഹരണം ഇവിടെയുണ്ട് അല്ലെങ്കിൽ ആധുനിക ബ്രൌസറിൽ ഒരു അരക്ഷിതമായ HR എങ്ങനെ കാണപ്പെടുന്നുവെന്നത് ഈ ചിത്രത്തിൽ നിങ്ങൾക്ക് കാണാൻ കഴിയും.
വീതിയും ഉയരവും ബ്രൌസറുകൾക്ക് അനുസൃതമാണ്
വെബ് ബ്രൌസറുകളിൽ സ്ഥിരതയാർന്ന ഒരേ ശൈലികൾ വീതിയും ശൈലികളും ആണ്. ഈ വരി എത്ര വലുതാണെന്ന് നിർവചിക്കാം. വീതിയും ഉയരവും നിങ്ങൾ നിർവചിക്കുന്നില്ലെങ്കിൽ സ്ഥിരസ്ഥിതി വീതി 100% ഉം സ്ഥിരസ്ഥിതി ഉയരം 2px ഉം ആണ്.
ഈ ഉദാഹരണത്തിൽ വീതിയും പാരന്റ് ഘടകത്തിൻറെ 50% ഉം (ഇൻലൈൻ ശൈലികൾ ഉൾക്കൊള്ളുന്ന എല്ലാ ഉദാഹരണങ്ങളും ശ്രദ്ധിക്കുക.ഒരു പ്രൊഡക്ഷൻ സജ്ജീകരണത്തിൽ, ഈ ശൈലികൾ യഥാർഥത്തിൽ ഒരു ബാഹ്യ ശൈലി ഷീറ്റിൽ നിങ്ങളുടെ മാനേജ്മെന്റിനായി എളുപ്പത്തിൽ കൈകാര്യം ചെയ്യാവുന്നതാണ്):
ശൈലി = "വീതി: 50%;">
ഈ ഉദാഹരണത്തിൽ ഉയരം 2 മാത്രമാണ്.
ശൈലി = "ഉയരം: 2";>
അതിരുകൾ മാറ്റുന്നത് വെല്ലുവിളിക്കാൻ കഴിയും
ആധുനിക ബ്രൌസറുകളിൽ ബ്രൌസർ ക്രമീകരിച്ചുകൊണ്ട് ലൈൻ നിർമ്മിക്കുന്നു. നിങ്ങൾ സ്റ്റൈൽ പ്രോപ്പർട്ടിയിൽ നിന്നും ബോർഡർ നീക്കം ചെയ്താൽ, ഈ വരിയിൽ അപ്രത്യക്ഷമാകും. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ (നന്നായി, ലൈനുകൾ അദൃശ്യമാകും പോലെ നിങ്ങൾക്ക് ഒന്നും കാണാൻ കഴിയില്ല) ഈ ഉദാഹരണത്തിൽ:
ശൈലി = "ബോർഡർ: ഒന്നുമില്ല;">
ബോർഡർ വലുപ്പവും വർണവും സ്റ്റൈലും ക്രമീകരിക്കുന്നതിലൂടെ ലൈൻ വ്യത്യസ്തമാക്കുകയും എല്ലാ ആധുനിക ബ്രൌസറുകളിലും ഒരേ പ്രതീതി കാണിക്കുകയും ചെയ്യും. ഉദാഹരണത്തിന്, ഈ പരിപാടിയിൽ ചുവപ്പ് ചുവപ്പ്, പൊതിഞ്ഞ്, 1px വീതി കൂടിയാണ്:
ശൈലി = "ബോർഡർ: 1px ഡാഷ് ചെയ്തു # 000;">
നിങ്ങൾ അതിരുകളും ഉയരവും മാറ്റുകയാണെങ്കിൽ, ആധുനിക ബ്രൌസറുകളിൽ ചെയ്യുന്നതിനേക്കാളും കാലഹരണപ്പെട്ട ബ്രൗസറുകളിൽ ശൈലികൾ വ്യത്യസ്തമായിരിക്കും. നിങ്ങൾക്ക് ഈ ഉദാഹരണത്തിൽ കാണാൻ കഴിയുന്നതുപോലെ, നിങ്ങൾ IE7 ലും താഴെയും (ഒരു ബ്രൗസർ തകർച്ചയോടെ കാലഹരണപ്പെട്ടതും ഇനി മൈക്രോസോഫ്റ്റ് പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ) മറ്റു ബ്രൌസറുകളിൽ (IE8, മുകളിലുള്ളവ ഉൾപ്പെടെ) കാണിക്കാതിരിക്കുന്ന ഒരു ആവരണം ഉണ്ട്. :
സ്റ്റൈൽ = "ഉയരം: 1.5em; width: 25em; border: 1px solid # 000;">
ആ പഴയ ബ്രൗസറുകൾ ഇന്നത്തെ വെബ് ഡിസൈനിൽ ഇന്ന് വളരെ ആശങ്കപ്പെടാനില്ല. കാരണം, ആധുനികമായ ഓപ്ഷനുകൾ ഉപയോഗിച്ച് അവയെ മാറ്റിസ്ഥാപിക്കപ്പെട്ടു.
ഒരു പശ്ചാത്തല ഇമേജ് ഉപയോഗിച്ച് ഒരു അലങ്കാര ലൈൻ ഉണ്ടാക്കുക
ഒരു നിറത്തിന് പകരം നിങ്ങൾക്ക് നിങ്ങളുടെ HR യുടെ പശ്ചാത്തല ഇമേജ് നിർവചിക്കാനാകും, അങ്ങനെ നിങ്ങൾ ആഗ്രഹിക്കുന്നതുപോലെ അത് കൃത്യമായി കാണുന്നു, പക്ഷേ ഇപ്പോഴും നിങ്ങളുടെ മാർക്കപ്പിൽ സെമാന്റിക് ദൃശ്യമാക്കുന്നു.
ഈ ഉദാഹരണത്തിൽ മൂന്ന് തരംഗങ്ങളുള്ള ഒരു ഇമേജ് ഞങ്ങൾ ഉപയോഗിച്ചു. ആവർത്തനമില്ലാത്ത പശ്ചാത്തല ഇമേജ് ആയി ഇത് ക്രമീകരിക്കുന്നതിലൂടെ, നിങ്ങൾ പുസ്തകങ്ങളിൽ കാണപ്പെടുന്നതുപോലെ കാണപ്പെടുന്ന ഉള്ളടക്കത്തിൽ ഒരു ഇടവേള സൃഷ്ടിക്കുന്നു:
ശൈലി = "ഉയരം: 20px; പശ്ചാത്തലം: # ff url (aa010307.gif) നോ-ആവർത്തിപ്പ് സ്ക്രോൾ സെന്റർ; border: none;">
എച്ച് ആർ ഘടകങ്ങൾ പരിവർത്തനം ചെയ്യുന്നു
CSS3 ഉപയോഗിച്ച്, നിങ്ങളുടെ വരികൾ കൂടുതൽ രസകരമാക്കും. എച്ച്.ആർ ഘടകം പരമ്പരാഗതമായി ഒരു തിരശ്ചീന രേഖയാണ്, എന്നാൽ CSS പരിവർത്തന സ്വഭാവമുള്ളവ, നിങ്ങൾക്ക് അവ എങ്ങനെ കാണാമെന്നത് മാറ്റാൻ കഴിയും. എച്ച്.ആർ ഘടകം ഒരു പ്രിയപ്പെട്ട പരിവർത്തനം ഭ്രമണം മാറ്റാനാണ്.
നിങ്ങളുടെ എച്ച്.ആർ ഘടകം നിങ്ങൾക്ക് റൊട്ടേറ്റ് ചെയ്യാൻ കഴിയും, അത് വെറും ചെറുതായി വികർണ്ണമാണ്:
hr {
-മോസ്-ട്രാൻസ്ഫർ: റൊട്ടേറ്റ് (10deg);
-വൈബ്കിറ്റ്-പരിവർത്തനം: റൊട്ടേറ്റ് (10deg);
-ഒ-പരിവർത്തനം: തിരിക്കുക (10deg);
-MS പരിവർത്തനം: തിരിക്കുക (10deg);
പരിവർത്തനം ചെയ്യുക: തിരിക്കുക (10deg);
}
അല്ലെങ്കിൽ അത് പൂർണമായും വെർച്വൽ ആയതിനാൽ നിങ്ങൾക്ക് അത് തിരിക്കാൻ കഴിയും:
hr {
-മോസ്-പരിവർത്തനം: റൊട്ടേറ്റ് (90deg);
-വെബ്ബിറ്റ്-ട്രാൻസ്ഫർ: റൊട്ടേറ്റ് (90 ഡിഗ്);
-ഒ-പരിവർത്തനം: റൊട്ടേറ്റ് (90 ഡിഗ്);
-ms പരിവർത്തനം: കറക്കുക (90 ഡിഗ്);
പരിവർത്തനം ചെയ്യുക: തിരിക്കുക (90 ഡിഗ്);
}
ഇത് രേഖയിൽ നിലവിലെ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി എച്ച് ആർറ്റിയെ തിരിയുന്ന കാര്യം ഓർക്കുക, അതിനാവശ്യമായ സ്ഥാനം ലഭിക്കുന്നതിന് അത് ക്രമീകരിക്കേണ്ടി വരും. ഒരു ഡിസൈനിലേക്ക് ലംബ വരികൾ ചേർക്കാൻ ഇത് ഉപയോഗിക്കാൻ കഴിയില്ല, പക്ഷെ രസകരമായ ഒരു പ്രഭാവം നേടാനുള്ള ഒരു മാർഗമാണിത്.
നിങ്ങളുടെ പേജുകളിലെ ലൈനുകൾ നേടുക മറ്റൊരു വഴി
എച്ച്ആർ എലമെൻറ് ഉപയോഗിക്കുന്നതിനുപകരം ചില ആളുകൾ ചെയ്യുന്നത് മറ്റ് മൂലകങ്ങളുടെ അതിരുകൾ അനുസരിച്ചാണ്. എന്നാൽ ചില സമയങ്ങളിൽ എച്ച്.ആർ.പോസ്റ്റുകൾ സജ്ജമാക്കാൻ ശ്രമിക്കുന്നതിനേക്കാൾ കൂടുതൽ സൗകര്യപ്രദവും എളുപ്പവുമാണ്. ചില ബ്രൗസറുകളുടെ ബോക്സ് മോഡൽ പ്രശ്നങ്ങൾക്ക് അതിർവരമ്പുകൾ തന്ത്രപരമായി സജ്ജമാക്കാനാകും.