Code တႅင်ႇပၼ်တၢင်ႈႁၢင်ႈလီဝႅပ်ႉသႆႉ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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>

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

.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>

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

.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>

လိူၼ်တႆး

24/April/2015

သဵင်ၵႂၢမ်း-ၼိူဝ်ႉၵႂၢမ်း

ငဝ်းႁၢင်ႈသဵင်

ၶႅပ်းႁၢင်ႈ

ဝွၵ်း-ပွင်ႈၵႂၢမ်း

Code တႅင်ႇပၼ်တၢင်ႈႁၢင်ႈလီဝႅပ်ႉသႆႉ

Post a Comment

Featured Post

သၢမ်လႅမ်ဢွင်ႇၵျီး လႄႈ ၸဝ်ႈၾႃႉ

Contact Form