1.
Posted by : Unknown

ok langsung saja (css mas.ter only) cekidaut :3




CSS
' Wrote:/*
---------------------------------------------------------
Sesuaikan lebar kertas dan penampilan.
Pastikan pengurangan/penambahan lebar sesuai dengan perbandingannya
---------------------------------------------------------
*/

.paper1 {
width:730px; /*(730 + 0)*/
background:#fff;
border:1px solid #ccc;
}

.paper1:before {
width:749px; /*(730 + 19)*/
background:#fafafa;
border:1px solid #ccc;
}

.paper1:after {
width:756px; /*(730 + 26)*/
background:#fafafa;
border:1px solid #ccc;
}


/*
---------------------------------------------------------
Jangan mengedit bagian ini jika belum yakin
---------------------------------------------------------
*/

.paper1 {
padding:15px;
height:100%;
position:relative;
-webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
-moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
box-shadow:0 0 2px hsla(0,0%,0%,.2);
}

.paper1:after, .paper1:before {
content:'';
bottom:-3px;
height:100%;
left:1px;
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
-moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
box-shadow:0 0 2px hsla(0,0%,0%,.2);
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
}

.paper1:before {
bottom:-5px;
left:5px;
}

.paper1:hover:after {
-webkit-transform:rotate(-3deg) translate(-20px,0);
-moz-transform:rotate(-3deg) translate(-20px,0);
-ms-transform:rotate(-3deg) translate(-20px,0);
-o-transform:rotate(-3deg) translate(-20px,0);
transform:rotate(-3deg) translate(-20px,0);
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
}

.paper1:hover:before {
-webkit-transform:rotate(3deg) translate(20px,0);
-moz-transform:rotate(3deg) translate(20px,0);
-ms-transform:rotate(3deg) translate(20px,0);
-o-transform:rotate(3deg) translate(20px,0);
transform:rotate(3deg) translate(20px,0);
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
}

HTML
Quote:<div class='paper1'>
KONTEN DI SINI
</div>

(hover post nya bro)
Tampak bagus pada Firefox, namun kurang lancar pada Opera dan Chrome.

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Copyright © 2013 KenichiSZ | Creative Only !! -HIKANIMU*- Powered by Blogger - Template by Renadel Dapize- Ori Djogzs Design By Andy Al mesura