HR ටැග් සහිත වෙබ් පිටු වල සිත් ඇදගන්නා සුළු රේඛා නිර්මාණය කිරීම
ඔබට ඔබේ වෙබ් අඩවි වලට තිරස්, වෙන්කිරීම් ආකාරයේ රේඛා එක් කිරීමට අවශ්ය නම්, ඔබට විකල්ප කිහිපයක් තිබේ. ඔබේ පේළියෙහි සත්ය රේඛා ගොනු එකතු කළ හැකි නමුත්, ඔබේ වෙබ් බ්රවුසරය වෙබ් අඩවියේ ක්රියාකාරිත්වයට ඍණාත්මක බලපෑමක් ඇති කළ හැකි ඒවාට නැවත ලබාගත හැකිවන අතර එමඟින් ඔබේ බ්රවුසරය අවශ්ය වනු ඇත.
CSS දේශසීමා දේපල භාවිතා කිරීම සඳහා ඔබේ සීමාවක් හෝ පේළියක ඇති පේළි වශයෙන් ක්රියා කරන සීමාවන් එකතු කිරීම සඳහා ඔබේ බෙදුම් රේඛාව සෑදීමට ඔබට හැකි විය.
අවසාන වශයෙන්, ඔබට තිරස් නීතිය සඳහා HTML මූල කොටස භාවිතා කළ හැකිය
තිරස් පාලක මූලද්රව්යය
ඔබ කිසියම් වෙබ් පිටුවකට කිසියම් අංගයක් තබා තිබේ නම්, මෙම රේඛා පෙන්වන පෙරනිමි ආකාරයේ පරිපූර්ණ ක්රමයක් නොවේ. මෙයින් අදහස් කරන්නේ ඔබට ඔබේ වෙබ් අඩවියේ පෙනුම අවශ්ය වන්නේ කෙසේද යන්න සමග මෙම අංගවල දෘශ්ය පෙනුම වෙනස් කිරීම සඳහා CSS වෙත හැරවීමට අවශ්ය බවය.
මූලික HR ටැගය බ්රව්සරයට අවශ්ය පරිදි ප්රදර්ශනය කිරීමට අවශ්ය වේ. නූතන බ්රවුසර් සාමාන්යයෙන් 100% පළලකින් යුක්ත වූ එච්එස් ටැග්ස්, 2px උසකින් සහ රේඛාව නිර්මාණය කිරීම සඳහා කළු පැහැති 3D සීමාවක් පෙන්නුම් කරයි.
මෙහි සම්මත HR මූලද්රව්යයක් පිළිබඳ උදාහරණයක් හෝ නූතන බ්රවුසර් හි නොසැලී ඇති HR නාලිකාවේ මෙම පින්තූරයෙහි දැකිය හැකිය.
පළල සහ උස බ්රවුසරයේ අනුකූල වේ
වෙබ් බ්රව්සර් හරහා ස්ථාවර වන එකම ශෛලයන් වන්නේ පළල සහ ශෛලීන්ය. මෙම රේඛාව කොපමණ විශාලද යන්න නිර්වචනය කරයි. ඔබ පළල සහ උස නිර්ණය නොකරන්නේ නම් පෙරනිමි පළල 100% වන අතර පෙරනිමි උස 2px වේ.
මෙම උදාහරණයේ දී පළල මාපිය මූලද්රව්යයේ 50% ක් වේ (සියල්ලට පහළින් පහත දැක්වෙන උදාහරණ ඇතුළත ආකෘති මාදිලි ඇතුළත් වේ) නිශ්පාදන සැකසුමේදී, මෙම මෝස්තර සියල්ල ඔබගේ පිටු සියල්ලේම කළමනාකරණය පහසු කිරීම සඳහා මෙම ශෛලයන් ඇත්තෙන්ම බාහිර ශෛලියක් ලියා ඇත.
style = "width: 50%;">
මෙම උදාහරණයෙහි උස උස 2em:
style = "height: 2em;">
දේශසීමා වෙනස් කිරීම අභියෝගයක් විය හැකිය
නූතන බ්රවුසර්වලදී, බ්රවුසරය සීමාව වෙනස් කිරීම මගින් රේඛාව ඉදි කරයි. එබැවින් ඔබ ශෛලමය දේපල සමඟ මායිම ඉවත් කළහොත්, පේළියේ පිටුවෙහි අතුරුදහන් වනු ඇත. ඔබට දැකිය හැකි පරිදි (එසේනම්, පේළිය නොපෙනෙන ලෙස ඔබට කිසිවක් පෙනෙන්නේ නැත) මෙම නිදසුන තුළ:
style = "border: none;">
දේශසීමා ප්රමාණය, වර්ණය සහ ශෛලිය සකස් කරමින් රේඛාව වෙනස් වන අතර සියලු නූතන බ්රව්සර්වල එකම ප්රතිඵලය ඇත. නිදසුනක් ලෙස, මෙම පෙලපාලියේ දී මායිම රතු, සිදුරු සහ 1px පළල:
style = "border: 1px ඉරිඟු # 000;">
නමුත් ඔබ දේශ සීමාව සහ උස වෙනස් කළහොත්, නවීන බ්රව්සර් වලදී වඩා බොහෝ යල්පිනූ බ්රව්සර වල පෙනුම වෙනස් වේ. ඔබට මෙම උදාහරණයේ දැකිය හැකි පරිදි, ඔබ IE7 සහ ඊට පහළින් එය දැක තිබේ නම් (සමතුලිතව කල් ඉකුත්ව ඇති බ්රවුසරය සහ Microsoft විසින් තවදුරටත් සහාය නොදක්වයි) අනෙක් වෙබ් බ්රව්සර්වල (IE8 සහ ඉහළ) ඇතුලත්ව නොපවතී, :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
මෙම පුරාවෘත බ්රවුසර්ස් අද දවසේ වෙබ් නිර්මාණකරණයේදී සැලකිලිමත් වන්නේ නැත. ඒවා බොහෝ විට නවීන විකල්පයන් සමඟ ප්රතිස්ථාපනය කර ඇත.
පසුබිම් රූපයක් සහිත සැරසිලි රේඛාවක් සාදන්න
වර්ණයක් වෙනුවට, ඔබේ මානව සම්පත් සඳහා පසුබිම් රූපයක් තීරණය කළ හැකිය, එය ඔබට අවශ්ය පරිදි හරියටම පෙනෙන පරිදි, නමුත් තවමත් ඔබගේ සංකේතාකන තුළ සැසඳිය හැක.
මෙම උදාහරණයේ දී අපි රූප රාමු තුනකින් යුත් රූපයක් භාවිතා කළා. පුනරාවර්තී නොලබන පසුබිම් රූපයක් ලෙස මෙය සැකසීමෙන් එය පොත් තුළ පෙනෙන ආකාරයට පෙනෙන අන්තර්ගතයේ බිඳීමක් නිර්මාණය කරයි:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
මානව සම්පත් මූලිකාංශය
CSS3 සමග, ඔබට ඔබේ රේඛා වඩාත් සිත්ගන්නා සුළු විය හැකිය. මානව සම්පත් මූලද්රව්යය සාම්ප්රදායික ලෙස තිරස් රේඛාවකි. නමුත් CSS මගින් දේපළ පරිවර්තනය කිරීම නිසා, ඔවුන් පෙනුමෙන් වෙනස් කළ හැකිය. HR මූල ද්රව්යයේ ප්රියතම පරිවර්තනයක් යනු භ්රමණය වෙනස් කිරීමයි.
ඔබේ HR මූලමූල්යය වෙනස් කිරීම සඳහා එය තරමක් දුරේක්ෂයක් විය හැක:
hr {
-moz-පරිවර්තනය: මාරු කිරීම (10deg);
-webkit-පරිවර්තනය: මාරු කිරීම (10deg);
-o-පරිවර්තනය: rotate (10deg);
-ms-පරිවර්තනය: rotate (10deg);
පරිවර්තන: මාරු කිරීම (10deg);
}}
නැතහොත් එය සම්පූර්ණයෙන්ම සිරස් අතට ගෙන එය ඔබට මාරු කළ හැකිය:
hr {
-moz-පරිවර්තනය: මාරු කිරීම (90deg);
-webkit-පරිවර්තනය: භ්රමණය (90deg);
-o-පරිවර්තනය: rotate (90deg);
-ms-පරිවර්තනය: rotate (90deg);
පරිවර්තනය: භ්රමණය (90deg);
}}
මෙම ලේඛනයේ එහි වර්තමාන පිහිටීම මත පදනම්ව HR විසින් මෙය මාරු වන බව මතක තබාගන්න. එබැවින් ඔබට අවශ්ය තැන එය ලබා ගැනීමට ස්ථානගත කිරීම අවශ්ය විය හැකිය. නිර්මාණ භාවිතා කිරීමට සිරස් රේඛා එකතු කිරීම සඳහා මෙය නිර්දේශ කිරීම නොවේ. නමුත් මෙය සිත්ගන්නා බලපෑමක් ඇති කර ගත හැකි ක්රමයකි.
ඔබගේ පිටු මත පේළි ලබා ගැනීමට තවත් ක්රමයක්
මානව සම්පත භාවිතා කිරීම වෙනුවට සමහර අය කරන එක් දෙයක් වන්නේ අනෙක් මූලයන් මත රඳා සිටීමයි. නමුත් සමහර විට මානව සම්පත් යනු දේශසීමා පිහිටුවීමට උත්සාහ කිරීමට වඩා පහසු සහ පහසු ය. ඇතැම් බ්රවුසරවල කොටු ආකෘති ගැටළු පවා සීමාවකට සැකසීමට හැකිය.