Efek Tumpukan Kertas dengan CSS3
Tabel Konten
CSS
/*
---------------------------------------------------------
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;
}
Elemen Objek
<div class='paper1'>
KONTEN DI SINI
</div>
Tampak bagus pada Firefox, namun kurang lancar pada Opera dan Chrome.
Dimodifikasi dari: Rudy Azhar - Tumpukan Kertas dengan CSS3
3 Komentar
Unknown
wah, bener2 menarik nih, hehee...
saya coba terapin ya mas ;)
eka
Mas kq ga bisa ya mohon bantuanya
Graydo
nyoba dulu ah :-bd