CSS පාඩම් අංක 03
02. Borders
CSSවල Border කියන Property එකෙන් පුලුවන් අපිට Border එකක් දාගන්න.
<div id = "text"> This is a border </div> - HTML
#text {border: 5px solid red;} - CSS
මෙතන 5px කියන්නේ Border එකට දීලා තියෙන ඝනත්වය. Solid කියන්නේ Border එකේ Style එක. Red කියන්නේ Border එකේ පාට. Border එකට පාටක් දැම්මේ නැත්නම් ඒකෙ Default පාට ඇවිල්ලා කළු පාට. Border Property එකට දාන Values වලින් සමස්ථ Border එකට බලපෑමක් එල්ල වෙනවා කියලත් මතක තියා ගන්න ඕනි.
<div id = "text"> This is a border </div> - HTML
#text {border: 5px solid red;} - CSS
මෙතන 5px කියන්නේ Border එකට දීලා තියෙන ඝනත්වය. Solid කියන්නේ Border එකේ Style එක. Red කියන්නේ Border එකේ පාට. Border එකට පාටක් දැම්මේ නැත්නම් ඒකෙ Default පාට ඇවිල්ලා කළු පාට. Border Property එකට දාන Values වලින් සමස්ථ Border එකට බලපෑමක් එල්ල වෙනවා කියලත් මතක තියා ගන්න ඕනි.
Border එකේ එක කොටසකට විතරක් බලපෑමක් එල්ල කරන්න ඕනි නම් අපිට පුලුවන් border-bottom, border-top, border-right, border-left කියන ඒවා පාවිච්චි කරන්න. මේකෙන් වෙන්නේ Border එකේ උඩ කොටසට, යට කොටසට, වම් සහ දකුණු කොටස් වලට වෙන් වෙන් වශයෙන් බලපෑම් එල්ල කරන්න පුලුවන් වෙන එක.
HTML
<div id = "text1" >This is border bottom </div> <div id = "text2" >This is border top </div> <div id = "text3">This is border left </div> <div id = "text4">This is border right </div> |
CSS
#text1 {border-style: solid; border-bottom-color: red;} #text2 {border-style: solid; border-top-color: red;} #text3 {border-style: solid; border-left-color: red;} #text4 {border-style: solid; border-right-color: red;} |
Solid වලට අමතරව Border Styles කිහිපයක්ම තියෙනවා. සමස්ථ Border එකටම බලපෑමක් එල්ල කරන්න ඕනි නම් {border-style: } කියන එක පාවිච්චි කරන්න පුලුවන්.
HTML
<div id = "text1" > Dotted</div> <div id = "text2" >Double </div> <div id = "text3" >Dashed </div> <div id = "text4" >Groove </div> <div id = "text5" >Inset </div> <div id = "text6" >Outset </div> <div id = "text7" >Ridge </div> |
CSS
#text1 {border-style: dotted} #text2 {border-style: double} #text3 { border-style:dashed} #text4 {border-style: groove} #text5 { border-style: inset} #text6 {border-style: outset} #text7 {border-style: ridge} |
Border එකේ එක පැත්තකට විතරක් Styles දෙන්න ඕනි නම්, අපිට පුලුවන් border-left-style, border-right-style, border-top-style, border-bottom-style කියන ඒවා පාවිච්චි කරන්න !
Border Radius කියලත් Property එකක් තියෙනවා. මේකෙන් වෙන්නේ අදාළ Element එකේ Border එකේ කොන් ටික හදන එක.
උඩ තියෙන උදාහරණය ගමු. ඒකේ Border Radius කියන එක Div, Button, Image එකකට දීලා තියෙනවා. Border Radius එක Px වලින් වගේම් % වලිනුත් දෙන්න පුලුවන්.
HTML <div id = "text1"> Hello !</div> <img id ="img" src="11.JPG" /> <button id="start">START</button> |
CSS #text1 { border: 2px solid ; border-radius: 20px; } #img { border-radius: 50% } #start{ border-radius: 28px; } |
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius කියන Properties හරහා පුලුවන් අදාළ Element එකේ සුවිශේෂී වුණු කොටසකට බලපෑමක් එල්ල කරන්න.
HTML
<img id ="img" src="11.JPG" />
CSS
#img {
border-bottom-left-radius : 65px ;
border-bottom-right-radius : 27px ;
border-top-right-radius : 0px ;
border-top-left-radius : 188px ;
}
එහෙමත් නැත්නම් තව ලස්සන වැඩක් කරන්න පුලුවන්. මේ 4ම එකම Code එකකින් ලියන්න පුලුවන්. ඒකෙන් Code එක තවත් සරල වෙනවා. Codes ප්රමාණයත් අඩු වෙනවා. ඒක File size එක අඩු වෙන්නත් උදව්වක් වෙනවා.
#img {
border-radius:188px 0px 27px 65px
}
හැබැයි මෙහෙම ලියනකොට හැමතිස්සෙම මතක තියා ගන්න ඕන කරුණක් තියෙනවා. අගයන් ටික දාන්න ඕන දක්ෂිණාවර්තව. එහෙමත් නැත්නම් ඔරලෝසු කටුව කැරකෙන විදිහ අනුව. ඒ අනුව අගයන් ටික දෙන්න ඕන මෙන්න මේ පිළිවෙලට.
* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
ඕනෑම Element එකක කොන් සහ පැති 4 සම්බන්ධව සිදු කරන වෙනස්කම් වලදී මේ ක්රමය අනුගමනය කරන්න පුලුවන්.
{border-width} කියන එකෙන් පුලුවන් අපිට Border එකට සුදුසු පළලක් දෙන්න. ඒක Px අගයකින් දෙන්න පුලුවන්. එහෙමත් නැත්නම් Values විදිහට medium, thin, thick කියන Values දෙන්න පුලුවන්. Border Width එක විතරක් දුන්නට Code එක වැඩ කරන්නේ නෑ. Border Style එකකුත් අනිවාර්යෙන්ම දෙන්න ඕනි.
border-right-width, border-left-width, border-top-width, border-bottom-width පාවිච්චි කරලා Border එකේ ඒ ඒ කොටස්වලට, එක එක Widths දෙන්න පුලුවන්. Border-Image Properties ගැන තවත් ඉගෙන ගන්න කැමති අය, පහළ තියෙන Links වලට පිවිසෙන්න.
border-image
border-image-width
border-image-slice
border-image-source
border-image-outset
border-image-repeat
03. Box Shadows & Opacities
CSSවල තියෙන මේ Box Shadow Property එකෙන් වෙන්නේ අදාළ Element එකට හෙවනැල්ලක් Set කරන එක. පහළ තියෙන උදාහරණය බලන්න.
HTML
<div id = "box"> </div>
CSS
#box {
height : 300px;
width : 600 px;
background-color : blue;
box-shadow : 20px 20px 5px #888888;
}
Box Shadow Property එකේ මුලින්ම දීලා තියෙන්නේ x අක්ෂයට අදාළ px ගණන. yට අදාළ px ගණන තමයි ඊළගට දීලා තියෙන්නේ. ඊටත් පස්සේ දීලා තියෙන්නේ හෙවනැල්ලේ විනිවිද බව. සාමාන්යයෙන් විනිවිද බවේ උපරිම අගය තමයි 1. අවම අගය තමයි 0.1 කියන අගය. විනිවිද බවක් ඇති කරන්න නම් 0.1 සිට 0.9 දක්වා ඕනෑම අගයක් පාවිච්චි කරලා බලන්න පුලුවන්. මෙතන දීලා තියෙන්නේ 0.5 අගය. ඒ කියන්නේ හරි අඩකින් විනිවිද බව අඩු කරලා. ඊළගට දීලා තියෙන්නේ හෙවනැල්ලට අදාළ වර්ණය.
Element එකක විනිවිද බව වෙනස් කරන්නේ Opacity Property එකෙන්. පහළ තියෙන්නේ විනිවිද බව හරි අඩකින් අඩු කරලා. Opacity සහ Box Shadow කියන ඒවා Shape එකකට විතරක් නෙවේ Button එකකට, Image එකකට ඔය හැම දේකටම ඔට්ටුයි.
{opacity: 0.5;}
{opacity: 0.5;}
04. Float
ඕනිම Element එකක් වෙබ් පිටුවේ කොනකට යවා ගන්න ඕනි නම් අපිට පුලුවන් Float කියන එක පාවිච්චියට ගන්න.
{float: right} කියලා යෙදුවොත් සම්පූර්ණ Element එකම වෙබ් පිටුවේ දකුණු පැත්තෙ කොනට යනවා.
{float: left} කියලා යෙදුවොත් සම්පූර්ණ Element එකම වෙබ් පිටුවේ වම් පැත්තෙ කොනට යනවා.
05. Cursor
Mouse Cursor එක හැම තිස්සෙම තියෙන්නේ සූචකයක් (ඊතලයක්) විදිහට. ඒත් ඔයාලා දැකලා ඇති මොකක් හරි Link එකකින් සම්බන්ධ කරලා තියෙන Element එකකට, තවත් විදිහකින් කිව්වොත් Click කරන්න පුලුවන් Element එකක් උඩට Cursor එක ගෙනිච්චම, එකේ හැඩය වෙනස් වෙනවා (ගොඩක් වෙලාවට පෙන්නන්නේ අතක්). අන්න එහෙම එන විදිහට හදන්න,
{cursor: }
කියන Property එක උදව් වෙනවා. Cursor Values ගොඩාක් තියෙනවා. අපි ඒවා එකින් එක බලමු.
{cursor: }
කියන Property එක උදව් වෙනවා. Cursor Values ගොඩාක් තියෙනවා. අපි ඒවා එකින් එක බලමු.
අපි හිතමු btn කියලා ID එකක් තියෙන Button එකකට Progress කියන එක දාගන්න ඕන කියලා. එහෙනම් මෙච්චරයි කරන්න තියෙන්නේ.
HTML
<a href = "http://www.facebook.com">
<button id = "btn"> Click to visit Facebook </button>
</a>
CSS
#btn {cursor:progress}