Haloo teman-teman. Pada kesempatan kali ini saya akan mencoba membuat sebua efek lengkungan kertas dengan menggunakan CSS3. Disini saya menggunakan font eksternal, jadi teman-teman bebas mau memilih font jenis apa saja. Oke langsung kita mulai.
Pertama kita ketik HTMLnya seperti berikut :
<div class="box type3">
           Dumet School
</div>
Kemudian kita akan menuliskan CSSnya seperti berikut :
<style>
@font-face{
           font-family:myfont;
           src:url("FancyHeartScript.ttf");
}
.box{
  width: 456px;
  background:#fff;
  color:#000;
  font-size:20px;
  font-family:Calibri,'Segoe UI',Tahoma,Arial,Sans-serif;
  height:80px;
  line-height:70px;
  margin:0 auto 30px;
  position:relative;
  text-align:center;
  text-shadow:0 1px 1px rgba(255,255,255,.3);
           border: 1px solid #E1D5D5;
           font-family:myfont;
           font-size:54px;
           padding:20px;
}
.type3:before, .type3:after{
  bottom:8px;
  content:' ';
  height:50px;
  left:10px;
  width:97%;
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
  -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
  box-shadow:0 5px 10px rgba(0,0,0,.5);
  -webkit-transform:rotate(-2deg);
  -moz-transform:rotate(-2deg);
  transform:rotate(-2deg);
}
.type3:after{
  right:10px;
  -webkit-transform:rotate(2deg);
  -moz-transform:rotate(2deg);
  transform:rotate(2deg);
}
</style>
Pada fungsi @font-face diatas saya menggunakan font jenis Fancy Heart Script, jadi teman-teman sesuaikan dengan font yang teman-teman pakai.
Setelah itu kita save dengan format .html dan jalankan di browser tampilannya kira-kira seperti ini :
Selamat mencoba….