Efek Kertas dengan CSS3

Melihat postingan terdahulu tentang ‘Menambah paper-clip pada element‘ yang dibuat masih menggunakan gambar pada efek kertasnya maka pada kesempatan kali ini saya membuat efek kertas tersebut murni dengan CSS3.

Terinspirasi dari Lined Paper yang ada pada koleksi CSS3 Pattern punya Leaverou, saya mencoba kembangkan agar efek tersebut bisa dibuat lebih bagus lagi dengan menambahkan tulisan didalamnya.

HTML

Berikut kode HTML yang kita buat :

<article class="paper">
    <p>This is zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.</p>

    <p>Here are the vegetables required:
    <ul>
        <li>Potato</li>
        <li>Carrot</li>
        <li>Broccoli</li>
        <li>Pumpkin</li>
        <li>Squash</li>
        <li>Peas</li>
        <li>Beans</li>
        <li>Corn</li>
        <li>Cabbage</li>
    </ul></p>

    <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. < Rudy Azhar. </p>
</article>

Saya membuat article dengan class “paper”, lalu isi artikel yang terdiri dari “p” dan beberapa list agar ada sedikit variasi dalam penulisan.

CSS

Pertama-tama kita membentuk dulu kertasnya.

.paper {
    background-color: #fff4c0;
    margin: 50px auto;
    position: relative;
    width: 492px;
    padding: 48px 24px 24px 84px;
}

Hasilnya sebagai berikut :

Langkah kedua membuat garis-garis pada paper, ukuran dari garis tersebut serta penambahan efek box-shadow.

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);

Seperti hasil dibawah ini :

Baca Juga:  30+ Humor CSS yang Akan Membuatmu Ngakak!

Melihat gambar di atas sebenarnya paper sudah jadi, berikut kode CSS paper yang telah dibuat :

.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;
}

Tapi kok belum sempurna karena belum ada garis pinggir layaknya kertas-kertas buku pada umumnya.

Maka pada langkah ketiga ini kita membuat garis pinggir dengan memanfaatkan pseudo element.

.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;
}

Langkah terakhir kita tambahkan lagi efek lengkungan pada kanan bawah paper agar kelihatan seperti kertas betulan.

.paper:before {
    bottom: 8px;
    border-radius: 4px;
    box-shadow: 0 10px 10px rgba(0,0,0,.25);
    content: '';
    height: 100px;
    max-width: 300px;
    position: absolute;
    right: 5px;
    width: 300px;
    z-index: -10; 
    -webkit-transform: rotate(2deg);    
       -moz-transform: rotate(2deg);   
        -ms-transform: rotate(2deg);   
         -o-transform: rotate(2deg);
            transform: rotate(2deg);
}

Nah, jadideh paper yang dibuat dengan CSS3 serta tulisan di dalamnya.

Demontrasi

Contoh lain bisa dilihat pada postingan ‘16 Alasan Kenapa Orang Perlu Merokok‘.

Komentar

comments

grain storage instagram türk takipçi satın al