- Back to Home »
- All , Blogger , News »
- Efek Tumpukan Kertas with CSS3
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.