LuenTai Blog

1. ႁႂ်ႈၶဝ်ႈၵႂႃႇတီႈ Administrator: Command Prompt ႁဝ်း။
   
2. တႅမ်ႈသႂ်ႇဝႃႈ "sc delete mysql" ၼႆသေၼဵၵ်းတီႈ Enter ၼိုင်ႈၵမ်းၵေႃႈယဝ်ႉတူဝ်လီငၢမ်းယဝ်ႉၶႃႈ

ၼႃႇၶိုင်သၢင်ႈ Password တႃႇ Root ၼႂ်း phpmyadmin ၼၼ်ႉတေၸၢင်ႈႁဵတ်းလႆႈငၢႆႈငၢႆႈ လႄႈၸႂ်ႉတိုဝ်း Command တႃႇႁဵတ်း Password  ပုၼ်ႈတႃႇၵူၼ်းတီႈတိုၵ်ႉသႂၢင်းသႂ်ႇ XAMPP ပဵၼ်ဢၼ်ၶႅမ်ႉလႅပ်ႈယဝ်ႉ  မိူဝ်ႈႁဝ်းလူင်း XAMPP ယဝ်ႉၼၼ်ႉ Password ၼႂ်း user root တေပႆႇမီး password ၵွပ်ႈၼၼ်ၶႂ်ႈႁႂ်ႈၵူႈၵေႃႉႁဵတ်းသၢင်ႈ Password ပၼ် User Root သေ ၼင်ႇႁိုဝ်တေၸႂ်ႉၵၢၼ်လႆႈလီတႃႇၶၢဝ်းၼႃႈၼႆၶႃႈ။

•  AYing To Unicode
•  Kawsai To Unicode
•  BShan To Unicode
•  Tzerngkoang To Unicode
•  Alaikhun To Unicode
•  Hsenpai To Unicode
•  Unicode To BShan
•  Unicode To AYing
•  ZawGyi To Unicode
•  Code Fonts Convert

<div id="fb-root">
</div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/th_TH/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<!-- တၢင်းတႂ်ႈၼႆႉႁႂ်ႈသႂ်ႇၶေႃႈမုၼ်း COMMENT ၸိူင်ႉၼႆ-
data-href ပဵၼ် URL ၼႃႈဝႅပ်ႉၾဵတ်ႇတီႈၶႂ်ႈႁႂ်ႈမီးၵွၵ်းတႃႇ Comment
data-num-posts တၢင်းၼမ် Comment တေႃႇၼႃႈ 
data-width တၢင်းၵႂၢင်ႈ Comment  
-->
<center>
<div class="fb-comments" data-href="http://luentai.blogspot.com/2015/10/comment.html" data-num-posts="20" data-width="500">
</div>
</center>

1. ဢွၼ်တၢင်းသုတ်းၶဝ်ႈၵႂႃႇတီႈ-   Blogger ယဝ်ႉ
2. တဵၵ်းတီႈ-             template 
3. သိုပ်ႇတဵၵ်းတီႈ-           HTML
4. ၼဵၵ်း                Ctrl+f ယဝ်ႉၶူၼ်ႉသွၵ်ႉႁႃတူဝ်လိၵ်ႈ    ]]></b:skin>

• Code သႂ်ႇၶေႃႈၵႂၢမ်း                                                                                      

<textarea cols="18" height:=" rows="1" style="font-family:tahoma;border-style:dashed;adding: 1px; width:200px; height: 50px; margin: 0px;!important;" width:="" wrap="hard"> 

• ၸီႉၶႅပ်းႁၢင်ႈပိၼ်ႇသီၶွပ်ႇ       

<style type="text/css"> img:hover{ -webkit-box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉသီမိူဝ်ႈၸီႉ ႑ ; box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉသီမိူဝ်ႈၸီႉ ႒; } img{ -webkit-box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉၶႅပ်းႁၢင်ႈမိူဝ်ႈပႆႇၸီႉ; box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉၶႅပ်းႁၢင်ႈမိူဝ်ႈၸီႉယဝ်ႉ; -webkit-transition: all 1.0s ease; transition: all 1.0s ease; } </style>           

• ၸီႉၶႅပ်းႁၢင်ႈမီးၶွပ်ႇမႃးထႅင်ႈ

