Efek Tumpukan Kertas dengan CSS

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>

Demo

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM