Efek Tumpukan Kertas Pada Laman Posting

Efek Tumpukan Kertas Pada Laman Posting - Secara berturut-turut saya memberikan banyak kode CSS untuk mengatur atau sekedar mempercantik tampilan sidebar widget, tidak satupun artikel saya yang menuju tentang pembahasan laman posting, karena apa yang bisa kita ubah dari laman tersebut, paling hanya memberi warna pada sisi bordernya saja, membuat efek transisi 3D bayangan pada lamannya, selebihnya ya untuk menuliskan artikel, upload gambar, publikasikan jadi dech artikel baru.

Tetapi setelah tadi iseng-iseng design HTML kode Template, ternyata laman posting ibarat sebuah kertas tempat kita menuliskan artikel, dan posisinya mempunyai kode tersendiri pada struktur template yang dapat kita ubah bentuk dan gaya tampilannya, dengan sedikit sentuhan CSS kode saya coba memberi tumpukan kertas baru pada laman posting, sehingga kolom posting yang biasa menampilkan artikel akan terlihat ada 3 kertas yang tertumpuk layaknya sebuah buku.

Berikut kode CSS yang saya tambahkan didalamnya, Saya menambahkan 2 lembar kertas dengan ukuran yang sama, 2 lembar kertas kosong dan 1 kertas untuk postingan, jadi ada 3 lembar kertas yang menumpuk

.paper1 {
  width:auto;                                                /*(830 + 0)*/
  background:#fff;
  border:1px solid #cecece;}
.paper1:before {
  width:754px;                                            /*(830 + 26)*/
  background:#fafafa;
  border:1px solid #ccc;}
.paper1:after {
  width:761px;                                           /*(830 + 31)*/
  background:#fafafa;
  border:1px solid #cecece;}

Hasilnya

Gambar diatas membuat saya tertarik untuk memberikan sedikit HOVER pointer klik pada kodenya, Kode ini akan mengatur tampilan back/kembali ke-dafault, detailnya jika postingan terbuka akan terlihat seperti biasanya, tetapi saat pointer klik mouse melintas, maka akan terjadi efek yang secara otomatis akan menampilkan tumpukan kertas baru yang kita beri pada kode pertama

Berikut kode CSS untuk memanggil efek tumpukan kertas untuk laman posting

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

Hasilnya

DEMO SHOW

Seperti biasa, saya akan selalu memberikan keterangan kode-kode CSS diatas agar pengunjung setia SAHABAT BLOGGER 77 dapat dengan mudah memahami dan meng-custom untuk penerapan pada blog. Mudah-mudahan Membuat Efek Tumpukan Kertas Pada Laman Posting dapat bermanfaat.

KETERANGAN KODE

1. Perhatikan kode I, Ada 3 CSS Code, 1 untuk tampilan default laman posting dan 2 kode berikutnya kertas kosong sebagai tumpukan, disamping masing-masing kode sudah saya beri ukuran yang sesuai dengan lebar laman posting saya, jadi silahkan sesuaikan karena template saya belum tentu sama dengan anda
2. Kita lanjut pada kode II, Kode ini untuk menentukan gaya tampilan hover efek tumpukan kertas postingan, ROTATE kecepatan untuk muncul saat pointer klik, sedangkan transisi adalah pemanggil efek-nya per second out. Jadi saya sarankan jangan mengedit kode ini jika belum yakin
3. Kode CSS diatas sudah saya susun pada tempat yang sebenarnya (No potition edit, OK guys.!!) dan membuang kode yang error, jadi kodenya aman untuk di komsumsi, hehe..!!
4. Saatnya penerapan ke Blog, Kita kembali lagi pada kode I, disana ada kode .paper1 {..}, kode ini sudah merupakan atribut class, jadi pada postingan cukup anda tambahkan class="paper1"

Contoh-

<div class="paper1">ISI TULISAN ANDA</div>

SELAMAT MENCOBA..!!