CSS පාඩම් අංක 05
10. Outline
සාමාන්යයෙන් Outline කියලා කියන්නේ පිටින් අදින Line එකට. පිටින් අදින Line එකක් තියෙන්න නම් අනිවාර්යෙන්ම ඇතුළතිනුත් Line එකක් තියෙන්න ඕන. මේ වගේ ඒවා Bordersවලට තමයි පාවිච්චි වෙන්නේ. එතකොට මෙතන Outline කියන්නේ, Border එකේ Line එකටත් පිටින් අදින එක.
අපි හිතමු 3px අගයකින් යුක්ත, Solid Style එකක් තියෙන, රතු පාට Border එකක් වටේට Outline එකක් දාගන්න ඕන කියලා. එහෙනං මෙහෙම ලියන්න පුලුවන්.
<div id = "text"> I Love Sri Lanka </div> - HTML
#text { border: 3px solid red;
outline: 2px solid green; - CSS
outline-offset: 10px;
}
අපි හිතමු 3px අගයකින් යුක්ත, Solid Style එකක් තියෙන, රතු පාට Border එකක් වටේට Outline එකක් දාගන්න ඕන කියලා. එහෙනං මෙහෙම ලියන්න පුලුවන්.
<div id = "text"> I Love Sri Lanka </div> - HTML
#text { border: 3px solid red;
outline: 2px solid green; - CSS
outline-offset: 10px;
}
CSS Code එකේ කොළ පාටින් ලියලා තියෙන එක තමයි Outline එකේ Code එක. ඒක ගැන තමයි ඔයාලට අලුතෙන්ම ඉගෙන ගන්න තියෙන්නේ. නිකං Border එකක් දාගන්න හැටි ගැන, අපි මුලින්ම කතා කළා. {Outline} කියන Property එකෙන් විස්තර කරලා තියෙන්නේ Outline එකේ ඝනකම, Style එක සහ පාට. {outline-offset} කියන්නේ Border එක සහ Outline එක අතර තිබිය යුතු පරතරය.
Border එකට වගේම Outlineවලත් Styles තියෙනවා. හැබැයි Border එකට දාන්න පුලුවන් Styles වර්ග ටිකම තමයි එකටත් අඩංගු වෙන්නේ. අපි Border එකට Styles දැම්මේ {border-style} Property එකෙන්. අපි Outline එකට Styles දාන්නේ {outline-style} Property එකෙන්.
උදා :-
{outline-style : dashed}
{outline-style : double}
{outline-style : ridge}
{outline-width} කියන එකෙන් අපිට පුලුවන් Outline එකට Width එකක් දෙන්න.
11. Columns
Columns කියන්නේ උස අතට තියෙන තීරුවලට. මේ Column කියන Property එක සෘජුවම සම්බන්ධ වෙන්නේ, අපි කලින් ලිපියේ සාකච්ඡා කරපු Texts එක්ක. මේකෙත් වැදගත්ම Property එක වෙන්නේ {column-count} Property එක. ඒකෙන් හදන්නේ අපේ Text එක බෙදාගන්න තීරු ගණන. අපි හිතමු අපේ Text එක තීරු 5කට බෙදාගන්න ඕන කියලා. එහෙනං {column-count:5} කියලා දෙන්න පුලුවන්.
{column-width} කියන Property එකෙන් පුලුවන් අපේ Columnsවල Width එක Define කරන්න. Columns අතර තියෙන Gap එක, එහෙමත් නැත්නම් පරතරය හදන්න ඕන නම්, {column-gap} කියන එක දීලා, උචිත අගයක් දෙන්න පුලුවන්. Gap එක වැඩි වෙන්න, වැඩි වෙන්න, Text එකේ උස වැඩි වෙනවා. පළල අඩු වෙනවා. බලන්නකො මේ පින්තූරය.
Column Rule කියලත් Property එකක් තියෙනවා. මේකෙන් වෙන්නේ හැම Column එකක්ම Rule එකකින් බෙදන එක. මේ Property එක කෙටියෙන් ලියනවා නම් මෙහෙම ලියන්න පුලුවන්.
{column-rule: 4px solid blue;}
4px කියන්නේ දීලා තියෙන ඝනත්වය. Solid කියන්නේ දීලා තියෙන Style එක. Blue කියන්නේ දීලා තියෙන පාට. Border එකේ Styles ටිකම තමයි Column Rule එකටත් අයිති වෙන්නේ.