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 :
|
1 |
<em><div class="box type3"></em> |
|
1 |
<em>Â Â Â Â Â Â Â Â Â Â Â Dumet School</em> |
|
1 |
<em></div></em> |
Kemudian kita akan menuliskan CSSnya seperti berikut :
|
1 |
<em><style></em> |
|
1 |
<em>@font-face{</em> |
|
1 |
<em>Â Â Â Â Â Â Â Â Â Â Â font-family:myfont;</em> |
|
1 |
<em>Â Â Â Â Â Â Â Â Â Â Â src:url("FancyHeartScript.ttf");</em> |
|
1 |
<em>}</em> |
|
1 |
<em>.box{</em> |
|
1 |
<em>Â Â width: 456px;</em> |
|
1 |
<em>Â Â background:#fff;</em> |
|
1 |
<em>Â Â color:#000;</em> |
|
1 |
<em>Â Â font-size:20px;</em> |
|
1 |
<em>Â Â font-family:Calibri,'Segoe UI',Tahoma,Arial,Sans-serif;</em> |
|
1 |
<em>Â Â height:80px;</em> |
|
1 |
<em>Â Â line-height:70px;</em> |
|
1 |
<em>Â Â margin:0 auto 30px;</em> |
|
1 |
<em>Â Â position:relative;</em> |
|
1 |
<em>Â Â text-align:center;</em> |
|
1 |
<em>Â Â text-shadow:0 1px 1px rgba(255,255,255,.3);</em> |
|
1 |
<em>Â Â Â Â Â Â Â Â Â Â Â border: 1px solid #E1D5D5;</em> |
|
1 |
<em>Â Â Â Â Â Â Â Â Â Â Â font-family:myfont;</em> |
|
1 |
<em>Â Â Â Â Â Â Â Â Â Â Â font-size:54px;</em> |
|
1 |
<em>Â Â Â Â Â Â Â Â Â Â Â padding:20px;</em> |
|
1 |
<em>}</em> |
|
1 |
<em>.type3:before, .type3:after{</em> |
|
1 |
<em>Â Â bottom:8px;</em> |
|
1 |
<em>Â Â content:' ';</em> |
|
1 |
<em>Â Â height:50px;</em> |
|
1 |
<em>Â Â left:10px;</em> |
|
1 |
<em>Â Â width:97%;</em> |
|
1 |
<em>Â Â position:absolute;</em> |
|
1 |
<em>Â Â z-index:-1;</em> |
|
1 |
<em>Â Â -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);</em> |
|
1 |
<em>Â Â -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);</em> |
|
1 |
<em>Â Â box-shadow:0 5px 10px rgba(0,0,0,.5);</em> |
|
1 |
<em>Â Â -webkit-transform:rotate(-2deg);</em> |
|
1 |
<em>Â Â -moz-transform:rotate(-2deg);</em> |
|
1 |
<em>Â Â transform:rotate(-2deg);</em> |
|
1 |
<em>}</em> |
|
1 |
<em>.type3:after{</em> |
|
1 |
<em>Â Â right:10px;</em> |
|
1 |
<em>Â Â -webkit-transform:rotate(2deg);</em> |
|
1 |
<em>Â Â -moz-transform:rotate(2deg);</em> |
|
1 |
<em>Â Â transform:rotate(2deg);</em> |
|
1 |
<em>}</em> |
|
1 |
<em></style></em> |
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….