သင်္ချာ၊ တစ်ကြိမ်မြောက်၊ နှစ်ကြိမ်မြောက်၊ သုံးကြိမ်မြောက်၊ nth ကြိမ်မြောက် နှင့် CSS

Keywords: 
CSS3 Transition, CSS3 Transform, nth-child property of CSS3
Research Detail: 

သင်္ချာ၊ တစ်ကြိမ်မြောက်၊ နှစ်ကြိမ်မြောက်၊ သုံးကြိမ်မြောက်၊ nth ကြိမ်မြောက် နှင့် CSS

ကျွန်တော်တို့ ကျောင်းနေတုန်းက nth ကြိမ်မြောက်ကိန်းဆိုတာကို သင်ခဲ့ဖူးတယ်။ အခု အဲဒီတုန်းက သင်္ချာကို CSS နဲ့ပြန်တွဲပြီး Tutorial လေးတစ်ခုလောက် လုပ်ကြည့်မယ်။  အတန်းတစ်တန်းရှိမယ်။ အတန်းထဲမှာ လူကိုးယောက် ရှိမယ်။ မိန်းကလေး ငါးယောက်၊ ယောက်ျားလေး လေးယောက်။ မိန်းကလေးတွေကို 'မ' ကိန်းတွေ (၁၊ ၃၊ ၅၊ ၇၊ ၉) အဖြစ် သတ်မှတ်မယ်။  ယောက်ျား လေးတွေကို 'စုံ' ကိန်းတွေ (၂၊ ၄၊ ၆၊ ၈) အဖြစ်သတ်မှတ်မယ်။ အတန်းထဲမှာ ရှိသမျှအားလုံးကိုဘုံသတ်မှတ်ပေးထားတာက - 

 

ul{
overflow:hidden;
padding:3em;
}

ul,li{ 
list-style:none; 
margin:1em; 
float:left;

}

ul li a{
text-decoration:none;
color:#fff;
background:#ffc;  
display:block;  
height:10em;  
width:10em;
padding:1em; 

}

ပြီးရင် မိန်းကလေးနဲ့  ယောက်ျား လေးခွဲလိုက်မယ်။  ယောက်ျား လေးတွေက အပြာရောင်  ယောက်ျားလေး နောက်ခံပုံ၊ မိန်းကလေးတွေက ပန်းရောင်မိန်းကလေး နောက်ခံပုံ။  

 

/*မိန်းကလေး*/

ul li:nth-child(odd) a{ 
position:relative;  
top:5px; 
background: transparent url(female.png) no-repeat center;  
-o-transform:rotate(-8deg);
 -webkit-transform:rotate(-8deg);  
-moz-transform:rotate(-8deg);  
-moz-transition:-moz-transform .35s linear;  
-o-transition:-o-transform .35s linear;  
-webkit-transition:-webkit-transform .35s linear;

}

/* ယောက်ျားလေး*/

ul li:nth-child(even) a{

 -o-transform:rotate(-8deg); 
-webkit-transform:rotate(-8deg);  
-moz-transform:rotate(-8deg); 
-moz-transition:-moz-transform .15s linear;  
-o-transition:-o-transform .15s linear; 
-webkit-transition:-webkit-transform .15s linear;  
position:relative;  
top:5px;  
background: transparent url(male.png) no-repeat center;
}

