นิยาย ID free DREAM ;) > ลำดับตอนที่ #1 : ID DREAM :: Any Grey? : Dek-D.com

ลำดับตอนที่ #1

ลำดับตอนที่ #1 : ID DREAM :: Any Grey?

เนื้อหาตอนนี้เปิดให้อ่าน
103

0

19 เม.ย. 56

Any Grey?

ตัวอย่าง จิ้มจึ้ก !

----------------------------------------------------------------------
แนะนำ
สำหรับอันแรกนี้นะคะ ถือว่าเป็นอันที่สวยมว๊ากกกกก
อันหนึ่งเบยทีเดียว โดยเฉพาะไอ้กลมๆ อะ>< เวลาชี้มัน มันเปิดออกมาได้ด้วย ! แจ่มจุง

โค้ดค่ะ ก็อปแล้วนำไปใส่ไอดีของคุณเลยค่ะ ^^
v
v
v

.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: #f9f9f9 url(../images/bg.jpg);
 box-shadow: 
  0 0 0 20px rgba(255,255,255,0.2), 
  inset 0 0 3px rgba(115,114, 23, 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%;
 
  ;
 box-shadow: 
  inset 2px 1px 4px rgba(0,0,0,0.1);
}

.ch-info .ch-info-back {
 background: rgba(230,132,107,0);
}

.ch-img-1 { 
 background-image: url(http://i1064.photobucket.com/albums/u368/q-uinirius/1_-1.jpg);
}

.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:#F0ECE6;
}

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

