Myanmar Kyat Converter
ဒီသင္ခန္းစာမွာေတာ့ CSS အသံုးျပဳျပီး သင့္၀က္ဆိုက္ရဲ့ေနာက္ခံ အေရာင္ေတြ ေနာက္ခံဓာတ္ပံုေတြကို အလွဆင္ပံုကို သင္ျပေပးမယ္၊ အသံုးမ်ားတဲ့
properties (Background-effect ) ငါးမ်ိဳးရွိပါတယ္၊
1. Background-color
2. Background-image
3. Background-repeat
4. Background-attachment
5. Background-position
အထက္က အသံုးမ်ားတဲ့ css
background effects ေတြကို အသံုးျပဳပံုကို
တစ္ခုစီ ရွင္းျပေပးမယ္၊
Background-Color
Background –color ကိုေတာ့ သင့္၀က္ဆိုက္တစ္ခုလံုးရဲ့
ေနာက္ခံအေရာင္ကိုျဖစ္ေစ၊ လိုခ်င္တဲ့ အစိတ္အပိုင္း တစ္ခုကိုပဲ ျဖစ္ေစ
အေရာင္ေျပာင္းရာမွာသံုးတယ္၊
အခုလက္ေတြ background-color ဆိုတဲ့ Property ကိုလက္ေတြ႔သံုးျပပါမယ္၊ သံုးမယ္ဆိုေတာ့
Selector တစ္ခုေတာ့
လိုျပီ၊ ဒီေတာ့ သင့္၀က္ဆိုက္ရဲ့ မ်က္ႏွာျပင္တစ္ခုလံုးကို
Selector အျဖစ္သတ္မွတ္လိုက္မယ္၊ သင့္၀က္ဆိုက္ရဲ့မ်က္ႏွာျပင္တစ္ခုလံုးကို ကိုစားျပဳတဲ့
HTML Tags ျဖစ္တဲ့ <body> ကို Selector အျဖစ္ေရြးျပီး အလုပ္လုပ္မယ္၊ body တစ္ခုလံုးကို
background-color property
သံုးျပီးအေရာင္ေျပာင္းပစ္မယ္၊ ေအာက္က အတိုင္း
HTML Document
<html>
<head>
<title>what's up</title>
<link href= "baby.css"
rel= "stylesheet" type= "text/css">
</head>
<body>
<b>hey now brown cow in down
town </b>
<p>Nothing last forever, but my
love </p>
</body>
</html>
CSS File
body {
background-color
: #cc6666;
}
အထက္က HTML Document ကို CSS ဖိုင္နဲ႔ ခ်ိတ္ဆက္ျပီး
HTML စာမ်က္ႏွာရဲ့ body အစိတ္အပိုင္းကို နီညိဳေရာင္ေျပာင္းလိုက္ပါတယ္၊ အထက္က ပံုစံမ်ိဳးေရးလိုက္ရင္ ရမယ့္အေျဖက ေအာက္ က အတိုင္း
အထက္က CSS ဖိုင္မွာ ၀က္ဆိုက္စာမ်က္ႏွာရဲ
body အပိုင္းကို အေရာင္ေျပာင္းဖို႔အတြက္
HTML Document ရဲ့ body အစိတ္အပိုင္းကို Selector
အျဖစ္မွတ္တယ္၊ Property အျဖစ္
background-color ကိုသံုးတဲ့ value အျဖစ္ #cc6666 ဆိုတဲ့ အေရာင္နာမည္ကိုထည့္လိုက္တယ္၊
ဒါကေတာ့ HTML
၀က္ဆိုက္တစ္ခုလံုးကို ေနာက္ခံ အေရာင္ေျပာင္းပံုပါ၊ ေအာက္မွာ HTML ဖိုင္ထဲမွာပါတဲ့
<p>အဖြင့္ နဲ႔ </p> အပိတ္တို႔ ၾကားက စာသားကိုပဲ ေနာက္ခံ
အေရာင္ေျပာင္းၾကည့္မယ္၊
သံုးရမယ့္ Property ကေတာ့ background-color ပါပဲ၊ Selector မွာေတာ့ အလုပ္လုပ္မယ့္ အစိတ္အပိုင္း
သတ္မွတ္ေျပာင္းလဲလိုတဲ့အစိတ္အပုိင္း က Paragraph ျဖစ္တဲ့အတြက္ p လို႔ပဲထားရပါမယ္၊
HTML Document
<html>
<head>
<title>what's up</title>
<link href= "baby.css"
rel= "stylesheet" type= "text/css">
</head>
<body>
<b>hey now brown cow in down
town </b>
<p>Nothing last forever, but my
love </p>
</body>
</html>
CSS File
p{
background-color
: #cc6666;
}
အထက္က အတိုင္း CSS ဖိုင္နဲ႔ HTML File တို႔ကိုခ်ိတ္ဆက္ျပီး
CSS ဖိုင္ရဲ့ Selector မွာ HTML Doucment ရဲ့ paragraph ဆိုတဲ့ <p> အဖြင့္ နဲ႔
</p> အပိတ္ၾကားက စာသား ေနာက္ခံ အေရာင္ကိုေျပာင္းဖို႔အတြက္ background-color ဆိုတဲ့ Property နဲ႔ သူ႔ရဲ့တန္ဖိုးျဖစ္တဲ့ #cc6666; တို႔ကို
အသံုးျပဳထားပါတယ္၊ အထက္က HTML ဖိုင္ေကာ CSS ဖိုင္တို႔ကိုပါ ေရးျပီး Run လိုက္ရင္ ေအာက္က အတိုင္း အေျဖကိုရမွာပါ၊
Background-image
Background-image ဆိုတဲ့ Property ကိုေတာ့
သင့္၀က္ဆိုက္ရဲ့ေနာက္ခံ ကို ဓာတ္ပံုတစ္ခုအျဖစ္ထည့္ခ်င္တဲ့အခါမွာသံုးပါတယ္၊ သင္ဓာတ္ပံုေနာက္ခံ
ထည့္လိုတဲ့ အစိတ္အပိုင္း တစ္ပိုင္း ကိုလဲ အတိအက် ေနာက္ခံအေရာင္ထည့္ႏိုင္ပါေသးတယ္၊ အခု
ေအာက္က ပံုကို အသံုးျပဳျပီး
သင့္၀က္ဆိုက္ရဲ့ မ်က္ႏွာျပင္ေနာက္ခံ အေရာင္ကိုဓာတ္ပံုထည့္မယ္၊
အထက္က ပံုကိုသံုးျပီး သင့္၀က္ဆိုက္ရဲ့ ေနာက္ခံအေရာင္ကို
ဓာတ္ပံုအျဖစ္ထည့္မွာပါ၊ သံုးရမယ့္ Selector ကေတာ့
၀က္ဆိုက္တစ္ခုလံုးရဲ့ေနာက္ခံကိုဆိုရင္
HTML body tags ကိုညြန္းတဲ့ body ကိုသံုးရမယ္၊ Property ကိုေတာ့ background-image ကိုသံုးမယ္၊
value
မွာေတာ့ ဓာတ္ပံုထည့္မွာျဖစ္တဲ့အတြက္ ဓာတ္ပံုရဲ့ url ကိုထည့္ရပါတယ္၊ ထည့္နည္းကေတာ့
url ( ); ဆိုျပီးထည့္ရတာပါ၊ လက္သဲကြင္းထဲမွာ
ဓတ္ပံုရွိတဲ့ေနရာနဲ႔ ဓာတ္ပံုရဲ့နာမည္ကိုညြန္ျပရမယ့္ေနရာပါ၊
HTML Document
<html>
<head>
<title>what's up</title>
<link href= "baby.css"
rel= "stylesheet" type= "text/css">
</head>
<body>
<b>hey now brown cow in down
town </b>
<p>Nothing last forever, but my
love </p>
</body>
</html>
CSS File
body{
background-image
: url(me.png);
}
b
, p {
color
: yellow;
font-size
: 20px;
}
အထက္က CSS ဖိုင္မွာ body ဆိုတဲ့
selector ကိုထည့္တယ္၊ Property ေနရာမွာေတာ့ background-image : ကိုသံုးတယ္၊ Value ေနရာမွာ
url
(me.png); ဆိုျပီးအေပၚမွာ ဥပမာ ျပခဲ့တဲ့ပံုကိုသံုးထားတယ္၊ အထက္က CSS နဲ႔ HTML ဖိုင္ႏွစ္ခုလံုကိုေရးျပီး
HTML File ကို Run
လိုက္ရင္ျဖင့္ေအာက္က အတိုင္း ၀က္ဆိုက္စာမ်က္ႏွာကိုရရွိမွာပါ၊
သင့္၀က္ဆိုက္ရဲ့ အစိတ္အပိုင္း တစ္ခုကိုပဲ ေနာက္ခံ ဓတ္ပံု ထည့္လိုရင္လဲ ရပါတယ္၊ ေအာက္မွာ ဥပမာ
ၾကည့္ပါ၊
HTML File
<html>
<head>
<title>what's up</title>
<link href= "baby.css"
rel= "stylesheet" type= "text/css">
</head>
<body>
<b>hey now brown cow in down
town </b>
<table>
<tr>
<trd><td>
</tr>
</table>
<p>Nothing last forever, but my
love </p>
</body>
</html>
အထက္က ေတာ့ HTML File ပါ သူ႔မွာ table တည္ေဆာက္ထာတယ္၊ အခု CSS နဲ႔ အဲ့ဒီ့ table ကို အလွအရင္ဆင္လိုက္မယ္၊
ေလာေလာ ဆယ္ table
ကိုအလွဆင္တဲ့ ကုတ္ေတြကု နာမည္စရာမလိုေသးပါဘူး၊ ေနာက္မွ ေသခ်ာ သင္ျပပါမယ္၊
အခု သင္ျပမွာက table ဆိုတဲ့အစိတ္အပိုင္းအတြင္းမွာ
ဓာတ္ပံုေနာက္ခံ ထည့္ဖို႔ပါ၊ ေအာက္မွာၾကည့္ပါ၊
CSS File
body{
background-color:
$fff;
}
b
, p {
color
: #000;
font-size
: 20px;
}
table {
width:
200px;
height:100px;
}
table,tr, td {
border:
1px solid #cc6666;
}
အထက္က အတိုင္း HTML File ေကာ CSS ဖိုင္ေကာေရးလိုက္မယ္၊
ဒါဆိုရင္ ေအာက္က ပံုစံ ၀က္ဆိုက္စာမ်က္ႏွာကိုရမယ္၊ အထက္က ကုတ္ေတြကို
နားလည္စရာမလိုဘူး၊
ေနက္ table ကိုရွင္းတဲ့အခန္းေရာက္မွ နားလည္ေအာင္သင္ေပးမယ္၊
အခု အထက္က ပံုမ်ိဳးရွိတဲ့သင္၀က္ဆိုက္ရဲ့
ေလးေထာင့္ကြက္ေလး ေနာက္ခံအေရာင္ကို ဓတ္ပံုထည့္မယ္၊ အထက္က CSS ဖိုင္ထဲကို ေအာက္က
ကုတ္ကို ထည့္လိုက္ပါ၊ background-image: url(me.png); ထည့္ရမယ့္ေနရာက
table ဆိုတဲ့ Selector မွာ Declaration တစ္ခုအေနနဲ႔
ထည့္လိုက္ပါ၊ ေအာက္က အတိုင္း
table {
width:
200px;
height:100px;
background-image:
url(me.png);
}
အထက္က ကုတ္မွာ background-image:
url(me.png); ဆိုျပီးထည့္ထားတယ္၊ ထည့္တဲ့ Selector က table ျဖစ္တဲ့အတြက္ သင့္၀က္ဆိုက္က
table
အစိတ္အပိုင္းမွာပဲ ေနာက္ခံအေရာင္ေျပာင္းသြားမယ္၊ ေအာက္က ပံုအတိုင္း
အထက္က အတိုင္းေနာက္ခံ ပံုထည့္တာကိုနားလည္သြားရင္ျဖင့္
ေနာက္ခံပံုေတြကို repeat လုပ္မလားမလုပ္ဘူးလားေရြးခ်ယ္ၾကပါမယ္၊ ပံုမွတ္ေတာ့
သင့္ထည့္လိုက္တဲ့ဓာတ္ပံုက
၀က္ဆိုက္မ်က္ႏွာျပင္တစ္ခုလံုးကိုျပည့္သြားမွာပါ၊ အကယ္၍ သင္က မျပည့္ေစခ်င္ဘူး၊ ထည့္လိုက္တဲ့ဓာတ္ပံုရဲ့
တစ္ပံုစာပဲ ေနာက္ခံပံုျဖစ္သြားေစခ်င္တယ္ဆိုရင္ေတာ့ background-repeat : no repeat ဆိုတဲ့
Properties နဲ႔ Value တို႔ကိုသံုးႏိုင္ပါတယ္၊ ေအာက္မွာ
ဥပမာ ၾကည့္ပါ၊
HTML Document
<html>
<head>
<title>what's up</title>
<link href= "baby.css"
rel= "stylesheet" type= "text/css">
</head>
<body>
<b>hey now brown cow in down
town </b>
<p>Nothing last forever, but my
love </p>
</body>
</html>
CSS File
body {
background-image:
url(me.png);
background-repeat:
no-repeat;
}
အထက္က CSS File မွာ background-repeat ဆိုတဲ့
Property ကို no-repeat ဆိုျပီး အၾကိမ္းၾကီမ္းထပ္ျပီးမေပၚလိုင္းပဲ မူရင္းပံုအတိုင္းပဲ
ရွိခိုင္းလိုက္တယ္၊ ဒါ့ ေၾကာင့္ မူရင္းပံုတစ္ပံုပဲေပၚမယ္ ေအာက္က အတိုင္း
တကယ္လို႔ သင္ထည့္လိုက္တဲ့ ဓာတ္ပံုကို ေဒါင္လိုက္အတိုင္း
သင့္၀က္ဆိုက္အျပည့္ေပၚေစခ်င္တယ္ဆိုရင္ေတာ့ property နဲ႔ Value တို႔ကို
background-repeat :repeat-x; လို႔ေျပာင္းလိုက္ပါ၊ ဒါဆိုရင္ေတာ့ အလွ်ားလိုက္ သင့္၀က္ဆိုက္တစ္ခုလံုးကို
ဓာတ္ပံုးေတြျဖည့္ေပးသြားလိမ့္မယ္၊ ေအာက္က အတိုင္း၊
အထက္က ပံုကေတာ့ background-repeat ဆိုတဲ့
property ကို repeat-x လို႔ထားလိုက္လို႔သင္ထည့္ထားတဲ့ ဓာတ္ပံုကို ၀က္ဆိုက္ရဲ့
အလွ်ားလိုက္ျဖည့္ေပးသြားတာပါ၊
အဲ့ဒီ့ background propetty မွာပဲ background-repeat : repeat-y; လို႔ေျပာင္းလိုက္ၾကည့္ပါ၊
ဒါဆိုရင္ေတာ့ ေအာက္က အတိုင္း ေဒါင္လိုက္ ဓတ္ပံုေတြကိုျဖည့္ေပးသြားတာကိုေတြ႔ရပါ၊
ေနာက္ေလ့လာသင့္တဲ့ background Property
တစ္ခုကေတာ့ background attachement ပါ၊ သင္ထည့္ထားတဲ့ပံုကိုပဲ
Background-attachment
ကို fix လို႔ထည့္ေပးလိုက္ရင္ သင့္၀က္ဆိုက္ကိုေအာက္ပိုင္းကိုဆြဲခ်သြားလဲ
ဓာတ္ပံုက မျပာက္သြားပဲ လိုက္ကပါေနမွာပါ၊ property မွာ background-
attachment လို႔ ေရးျပီး
value မွာေတာ့ fix လို႔ထည့္ၾကည့္ပါ၊ ေအာက္မွာၾကည့္၊
HTML File
<html>
<head>
<title>what's up</title>
<link href= "baby.css"
rel= "stylesheet" type= "text/css">
</head>
<body>
<b>hey now brown cow in down
town </b>
<p>Nothing last forever, but my
love </p>
</body>
</html>
CSS File
body { height : 1024px;
background-image:
url(me.png);
background-repeat:
repeat-x;
}
အထက္က HTML နဲ႔ CSS ဖိုင္တို႔ကိုခ်ိတ္လိုက္ရင္ျဖင့္
ေအာက္က အတိုင္း သင့္၀က္ဆိုက္စာမ်က္ႏွာကို ရရွိမွာပါ၊
အထက္က အတိုင္း HTML နဲ႔ CSS ဖိုင္တို႔ကိုခ်ိတ္လိုက္ရင္ျဖင့္
အထက္မွာေဖာ္ျပထားတဲ့ပံုမ်ိဳးပါတဲ့ စာမ်က္ႏွာကိုရမယ္၊ ဒါဆိုရင္ေတာ့
အနီေရာင္ျမားျပထားတဲ့ေနရာမွာ
ခလစ္တစ္ခ်က္ႏွိပ္ျပီး ေအာက္အထိဆြဲခ်ၾကည့္ပါ၊ ေအာက္ကိုစျပီးဆြဲလိုက္တာနဲ႔ အနက္ေရာင္
ဓာတ္ပံုေနာက္ခံ ေပ်ာက္သြားမယ္၊ တကယ္လို႔ ေအာက္ဖက္ကိုဆြဲခ်လိုက္လဲ အနက္ေရာင္ေနာက္ခံကို
မေပ်က္သြားေစခ်င္ရင္ေတာ့ background-
attachement ဆိုတဲ့နည္းကိုသံုးပါမယ္၊ အထက္က
CSS File မွာ background-attachment : fixed; လို႔ထည့္လိုက္ပါ၊ ေအာက္က အတိုင္း
body { height : 1024px;
background-image:
url(me.png);
background-repeat:
repeat-x;
background-attachment
: fixed;
}
အထက္က လို CSS ဖိုင္မွာ background
attachment ကိုထည့္လိုက္ရင္ေတာ့ ေအာက္က ပံုစံမ်ိဳး ၀က္ဆိုက္စာမ်က္ႏွာကိုရမွာပါ၊
အထက္က အတိုင္းသင့္၀က္ဆိုက္ပံုကိုရရင္ ေဘးက
ဘားေလးကို ေအာက္ကိုဆြဲခ်ၾကည့္ပါ၊ ဒါဆိုရင္ေတာ့ သင္ထည့္ထားတဲ့ ေနာက္ခံပံုက
အေသကပ္ေနမွာျဖစ္ျပီး
ဘယ္ေလာက္ပဲ ေအာက္က ဆြဲခ်ဆြဲခ် သူကေတာ့ေပ်ာက္သြားမွာမဟုတ္ပါဘူး၊ ဒါကုိပဲ
background-attachment
လုပ္တယ္လို႔ေခၚပါတယ္၊ တကယ္လို႔ background-attachment ကိုမထည့္ပဲထားရင္ျဖင့္
scroll ဆိုတဲ့ default Mood ကို သူ႔အလိုလိုေရာက္ေနမယ္၊
ဒါကေတာ့ သင့္ဆိုက္ကို ေအာက္ပိုင္း
ဆြဲခ်ရင္ ပံုကေပ်က္သြားမွာပါ၊
ေနာက္ထပ္တစ္ခုေလ့လာသင့္တာကေတာ့
background-position ပါ၊ သူကေတာ့ သင့္၀က္ဆိုက္မွာ တင္ထားတဲ့ပံုကို ၾကိဳက္တဲ့ေနရာကို
ခ်ိတ္ျပီးေျပာင္းလို႔ရပါတယ္၊ ေအာက္က အတိုင္း၊ ပံုမွန္ဆိုရင္ျဖင့္ ဘယ္ဘက္ေထာင့္မွာ ေအာက္ပါအတိုင္းသင္ထည့္လိုက္တဲ့ပံုက
ကပ္ေနမွပါ၊
အထက္ကလို ဘယ္လက္ ေဒါင့္မွာကပ္ေနတဲ့ပံုကို
ညာဘက္ေထာင့္ကိုေျပာင္းခ်င္ရင္ေတာ့ CSS ဖိုင္မွာ background-position : rignt top;
လို႔ထည့္ရံုပါပဲ၊
ေအာက္က အတိုင္း
body { height : 1024px;
background-image:
url(me.png);
background-repeat:
no-repeat;
background-position
: right top;
}
အထက္က လို ေနာက္ခံပံုရဲ့ တည္ေနရာကိုၾကိဳက္သလို
ေျပာင္းလို႔ရပါတယ္၊ သံုးတဲ့ property ကို background-position ျဖစ္ျပီး value ကေတာ့
right
top ထည့္လိုက္ပါတယ္၊ ဒါဆိုရင္ေတာ့ ေအာက္က ပံုစံအတိုင္း သင့္၀က္ဆိုက္မ်က္ႏွာျပင္ကိုေတြ႔ရမွာပါ၊
အထက္မွာေတာ့ right top ဆိုျပီး
background position ကို ညာဘက္ အေပၚကိုကပ္ေအာင္ CSS နဲ႔ ခိုင္းလိုက္ပါတယ္၊
အထက္က ေရးခဲ့တဲ့ background နဲ႔ ပက္သက္တဲ့
declarations ေတြအားလံုးကို short hand နည္းသံုးျပီးလဲ ေရးလို႔ရပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
body { height : 1024px;
background:
#cc6666 url(me.png) no-repeat fixed
right top;
}
အထက္မွာေတာ့ property တူလို႔ value ေတြကိုစုျပီးအတိုေကာက္ေရးလိုက္တဲ့ပံုပါ၊
အဲ့ဒီ့အတိုင္းေရးရင္ ေအာက္က အတိုင္းပံစံရွိတဲ့
သင္၀က္ဆိုက္စာမ်က္ႏွာကိုရမယ္၊
အထက္က background နဲ႔ ပတ္သတ္သမွ်
effect ေတြကိုေသခ်ာေလ့လာပါ၊
0 comments:
Post a Comment