Membuat Tampilan Kertas Bertumpuk dengan CSS

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.

14 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat