Ada beragam jenis efek yang bisa kita buat dengan CSS3 salah satunya adalah efek tepian pada kertas, biasanya bisa kita lihat efek ini pada sebuah mading atau yang lain nya. bagi kalian yang ingin membuat efek tepian pada kertas diwebsite tidak ada salah nya untuk mengikuti tutorial berikut yakni Cara Membuat Efek Tepi pada Kertas dengan CSS3.

Efek kertas yang akan dicontohkan dibawah ini adalah efek tepian seolah-olah kertas terselip diantara tepian, penasaran seperti apa cara membuatnya ? Langsung saja kita praktekan, silahkan kalian ketikan sintak HTML berikut ini.

<body>
<div>the best !</div>
</body>

Untuk teks nya silahkan kalian isikan bebas sebagai objek, selanjutnya adalah kita akan desain efek tepi pada kertas dengan sintak CSS3 berikut.

@import url('https://fonts.googleapis.com/css?family=Pacifico');

div {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ddd;
  background-size: cover;
  background-clip: content-box;
  background-color: #0EA4EA;
  box-sizing: border-box;
  position: relative;
  margin: auto;
  top: 30px; 
  font: 400 2em/180px 'Pacifico', cursive;
  color: #fbfbfb;
  text-indent: 20px;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-bottom: 50px solid #fefefe;
  bottom: -60px;
  right: -65px;
  box-shadow: 0px 7px 6px -9px black;
  transform: rotate(135deg);
}

div:before {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-top: 50px solid #fefefe;
  top: -60px;
  left: -65px;
  box-shadow: 0px -7px 6px -9px black;
  transform: rotate(135deg);
}

Pada sintak diatas kita bisa lihat ada properti CSS3 yakni after dan before adalah sebagai sintak untuk membuat efek tepi pada kertas. Setelah semua sintak diatas kalian ketikan, simpan file dengan format .html kemudian silahkan buka pada browser masing-masing dan lihat hasilnya. Maka akan terlihat seperti efek tepi pada sebuah kertas.

Baiklah sekian tutorial mengenai bagaimana Cara Membuat Efek Tepi pada Kertas dengan CSS3. semoga bermanfaat. Share artikel ini kepada sahabat dan teman kalian supaya lebih bermanfaat bagi orang banyak, tetap semangat dan selamat mencoba 🙂

Untuk lebih jelas nya, kalian juga bisa lihat contoh demo dibawah ini.

Demo