CSS පාඩම් අංක 07
13. Margin
Padding සහ Margin කියන Properties දෙක නැත්නම් වෙබ් එකක් හදනවා බොරු. මේ Properties දෙක අනුව තමයි වෙබ් එකේ සියලුම දේවල් සංවිධානය වෙන්නේ. අපි බලමු මොකක්ද Margin එකක් කියන්නේ කියලා. Margin එකක් කියලා කියන්නේ Div එකක් වේවා, Button එකක් වේවා, Image එකක් වේවා..... ඕනෑම Element එකක පිටතට. මේ Property එක උපයෝගී කරගෙන අපිට පුලුවන් Element එක, වෙබ් එකේ ඕනෑම තැනකට දාන්න. Values විදිහට ගොඩාක් අය දෙන්නේ Px සහ % තමයි. උදාහරණයක් විදිහට බලන්න පහළ Screenshot එකේ තියෙන පින්තූරය දිහා.
Margin කියන Property එක යටතේ Properties 4ක් තියෙනවා.
* Margin Top
* Margin Bottom
* Margin Left
* Margin Right
Margin Top කියන්නේ Element එක තියෙන තැන ඉදලා කොච්චර ප්රමාණයක් පහළට ඈත් කරන්න ඕනිද කියලා. උදාහරණයක් විදිහට { margin-top : 20px } කියලා දැම්මොත්, තියෙන තැන ඉදලා 20px ප්රමාණයක් Element එක පහළට යනවා. එහෙමත් නැත්නම් Element එක උඩින් 20px ප්රමාණයක ඉඩක් (Margin එකක්) හිටිනවා.
Margin Bottom කියන්නේ Element එක තියෙන තැන ඉදලා කොච්චර ප්රමාණයක් ඉහළට ඈත් කරන්න ඕනිද කියලා. උදාහරණයක් විදිහට { margin-bottom : 20px } කියලා දැම්මොත්, තියෙන තැන ඉදලා 20px ප්රමාණයක් Element එක ඉහළට යනවා. එහෙමත් නැත්නම් Element එක යටින් 20px ප්රමාණයක ඉඩක් (Margin එකක්) හිටිනවා.
Margin Left කියන්නේ Element එක තියෙන තැන ඉදලා කොච්චර ප්රමාණයක් දකුණට ඈත් කරන්න ඕනිද කියලා. උදාහරණයක් විදිහට { margin-left : 20px } කියලා දැම්මොත්, තියෙන තැන ඉදලා 20px ප්රමාණයක් Element එක දකුණට යනවා. එහෙමත් නැත්නම් Element එකට වමෙන් 20px ප්රමාණයක ඉඩක් (Margin එකක්) හිටිනවා.
Margin Right කියන්නේ Element එක තියෙන තැන ඉදලා කොච්චර ප්රමාණයක් වමට ඈත් කරන්න ඕනිද කියලා. උදාහරණයක් විදිහට { margin-right : 20px } කියලා දැම්මොත්, තියෙන තැන ඉදලා 20px ප්රමාණයක් Element එක වමට යනවා. එහෙමත් නැත්නම් Element එකට දකුණෙන් 20px ප්රමාණයක ඉඩක් (Margin එකක්) හිටිනවා.
තනි Code එකකින් ලියනවා නම් මෙහෙම ලියන්න පුලුවන්.
margin { 20px 45px ; }
මුලින්ම අගය දීලා තියෙන්නේ Element එකේ y දිශාවට (Top or Bottom). ඊට පස්සේ x දිශාවට (Left or Right).
14. Padding
මුලින්ම පහළ Screenshot එකේ තියෙන පින්තූරය බලලා ඉන්නකෝ.
Padding කියන Property එක යටතේත් Properties 4ක් තියෙනවා.
* Padding Top { padding - top : 20px ; }
* Padding Bottom { padding - bottom : 20px ; }
* Padding Left { padding- left : 20px ; }
* Padding Right { padding- right : 20px ; }
දැන් ප්රශ්නයක් එන්න පුලුවන් Margin සහ Padding අතර කිසිම වෙනස්කමක් නෑ නේද කියලා. Padding වලින් වෙන්නෙත් Margin වලින් වෙන කාර්යයම නේද කියලා. ඔව්. එක්තරා ආකාරයකට ඒක හරි. මොකක් දුන්නත් වෙන්නේ එකම දේ. හැබැයි යොදා ගන්න අවස්ථාව වෙනස්.
වෙබ් එකක් හදනකොට මුලින්ම අපි වෙබ් පිටුව කොටස් වලට බෙදා ගන්නවා. එහෙම කොටස්වලට බෙදා ගත්තුවා සමහරක් විට තවත් අනු කොටස්වලට බෙදෙනවා. Padding කියන එක පාවිච්චි වෙන්නේ අන්න ඒ වගේ අවස්ථා වලදී.
අපි හිතමු Box එකක් තියෙනවා කියලා. මේ Box එක ඇතුළේ Images 3ක් තියෙනවා පේළියට. අපි හිතමු අපිට Box එක පොඩ්ඩක් එහාට කරන්න ඕන කියලා. එහෙනං අපි Margin Property එක පාවිච්චි කරනවා. අපි හිතමු අපිට Image එකක් එහාට කරන්න ඕන කියලා. එහෙනන් අපි පාවිච්චි කරන්නේ Padding Property එක. Margin Property එක පාවිච්චි කළොත් Box එක ඇතුළේ තියෙන Images 3ත් එහාට යනවා. Padding Property එක පාවිච්චි කළොත්, ඒකෙ බලපෑම Box එකට එල්ල වෙන්නේ නෑ. Images 3 එහාට යන්න පුලුවන්. හැබැයි Box එක තියෙන තැනමයි.
මේ උදාහරණය බලන්න. නිල් පාටට තියෙන්නේ Element එකක්. ඒක තියෙන්නේ තැඹිලි පාටට තියෙන Box එකක් (Border) ඇතුළේ. ඒ නිසා Element එකේ Position එක හදන්න Padding පාවිච්චි කරලා තියෙනවා. තැඹිලි පාට Box එකේ Position එක හදන්න Margin දීලා තියෙනවා. කොළ පාටින් පෙන්නන්නේ Padding Area එක. රෝස පාටින් පෙන්නන්නේ Margin Area එක. ඇතුළේ නම් Padding! පිට නම් Margin!
|
padding { 20px 45px ; } වගේ ලියන්න පුලුවන්, තනි Code එකකින් ලියනවා නම්. ඊළග පාඩමේදී Margin, Padding ගැන පුළුල්ව සාකච්ඡා කෙරෙනවා. එතකොට ඔයාලට ඒ ගැන පැහැදිලි අවබෝධයක් ලැබෙයි.
වෙබ් පිටුව කොටස්වලට බෙදනකොට ප්රධාන කොටස අපි හදුන්වනවා Parent කියලා. ප්රධාන කොටස යටතේ ඉන්න අනු කොටස් හදුන්වනවා Child කියලා. ගෙදර දෙමාපියන්ට බලපෑමක් වුණොත් ඒක දරුවන්ටත් බලපානවා. අපි හිතමු අම්මයි තාත්තයි දෙන්නම අසනීප වෙනවා. එතකොට ගෙදර වැඩ ඔක්කොම අතරමග නතර වෙනවා. ඒක අනිවාර්යෙන්ම දරුවන්ට බලපානවා. ඒ වගේ Parent Element එකට බලපෑමක් වුණොත් අනිවාර්යෙන්ම Child Elements වලටත් බලපානවා.
දරුවා ලෙඩ වුණොත් දෙමාපියන්ට බලපෑමක් වෙන්නේ නෑ. ගෙදර අනිත් වැඩ කටයුතුත් සමබරව කරන ගමන් දරුවාවත් රැක බලාගෙන, ලෙඩේ හොද කරනවා. ඒ වගේම මෙතනත් Child Element එකකට බලපෑමක් වුණාට, ඒක Parent Element එකට බලපාන්නේ නෑ.
ප්රායෝගිකව හිතලා බලමු. පෙට්ටියක් තියෙනවා. මේක ඇතුළේ බෝතලයක් තියෙනවා. අපි පෙට්ටිය තල්ලු කරනවා කියන්නේ, පෙට්ටිය විතරක් නෙවේ, බෝතලයත් තල්ලු වෙනවා. ඒ දෙකේම පිහිටීම වෙනස් වෙනවා. පෙට්ටිය ඇතුළෙ තියෙන බෝතලය විතරක් තල්ලු කළොත්, වෙනස් වෙන්නේ බෝතලයේ පිහිටීම විතරයි. පෙට්ටිය තිබ්බ තැනමයි. කලින් කිව්වා වගේ දෙකටම Margin හෝ Padding දුන්නත් වෙන්නේ එකම දේ. ඒ වුණාට Parent Element එකට Margin දීලා, Child Element එකට Padding දෙන එක තමයි සම්ප්රදාය. ඒකෙන් අපිටම ලේසියෙන් අදුරගන්න පුලුවන් මේ තියෙන්නේ Parent Element එකක්ද, එහෙමත් නැත්නම් Child Element එකක්ද කියලා.
15. Transform
මේ වචනය ඇහෙනකොට හිතෙන්න ඕනි, මේකෙන් කියන්නේ මොකක් හරි දේක ප්රමාණය හෝ හැඩය වෙනස් කරනවා වගේ දෙයක් කියලා. මේ Property එක යටතේ Properties සහ Values දෙනෝ දාහක් තියෙනවා. අපි බලමු {transform-origin} කියන Property එක කොහොමද පාවිච්චියට ගන්නේ කියලා. පහළ තියෙන Screenshot එක බලන්න. මේ තියෙන්නේ ඒකේ CSS එක.
#image {
transform : rotate (30deg) ;
transform-origin : 20% 40% ;
}
එහෙනං මෙතනින් කියවෙන්නේ මොකක්ද? පළවෙනි Line එකෙන් කියවෙන්නේ මේ Element එක අංශක 30ක ප්රමාණයකට ඇල කරලා තියෙනවා කියලා. දෙවෙනි Line එකේ x සහ y Positionsවලට අගයන් දීලා තියෙනවා දකින්න පුලුවන්.
#image {
transform : rotate (30deg) ;
transform-origin : 20% 40% ;
}
එහෙනං මෙතනින් කියවෙන්නේ මොකක්ද? පළවෙනි Line එකෙන් කියවෙන්නේ මේ Element එක අංශක 30ක ප්රමාණයකට ඇල කරලා තියෙනවා කියලා. දෙවෙනි Line එකේ x සහ y Positionsවලට අගයන් දීලා තියෙනවා දකින්න පුලුවන්.
{ transform : rotateX(70deg) } කියලා ලිව්වොත් මොනවා වෙයිද? එහෙම ලිව්වොත් Element එක අංශක 70කින් ඇලවෙනවා. හැබැයි ඒ හරස් අතට. { transform : rotatey(70deg) } කියලා දැම්මොත් පින්තූරය අංශක 70කින් උස අතට ඇලවෙනවා. අපි මුලින්ම ලිව්වා වගේ නිකං Rotate කියලා Values දැම්මොත්, Element එක Rotate වෙන්නේ Z අතට. ඒ කියන්නේ හරස් අතට (දක්ෂිණාවර්තව).
{transform:translateY(25px)} කියලා දුන්නොත් Element එක, Element එක පිහිටලා තියෙන ස්ථානයේ ඉදලා 25px ප්රමාණයක් දුරස් වෙනවා. {transform:translateY(-25px)} කියලා දුන්නොත් Element එක, Element එක පිහිටලා තියෙන ස්ථානයේ ඉදලා -25px ප්රමාණයක් දුරස් වෙනවා). කොටින්ම කිව්වොත් උඩට හෝ පහළට යවනවා. x අක්ෂය දිගේ හරහට යවන්න ඕන නම් {transform:translateX(25px)} කියලා දෙන්න පුලුවන්. එහෙමත් නැත්නම් x සහ y අගයන් එකට දෙන්නත් පුලුවන්. එහෙම දෙනවා නම් මුලින්ම ලියන්න ඕන x අගය. {translate(20px,20px)}
{ transform:scaleX(1.5) } කියලා දුන්නොත් 1.5ක අගයකින් Element එකේ ප්රමාණය හරස් අතට වෙනස් වෙනවා. { transform:scaleY(3) } කියලා දුන්නොත් Element එකේ ප්රමාණය 3ක අගයකින් උස අතට වෙනස් වෙනවා. x සහ y දෙකම දාලා ලියනවා නම් { transform:scale(1.5,3) } කියලා ලියන්න පුලුවන්.
පින්තූරයේ දිග අතට ඇදීමක් කරන්න ඕන නම් { transform : skewX } කියන එකත්, පින්තූරයේ උස අතට ඇදීමක් කරන්න ඕන නම් { transform : skewY } කියන එකත්, උස සහ දිග අතට ඇදීමක් කරන්න ඕන නම් x සහ y අගයන් දෙකම දාලත් ලියන්න පුලුවන්.
{transform:matrix} කියන එකෙන් පුලුවන් Element එකේ x සහ y අක්ෂයන්වල පිහිටීමත්, Element එකේදී x සහ y අක්ෂයන්වල අගයන් දෙකත් ලබා දෙන්න. එතනදි වෙන්නේ Code එක, එක පෙළකට ලියාගෙන යෑමක්.
16. List Icons
මතකද HTMLවල පාවිච්චි කරපු <li> Tag එක? එක දැම්මම Dot Icon එකක් පෙන්නුවා. <ol> එකක් අස්සේ දාපු එකකින් නොම්බරයක් පෙන්නුවා. ඒත් CSS වලින් අපිව මේ දෙකට විතරක් සීමා කරලා නෑ. තව තව අලුත් ජාති හදුන්වලා දීලා තියෙනවා. ඒ { list-style-type } කියන Property එක යටතේ.
Image එකක්, Icon එකක් විදිහට පාවිච්චි කරන්න ඕන නම් {list-style-image: url} කියන Property එක උදව්වට ඉන්නවා. List Icon එකේ Position එක හදන්න ඕන නම් අපේ උදව්වට ඉන්නේ {list-style-position} කියන Property එක. ඒකෙත් Inside සහ Outside කියලා Values දෙකක් තියෙනවා. {list-style-position:outside;} එක තමයි සාමාන්යයෙන් Default පෙන්නන්නේ. {list-style-position:inside;} කියලා දුන්නොත් මුළු <li> set එකම සුළු ප්රමාණයකින් දකුණු පැත්තට විතැන් වෙනවා.