<style type="text/css"><style name="captain" type="text/css">IMG:HOVER {;-MOZ-BOX- SHADOW: 10PX 10PX 5PX #595858;-WEBKIT-BOX-SHADOW: 10PX 10PX 5PX #595858;BOX-SHADOW: 10PX 10PX 5PX #595858;} img {-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;} </style>       

• ၸီႉၶႅပ်းႁၢင်ႈမီးငဝ်းတၢင်းတႂ်ႈ

<style type="text/css"><style name="captain" type="text/css"><style name="captain" type="text/css">IMG:HOVER { OPACITY: 1; /*REFLECTION*/-WEBKIT-BOX-REFLECT: BELOW 0PX -WEBKIT-GRADIENT(LINEAR, LEFT TOP, LEFT BOTTOM, FROM(TRANSPARENT), COLOR-STOP(.7, TRANSPARENT), TO(RGBA(0,0,0,0.4)));}</style>        

• ၸီႉၶႅပ်းႁၢင်ႈၵိူင်းသၢႆႉ                  

<textarea cols="18" height:=" rows="1" style="font-family:tahoma;border-style:dashed;adding: 1px; width:200px; height: 50px; margin: 0px;!important;" width:="" wrap="hard">

• ၸီႉၶႅပ်းႁၢင်ႈဝဝ်းလူင်း

<style type="text/css"> img:hover{ -webkit-box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉသီမိူဝ်ႈၸီႉ ႑ ; box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉသီမိူဝ်ႈၸီႉ ႒; } img{ -webkit-box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉၶႅပ်းႁၢင်ႈမိူဝ်ႈပႆႇၸီႉ; box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉၶႅပ်းႁၢင်ႈမိူဝ်ႈၸီႉယဝ်ႉ; -webkit-transition: all 1.0s ease; transition: all 1.0s ease; } </style>         

• ၸီႉၶႅပ်းႁၢင်ႈၸႅင်ႈၶိုၼ်း

<style type="text/css"><style name="captain" type="text/css">IMG:HOVER {;-MOZ-BOX- SHADOW: 10PX 10PX 5PX #595858;-WEBKIT-BOX-SHADOW: 10PX 10PX 5PX #595858;BOX-SHADOW: 10PX 10PX 5PX #595858;} img {-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;} </style>

• ႁဵတ်းႁႂ်ႈၶႅပ်းႁၢင်ႈပဵၼ်တူင်ႇဝူင်း

<style type="text/css"><style name="captain" type="text/css"><style name="captain" type="text/css">IMG:HOVER { OPACITY: 1; /*REFLECTION*/-WEBKIT-BOX-REFLECT: BELOW 0PX -WEBKIT-GRADIENT(LINEAR, LEFT TOP, LEFT BOTTOM, FROM(TRANSPARENT), COLOR-STOP(.7, TRANSPARENT), TO(RGBA(0,0,0,0.4)));}</style>

• ၸီႉၶႅပ်းႁၢင်ႈပိၼ်ႇႁၢင်ႈ  

<textarea cols="18" height:=" rows="1" style="font-family:tahoma;border-style:dashed;adding: 1px; width:200px; height: 50px; margin: 0px;!important;" width:="" wrap="hard">  

• ၸီႉၶႅပ်းႁၢင်ႈၸဵင်ႇမူၼ်း 

<style type="text/css"> img:hover{ -webkit-box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉသီမိူဝ်ႈၸီႉ ႑ ; box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉသီမိူဝ်ႈၸီႉ ႒; } img{ -webkit-box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉၶႅပ်းႁၢင်ႈမိူဝ်ႈပႆႇၸီႉ; box-shadow: 0px 0px 3px 3px #သႂ်ႇၶူတ်ႉၶႅပ်းႁၢင်ႈမိူဝ်ႈၸီႉယဝ်ႉ; -webkit-transition: all 1.0s ease; transition: all 1.0s ease; } </style>    

• ၸီႉၶႅပ်းႁၢင်ႈၵိူင်းယိုတ်ႈ        

<style type="text/css"><style name="captain" type="text/css">IMG:HOVER {;-MOZ-BOX- SHADOW: 10PX 10PX 5PX #595858;-WEBKIT-BOX-SHADOW: 10PX 10PX 5PX #595858;BOX-SHADOW: 10PX 10PX 5PX #595858;} img {-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;} </style>        

• ၸီႉၶႅပ်းႁၢင်ႈၸၢင်ပိဝ်ၶိုၼ်ႈ 

<style type="text/css"><style name="captain" type="text/css"><style name="captain" type="text/css">IMG:HOVER { OPACITY: 1; /*REFLECTION*/-WEBKIT-BOX-REFLECT: BELOW 0PX -WEBKIT-GRADIENT(LINEAR, LEFT TOP, LEFT BOTTOM, FROM(TRANSPARENT), COLOR-STOP(.7, TRANSPARENT), TO(RGBA(0,0,0,0.4)));}</style>  

• ၸီႉၶႅပ်းႁၢင်ႈပိၼ်ႈၾူၼ်  

<style type="text/css"> img:hover{ -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform: rotateY(180deg); transform-style: preserve-3d; } img{ -webkit-transition: all 1.0s ease; transition: all 1.0s ease; } </style>              

• ၸီႉၶႅပ်းႁၢင်ႈလႅၼ်ႈဢွၵ်ႇ 

<style type="text/css"> #side{ margin-right:-1px; width:250px; height:150px; overflow:hidden;} #text {text-align:center; width:ใส่ขนาดความกว้างpx; height:ใส่ขนาดความสูงpx; padding:5px; overflow:auto; color:#363636; background-color:#fff;} #picture {margin-left:-280px; width:ใส่ความกว้างอีกทีนึงpx; height:ความสูงอีกทีนึงpx; overflow:hidden; -webkit-transition: opacity 0.9s linear; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out;} #side:hover #picture {margin-left:-550px;} </style> <table id="side" border="0" cellpadding="0" cellspacing="0" ><tr> <td><div id="text">พิมพ์ข้อความใส่ลงไปเลย</div></td> <td><div id="picture"><img src="သႂ်ႇ Url ၶႅပ်းႁၢင်ႈ"></div></td> </tr> </table>            

•  ၸီႉၶႅပ်းႁၢင်ႈလဵၵ်ႉလူင်း    

<style name="captain" type="text/css"> img:hover{ -webkit-transform:scale(0.9); transform:scale(0.9); } img:hover{ overflow:hidden; } img{ -webkit-transform:scale(1.0); transform:scale(1.0); -webkit-transition: all 1.0s ease; transition: all 1.0s ease; }</style>      

• ၸီႉၶႅပ်းႁၢင်ႈယႂ်ႇၶိုၼ်ႈ         

<style name="captain" type="text/css"> img:hover{ -webkit-transform:scale(1.1); transform:scale(1.1); } img:hover{ overflow:hidden; } img{ -webkit-transition: all 1.0s ease; transition: all 1.0s ease; } </style> 

• ၸီႉၶႅပ်းႁၢင်ႈလဵၵ်ႉၵိူင်း 

<style name="captain" type="text/css">img{ -webkit-transform: scale( 1.0) rotate( 0deg); -moz-transform: scale( 1.0) rotate( 0deg); -webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;} img:hover{ -webkit-transform: scale( 0.7) rotate( 8deg); -moz-transform: scale( 0.7) rotate( 8deg);}</style> 

• ၸီႉလိင်ႉ(ၶ်)ယဝ်ႉမီးၶွပ်ႇ              

<style name="captain" type="text/css">a:link,a:visited{ -webkit-transition: 0.4s; -moz-transition: 0.4s; color:#သီတူဝ်လိၵ်ႈ; text-decoration:none; padding:4px; border-radius: 10px 0px 10px 0px;} a:hover{ -webkit-transition: 0.4s; -moz-transition: 0.4s; text-decoration:none; background:#ၶူတ်ႉသီမိူဝ်ႈၼဵၵ်း;} </style>     

• ၸီႉၶႅပ်းႁၢင်ႈၶၢဝ်လမ်မိူၼ်ၵဝ်ႇ             

<style name="captain" type="text/css">img{ filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%);-webkit-filter(1); -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear;} img:hover{ filter: sepia(0%); -webkit-filter: sepia(0%); -moz-filter: sepia(0%); -webkit-filter(0);}</style>   

•  ၸီႉၶႅပ်းႁၢင်ႈပဵၼ်ၶၢဝ်လမ်            

<style name="captain" type="text/css">img{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}img:hover {-webkit-filter: grayscale(100%);}</style> 

• ၸီႉၶႅပ်းႁၢင်ႈပဵၼ်တူင်ႇဝူင်း      

<style name="captain" type="text/css"> img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}img:hover{border:ၶႂ်ႈ ဝူင်းၵႃႈႁိုဝ်px ႁၢင်ႈသဵၼ်ႈၶွပ်ႇ #ၶူတ်ႉသီ;border-radius: 50%;} </style>

• ၵွၵ်းသႂ်ႇၶေႃႈၵႂၢမ်းတၢင်းႁၼ်ထိုင်               

<center><div style="border:1px dashed #ffffff;background:#သႂ်ႇၶူတ်ႉသီၸိုဝ်ႈႁူဝ်ၶေႃႈ; width:260px; padding:5px; border-bottom:none;-webkit-border-top-left-radius: 30px;-webkit-border-top-right-radius: 30px;-moz-border-radius-topleft: 30px;-moz-border-radius-topright: 30px;border-top-left-radius: 30px;border-top-right-radius: 30px;color:white;text-align:center;">Title</div><div style="border:1px dashed #ffffff;background:#သႂ်ႇၶူတ်ႉသီတၢင်းႁၼ်ႁိုင်ၼႂ်းၵွၵ်း; width:250px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:100px; ">Content here</div></center> 

• ႁူဝ်ၶေႃႈတၢင်းသၢႆႉမိုဝ်း               

<style name="captain" type="text/css"> a.navvi{ -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:inline-block; text-align:center; background: #ၶူတ်ႉသီၶွင်ၵွၵ်းမိူဝ်ႈပႆႇၸီႉလိင်ႉ(ၶ်); color:#7c6652; width:75px; padding:2px; overflow: hidden; } a.navvi:hover{ color: #fff; background: #ၶူတ်ႉသီမိူဝ်ႈၸီႉလိင်ႉ(ၶ်); border-radius: 50px 0px 50px 50px; -moz-border-radius: 50px 0px 50px 50px; -webkit-border-radius: 50px 0px 50px 50px;} #h1{padding:2px;background: #fff;width:380px; position:fixed;}</style> <center> <div style="left: 30px; position: fixed; top: 220px;"> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navvi" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a></div></style>  

• ႁူဝ်ၶေႃႈတၢင်းသၢႆႉမိုဝ်း(႒)                 

<style name="captain" type="text/css">a.navooe{ -webkit-transition: 1.0s; -moz-transition: 1.0s; background-image:url('သႂ်ႇurlႁၢင်ႈၽႅၼ်ႇသႂ်'); color:#fff;width:100px; height:20px;overflow:hidden; border-top:14px solid #fff;display:block; } a.navooe:hover{ height:75px;border-top:14px solid သႂ်ႇၸိုဝ်ႈ; background-image:url('သႂ်ႇurlႁၢင်ႈၽႅၼ်ႇသႂ်'); } </style> <div style="left: 30px; position: fixed; top: 220px;"><a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a> <a class="navooe" href="သႂ်ႇလိင်ႉ(ၶ်)">သႂ်ႇၸိုဝ်ႈ</a></div></style>

• ၸီႉၶႅပ်းႁၢင်ႈပၼ်ႉယဝ်ႉႁၢႆ                                                                                

<style type="text/css"> img{ -webkit-transform: rotate(0deg) scale(1); -moz-transform: rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -webkit-transition:All 1.5s ease; -moz-transition:All 1.5s ease; -o-transition:All 1.5s ease; } img:hover{ -webkit-transform: rotate(360deg) scale(0); -moz-transform: rotate(360deg) scale(0); -o-transform: rotate(360deg) scale(0) }</style>

• ၸီႉၶႅပ်းႁၢင်ႈပၼ်ႇဝိုၼ်ႈဝိုၼ်ႈ               

<style type="text/css"> img{ padding:0px;transform:rotate(0deg); margin:0px; -webkit-transition:All 0.5s ease !important; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease; } img:hover{transform: rotate(360deg) ; -webkit-transform: rotate(360deg) ; -moz-transform: rotate(360deg) ; -o-transform: rotate(360deg) ; -ms-transform: rotate(360deg) ;}</style>

• ၸီႉၶႅပ်းႁၢင်ႈယႂ်ႇယဝ်ႉလဵၵ်ႉ               

<style type="text/css"> img{ -webkit-transition: 1.0s!important; -moz-transition: 1.0s!important;} img:hover{ -webkit-animation: zoom 1s alternate infinite linear; -webkit-transition: 1.0s!important; -moz-transition: 1.0s!important; }@-webkit-keyframes zoom { 10% {-webkit-transform: rotate(-5deg) scale(1.0) } 20% {-webkit-transform: rotate(-15deg) scale(1.3) } }</style>

• ၸီႉတီႈၶႅပ်းႁၢင်ႈတူင်ႉတူင်ႉ                   

<style type="text/css">img:hover {border: 1px dashed #သီသဵၼ်ႈမိူဝ်ႈၸီႉယဝ်ႉ;box-shadow: 1px 1px 5px #သီငဝ်းမိူဝ်ႈၸီႉ;-webkit-transition:1.5s; -moz-transition:1.5s; -o-transition:1.5s;border-radius: 6px;-webkit-border-radius: 6px;}img {border: 1px dashed#သီသဵၼ်ႈမိူဝ်ႈပႆႇၸီႉ;padding: 5px;-webkit-transition:1.5s; -moz-transition:1.5s; -o-transition:1.5s;border-radius: 5px;-webkit-border-radius: 5px;}</style>

• ၸီႉၶႅပ်းႁၢင်ႈၶိတ်းပူၵ်း                                                                                             

<style type="text/css"> img{-webkit-transform: perspective(400px) rotateX(0deg); -moz-transform:perspective(400px) rotateX(0deg); -o-transform:perspective(400px) rotateX(0deg) ; -webkit-transition:All 1.0s ease; -moz-transition:All 1.0s ease; -o-transition:All 1.0s ease; } img:hover{ -webkit-transform: perspective(400px) rotateX(360deg) ; -moz-transform: perspective(400px) rotateX(360deg) ; -o-transform: perspective(400px) rotateX(360deg); }</style>

• ၸီႉၶႅပ်းႁၢင်ႈမိူၼ်ၽဵတ်ႇ               

<style type="text/css"> img{ -webkit-transition:All 1.0s ease; -moz-transition:All 1.0s ease; -o-transition:All 1.0s ease; } img:hover{ -webkit-filter:invert(1)} </style>

• ၸီႉၶႅပ်းႁၢင်ႈၶွပ်ႇလႅၼ်ႈၶဝ်ႈ                

<style type="text/css"> img{ background:transparent: box-shadow:inset 0 0px 0px none; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; padding:5px; border:2px none; } img:hover{ box-shadow:inset 260px 0px 1px #ၶူတ်ႉသီၽၢႆႇသၢႆႉ,inset -260px 0px 1px #ၶူတ်ႉသီၽၢႆႇၶႂႃ;}</style>

•  ၸီႉတီႈၶႅပ်းႁၢင်ႈပိၼ်ႇသီ                 

<style type="text/css"> img{ -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } img:hover{ -webkit-filter: hue-rotate(90deg)} </style>

• ၵွၵ်းသႂ်ႇၶေႃႈၵႂၢမ်း ႑                                                                                                    

<style name="captain" type="text/css"> .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; } .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .ch-img{ background-image: url(ใส่ยูอาแอลรูปภาพหน้ากล่อง); background-position:50% 50%; background-size:500px; } .ch-info { position: absolute; background: url(ใส่ยูอาแอลรูปภาพหน้ากล่องเหมือนกัน) D9E8FC;background-position:50% 50%; width: inherit; height: inherit; border-radius: 50%; opacity: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; } .ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); } .ch-item:hover .ch-info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .ch-item:hover .ch-info p { opacity: 1; } </style> <ul class="ch-grid"><li><div class="ch-item ch-img"><div class="ch-info"><center><div style="margin-top:80px; width:270px;background:url(ใส่ยูอาแอลรูปภาพในช่องเนื้อหาแนะนำตัว); border-radius:10px;height:170px;overflow-x:hidden;overflow-y:scroll;text-align:left;">พิมพ์ข้อความลงไปเลยจ้า<br /> <br /> <br /> </div></center></div></div></li> </ul>

• ၵွၵ်းသႂ်ႇၶေႃႈၵႂၢမ်း ႒              

<div style="text-align: center;"> <style name="captain" type="text/css"> .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); -webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; -o-transform-origin: 95% 40%; -ms-transform-origin: 95% 40%; transform-origin: 95% 40%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: rgb(14,14,14); background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9); } .ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #FFFFFF url(ใส่ยูอาแอลรูปนอกกล่อง); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); } .ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 18px; margin: 0 60px; padding: 22px 0 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: #333; width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 24px; margin: 7px auto 0; font-family: 'Open Sans', Arial, sans-serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -moz-transition: -moz-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -o-transition: -o-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -ms-transition: -ms-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -webkit-transform: translateX(60px) rotate(90deg); -moz-transform: translateX(60px) rotate(90deg); -o-transform: translateX(60px) rotate(90deg); -ms-transform: translateX(60px) rotate(90deg); transform: translateX(60px) rotate(90deg); -webkit-backface-visibility: hidden; } .ch-info p a:hover { background: rgba(255,255,255,0.5); } .ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -o-transform: rotate(-110deg); -ms-transform: rotate(-110deg); transform: rotate(-110deg); } .ch-item:hover .ch-info p a{ opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); }.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .ch-img{ background-image: url(http://i.imgur.com/7E2qE.jpg); background-position:50% 50%; background-size:450px; } .ch-info { position: absolute; background: url(ใส่ยูอาแอลรูปในกล่อง) D9E8FC;background-position:50% 50%; width: inherit; height: inherit; border-radius: 50%; opacity: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; } .ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); } .ch-item:hover .ch-info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; } </style> <ul class="ch-grid"><li><br /> <div class="ch-item"> <div class="ch-info"> <br /> <br /> <center> <div style="background: url(ใส่ยูอาภาพในส่่วนของเนื้อหาแนะนำตัว); border-radius: 10px; height: 170px; margin-top: 60px; overflow-x: hidden; overflow-y: scroll; text-align: left; width: 270px;"> พิมพ์ข้อความตรงนี้เลยจ้า</div></center></div><div class="ch-thumb ch-img">  </div></div></li> </ul>

• ၵွၵ်းသႂ်ႇၶေႃႈၵႂၢမ်း ႓               

<style name="captain" type="text/css"> .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(255,255,255,0.1); cursor: default; } .ch-info-wrap{ position: absolute; width: 280px; height: 280px; border-radius: 50%; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #FFFFFF; box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(255,255, 255, 0.8); } .ch-info{ position: absolute; width: 280px; height: 280px; border-radius: 50%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .ch-info .ch-info-back { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); background-image: url(ใส่ยูอาแอลรูปภาพในกล่อง); } .ch-img-1 { background-image: url(ใส่ยูอาแอลรูปภาพหน้ากล่อง);background-size:500px; } .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(255,255, 255, 0.8); } .ch-item:hover .ch-info { -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); } .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; } </style> <ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front ch-img-1"></div><div class="ch-info-back">พิมพ์ข้อความลงไปเลยจ้า<br /> </div></div></div></div></li> </ul>  

• ၵွၵ်းသႂ်ႇၶေႃႈၵႂၢမ်း ႔             

<style type="text/css"> .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(255,255,255,0.1); cursor: default; } .ch-info-wrap, .ch-info{ position: absolute; width: 280px; height: 280px; border-radius: 50%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; } .ch-info-wrap { top: 20px; left: 20px; background: #FFFFFF ; box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(255,255, 255, 0.8); } .ch-info { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .ch-info .ch-info-front { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; z-index: 100; box-shadow: inset 2px 1px 4px rgba(255,255,255,0.1); } .ch-info .ch-info-back { background: rgba(255,255,255,0); } .ch-img-1 { background-image: url(ใส่ยูอาแอลภาพหน้ากล่อง); } .ch-item:hover .ch-info-front { -webkit-transform: rotate3d(1,0,0,-180deg); -moz-transform: rotate3d(1,0,0,-180deg); -o-transform: rotate3d(1,0,0,-180deg); -ms-transform: rotate3d(1,0,0,-180deg); transform: rotate3d(1,0,0,-180deg); box-shadow: inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3); } .ch-item:hover .ch-info-back { background-image: url(ใส่ยูอาแอลภาพเนื้อหาในกล่อง); } .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; } </style> <ul class="ch-grid"><li><br /> <div class="ch-item ch-img-1"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-1">  </div><div class="ch-info-back"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> สวัสดีหน้าหนาวจ้า = v =<br /> <br /> <br /> <br /> =   คิคิ   =<br /> <br /> <img src="http://image.dek-d.com/25/2824705/109956088" /></div></div></div></div></li> </ul>