Membuat Tampilan Kertas Bertumpuk dengan CSS

14/01/2020    Maykhel David    117     Website

Membuat Tampilan Kertas Bertumpuk dengan CSS – Pada kesempatan kali ini saya akan berbagi mengenai salah satu trik yang bisa dibuat hanya dengan menggunakan HTML dan CSS. Trik kali ini kita akan membuat sebuah efek yang menyerupai kertas yang bertumpuk. Trik ini sangat cocok untuk kalian yang membutuhkan layout yang tidak umum dan unik.

Cara pembuatan tampilan kertas bertumpuk dengan CSS sangatlah mudah, disini kita akan bermain dengan atribut position dan juga transform, untuk lebih jelasnya bisa langsung ikuti saja caranya dibawah ini.

Buat struktur html sederhana dengan menggunakan class .kertas sebagai pembungkus konten.

<h1>Halaman Blog</h1>
<div class="container">
  <div class="kertas">
    Isi halaman blog
  </div>
</div>

 

Selanjutnya kita akan coba memberikan css untuk mengatur layout umumnya dulu (opsional)


/* CSS tambahan */
.container{
  width: 800px;
  margin: auto;
}
h1 {
  text-align:center;
  color:#fff;
  margin:30px;
  font-size:30px;
  text-decoration:underline;
}
body {
  background: #333;
  padding: 2em;  
  font-family:arial;
}

 

Sekarang kita akan coba merubah layout div menjadi mirip dengan kertas yang bertumpuk dengan menggunakan position, pseudo before dan after, dan juga transform.

.kertas {
  background: #fff;
  padding: 30px;
  position: relative;
}

.kertas,
.kertas::before,
.kertas::after {
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
}

.kertas::before,
.kertas::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.kertas::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}

.kertas::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}

Selanjutnya kalian bisa simpan dan coba lihat hasilnya akan seperti ini

Membuat Tampilan Kertas Bertumpuk dengan CSS

Baiklah demikian artikel tentang cara membuat tampilan kertas bertumpuk hanya dengan css, untuk kalian yang belum tahu apa itu pseudo element, kalian boleh lihat artikel berikut yang berjudul Mengenal Pseudo Elemen dan Variable CSS. Dan lihat juga artikel serupa yaitu Membuat efek hover lipatan kertas dengan css3.

Semoga bermanfaat.

HTML CSS, Tips dan Trik, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More