'transform:rotate' ဆိုတာက လှည့်ထားတာကိုပြောတာ။ မိန်းကလေးတွေကို ဘယ်ဘက်ကို ၈ ဒီဂရီလောက်လေး စောင်းခိုင်းပြီး၊  ယောက်ျား လေးတွေကို ညာဘက်ကို ၈ ဒီဂရီစောင်းခိုင်းထားမယ်လို့ ပြောတာ။'transition: -transform' တွေမှာ .15s linear, .35s linear ဆိုတာတွေက animation ဘယ်လိုပုံစံလှုပ်ချင်တာလဲနဲ့ လှုပ်မယ့်နှုန်းတွေကို ပြောတာ၊ လှုပ်မယ့်နှုန်းကို '.' ခံထားတာက တစ်စက္ကန့် မပြည့်တဲ့သဘော၊ အဲဒီတော့ မြန်မြန်လှုပ်ချင်လေ ဒသမနောက်က ဂဏန်းငယ်လေပဲ။ မိန်းကလေးတွေကို နှေးနှေးလှုပ်ခိုင်းမှာမို့လို့ .35 ပေးပြီး ယောက်ျား လေးတွေကို မြန်အောင် .15 ပေးထားတယ်။ ဟုတ်ပြီ လှုပ်တဲ့အခါ ဘယ်လိုပုံစံနဲ့ လှုပ်ချင်လဲ၊ ဘယ်လောက်နှုန်းနဲ့ လှုပ်ချင်လဲလို့တော့ ပြောပြီးပြီ။ လှုပ်တော့လို့ မပြောရသေးဘူး။ ကဲ လှုပ်လို့ရပြီ၊ လှုပ်လို့ရပြီ transition နဲ့ trasnsform ကို သုံးပြီး :) ။ တင်လိုက်ရင်လှုပ်ဗျာ ဆိုတော့ a:hover ပေါ့။

/*မိန်းကလေး*/

ul li:nth-child(odd) a:hover{

 -webkit-transform: scale(1.25); 
-moz-transform: scale(1.25);  
-o-transform: scale(1.25);  
position:relative; 
z-index:5;
}

/* ယောက်ျားလေး*/

ul li:nth-child(even) a:hover{  
-webkit-transform: scale(-1.25);  
-moz-transform: scale(-1.25);  
-o-transform: scale(-1.25);  
position:relative;  
z-index:5;
}

nth ဆိုတာ အကြိမ်မြောက်ကိုပြောတာ odd ဆိုတာက 'မ' ၊ even က ' စုံ ' ။ အပေါ်မှာ 'စုံ' ကိန်းတွေက ဘယ်လိုလုပ်ပါ၊ 'မ' ကိန်းတွေက ဘယ်လိုလုပ်ပါဆိုပြီး ပြောထားမယ်။ 'မ' ကိန်းတွေထဲကမှ တစ်ခုကို တခြား 'မ' ကိန်းတွေနဲ့ မတူအောင် လုပ်မယ်ပေါ့၊ ဆရာမလို့ သတ်မှတ်လိုက်မယ်။ ဆရာမကို အလယ်မှာထားမယ်။ အဲဒီတော့ ဆရာမက ငါးခုမြောက်ကိန်း ဖြစ်တဲ့အတွက် nth နောက်က () ထဲမှာ (5) ဆိုပြီးထည့်ရမယ်။

 

/*ဆရာမ*/

ul li:nth-child(5n) a{
-o-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
position:relative; 
top:-10px;
}

 

ဆရာမဆိုတော့ စောင်းနေလို့ မကောင်းဘူး။ အဲဒါကြောင့် rotate မှာ ၀ ဒီဂရီလို့ သတ်မှတ်ပေးလိုက်တယ်။ ဆရာမကလည်း မိန်ကလေးပဲ မဟုတ်လား အဲဒီတော့ ဆရာမရဲ့ background-image ကို မိန်းကလေးပုံထည့်ပါလို့ ပြောမနေတော့ဘူး။ 'odd' ကနေ inherited လုပ်လိုက်ရောပေါ့။ 

ဒါကတော့ ဆရာမပေါ်ကို mouse တင်လိုက်ရင် ဒီလိုဖြစ်ချင်ပါတယ်ပေါ့။

ul li:nth-child(5n) a:hover{ 
-webkit-transform: scale(1.85);
-moz-transform: scale(1.85);
-o-transform: scale(1.85);
position:relative;
z-index:5;
}

ဒါဆိုရင်တော့ tutorial လေးပြီးပြီပေါ့ခင်ဗျာ။ nth မြောက်လေးက တစ်ခြားအရာတွေ တော်တော်များများမှာလည်း အသုံးဝင်မယ်ထင်ပါတယ်။ demo က ဒီမှာ ပါ။ 

 

Comments

I like it. Very funny post for me

Thanks you

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
အောက်ပါ တွက်ချက်မှုများ၏ အဖြေမှန်ကို မှန်အောင် ရေးပါ။
4 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Featured Articles