Cara Membuat Efek Kertas Dengan CSS3

Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga sehat yah, amin.

Kali ini saya akan berbagi tutorial mengenaiÂ Cara Membuat Efek Kertas Dengan CSS3, Nah bagi kalian yang ingin membuat efek kertas tapi dengan background warna bukan dengan gambar alangkah baik nya untuk menyimak langkah-langkah nya berikut ini.

Pertama silahkan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut.

<article class="paper">
    <p>Lorem Ipsum is simply dummy text...</p>
 
    <p>Lorem Ipsum is simply dummy.
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li
    </ul></p>
 
    <p>Lorem Ipsum is simply dummy text...</p>
</article>

Silahkan isikan paragraf nya atau bisa menyalin nya di lipsum. Setelah itu lanjutkan untuk kode CSS nya untuk membuat efek kertas. Ketikan kode nya berikut ini.

.paper {
    background-color: #fff4c0;
    background-image: -webkit-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%); 
    background-image: -moz-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
    background-image: -0-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
    background-image:  linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
    background-size: 1px 23px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    margin: 50px auto;
    position: relative;
    width: 492px;
    padding: 48px 24px 24px 84px;
}
.paper:after {
    border-left: 1px solid rgba(255,0,0,.2);
    border-right: 1px solid rgba(255,0,0,.2);
    bottom: 0;
    content: '';
    left: 58px;
    position: absolute;
    top: 0;
    width: 2px;
}

Kalo sudah jangan lupa disimpan, kemudian buka dibrowser, dan lihat hasil nya.

Lumaya bagus yah :), silahkan kalian modifikasi lagi, baik sampai disini tutorial mengenaiÂ Cara Membuat Efek Kertas Dengan CSS3, semoga bermanfaat, amin.

Selamat Mencoba.

Kategori