::-webkit-scrollbar {
width:10px;
height:10px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {
height:10px;
width:10px;
display:block;
background:#eee;
border:1px solid #fff;
}
::-webkit-scrollbar-track-piece  {
background:#fff;
border:4px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color:#eee;
border-radius: 10px;
border:3px solid #fff;
}
</style>
<center>
<div style="background-image:url(http://1.bp.blogspot.com/-WUT0lURmR58/T-lgtb8MOrI/AAAAAAAAAzE/p8YHZN0ibNs/s1600/atingray.png);width:700px;border-radius: 20px;padding:10px;margin-top:15px;">
<center>
<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>
blablabla greeting blabla <br> blablabla<br><style>
a.jeonjin1 {
letter-spacing:1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin:1px;
cursor:pointer;
text-transform:uppercase;
display:inline-block;
font:8px tt;
text-align:center;
background: #fff;
width:95px;
color:#888;
padding:5px;
border-left:20px solid #999999;
border-right:20px solid #999999;
text-decoration:none;
}
a.jeonjin1:hover{
border-left:20px solid #fff;
border-right:20px solid #FFF;
}
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
</style><center>
<a class="jeonjin1" href="http://www.blogger.com/LINK">Home</a><br/>
<a class="jeonjin1" href="http://www.blogger.com/LINK">Stuff</a><br/>
<a class="jeonjin1" href="http://www.blogger.com/LINK">About</a><br/>
<a class="jeonjin1" href="http://www.blogger.com/LINK">Follow</a></center>

</div>
</div>
</div>
</div>
</li>
</ul>
<style>
<center>

#navbar-iframe{display:none;}
::selection{color:black; background:transparent;}

body{background-image:url(http://i1194.photobucket.com/albums/aa363/Fazeera_Kahar/th_wavegrey.png);}
table{background: #ffffff;font: 11px verdana; color: #888; line-height: 13px;text-align: left;line-spacing: 2px;}

a { color: #899195; text-decoration: none;font-weight: normal;}
a:hover {color: #fff; }
a.post{font-family: courier new;font-size: 10px;color: #EDEAE3;display: inline-block;font-weight: normal;
text-transform: uppercase;display: inline-block;margin: 1px 0;padding: 3px 3px 3px 13px;text-align: left;}
a.post:hover {letter-spacing: 1px;color: #CBC1B9;text-transform: uppercase;text-decoration: none;}

b {
color: #999999;
text-decoration: bold;
}
u {
color:#999999;
}
s,strike {
color: #999999;
}
i {
color: #999999;
}
blockquote { 
-moz-border-radius: 10 10 10 10; -webkit-border-radius: 10 10 10 10; border: 1px dashed #000; padding: 8px }

#ry {font: 15px Short Stack;
color: #000000;
margin: 10px;
line-height: 10px;
background: #a4a4a4;
text-align: center;
}
.blog{font: 15px Short Stack;
color: #000000;
margin: 10px;
line-height: 10px;
background: #a4a4a4;
text-align: center;
}
.date{background:#f9f9f9;text-transform: lowercase;color: #999;}
</style></head>

<body>
<table width="700" align="center" cellspacing="5" cellpadding="0">
<tr>
<td width="500" valign="top" style="border-left: 1px solid #bdbdbd;">
<Blogger>
<div class="blog"><$BlogItemTitle$></BlogItemTitle$></div><br>
<$BlogItemBody$>
<br>
<div class="date">
<BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>  <$BlogItemDateTime$> / <$BlogItemCommentCount$>  commentator(s) |    <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>   Just click and you'll see.  </a></BlogItemCommentsEnabled> | <a href="javascript:scroll(0,0)">Scroll up to top</a><br></div>
<br><br><br>
</blogger>
<a class="post" href=<$OlderPosts$>><img src="http://3.bp.blogspot.com/-O6m7eq9c7F8/UDmnTKzvamI/AAAAAAAALT4/lwTz7DHCRpk/s1600/nextgrey.png"></a></OlderPosts> 
<NewerPosts><a class="post" href=<$NewerPosts$>><img src="http://1.bp.blogspot.com/-pfAutEPKX7s/UDmnBRZ7goI/AAAAAAAALTI/Zk2onv0cn58/s1600/backgrey.png"></a></NewerPosts></center></div>

<td id="content" valign="top" width="180" style="border-right: 1px solid #eee;">
<center><img src="http://i1053.photobucket.com/albums/s475/kartikrawr/48_.jpg"><br></center>
<br>
Hi, my name is <b>your name</b> and thanks for visiting my weird blog :). My lovely weird blog, and with little help from my <a href="http://farsyawidodo.blogspot.com"/>friend</a>, she made this skins and I fall in love with this skins. Wanna know her? Just click her name! <b>Please don't remove my name</b><br>
<br>

Best Viewed only in <b>Google Chrome</b> and <b>Safari</b>.<br>

Networks: <br> <a href="http://www.facebook.com/USERNAME">Facebook</a> | <a href="http://twitter.com/USERNAME">Twitter</a> | <a href="http://instagram.com/USERNAME"/>Instagram</a> | <a href="http://blogskins.com/me/USERNAME"/>Blogskins</a> . <br>
<br>
</div>

<div id="ry">Scream</div>
Your cbox code here. Max: 270px</div>
<br>

<center>
<select name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;">
<option value="/">Just click and see what inside</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</form>
</center><br></div>

<div id="ry">Ending</div>

<i>80% Template by:</i> <a href="http://farsyawidodo.blogspot.com">Farsya</a> <a href="http://blogskins.com/me/farsyawidodo"/>Widodo</a><br>
<i>20% Edited by:</i> <a href="http://YOURLINKBLOG.blogspot.com"/>YOUR NAME</a><br>
<i>Circle Hover by:</i> <a href="http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/"/>Codrops</a>

<br></td><tr>

</table></body></html>
 <style type="text/css">
.headtable, .head2, .modulebg1,
#footer, #header, #neck, .left,
#module_left .modulebg2, #module_right .modulebg2,
.hr1, .hr2, .borderlinks
{ display: none !important; }
.mainborder
{ border: 0px !important; }
</style>

-------------------------------------------------------------------------------------------

ติดตามเรื่องนี้

เก็บเข้าคอลเล็กชัน

ลำดับตอนที่ #1 : ID DREAM :: Any Grey?

นิยายที่ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น

คืนค่าการตั้งค่าทั้งหมด

ลำดับตอนที่ #1 : ID DREAM :: Any Grey?

นิยายที่ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น