Belajar CSS3 Untuk Pemula (2) - Membuat Efek Kertas

Masih belajar dari blognya Bang Zuldesign di belajarwebdesign, kali ini chekmad ingin memindahkan sebagian tulisan bang Zul di mari.

Membuat Efek kertas dengan CSS 3 itu judul yang di buat bang Zuldesign di Blognya dan chekmad ingin mengutip artikel tersebut sebagai bahan belajar dan catatan chekmad agar tidak lupa. Buat rakan-rakan yang ingin bersama belajar mari kita mulai.

Dalam artikel blognya bang Zul coba mengembangkan efek membuat kertas dengan menggunakan CSS 3, bukan dengan menggunakan image.

Kita mulai dengan membuat HTML terlebih dahulu :

<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>
artikel di buat dengan menggunakan sintak  class “paper”, lalu isi artikel yang terdiri dari “p” 

 Lanjut menggunakan CSS untuk membuat Paper nya

.paper {    background-color: #fff4c0;    margin: 50px auto;    position: relative;    width: 492px;    padding: 48px 24px 24px 84px;}
dan hasilnya akan seperti di bawah ini :


Langkah selanjutnya kita akan membuat garis-garis pada paper yang kita buat tadi serta menentukan besaran ukuran dari garis dan menambahkan box shadow.

Tambahkan Kode CSS ini pada class paper yang telah kita buat

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);
Sehingga CSS nya menjadi seperti 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;}
 Dan hasilnya seperti ini :


Nah efek kertas sudah jadi selanjutnya kita buat garis pinggir pada kertas, Kata Bang Zul kita akan menggunakan 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;}
Bila anda ingin menambah lengkungan pada kertas maka tinggal menambahkan kode di bawah ini :
.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);}

Akhirnya jadi dah efek kertas dengan menggunakan CSS3, Chekmad sangat berterima kasih atas panduan di blognya bang Zul design atas pengetahuan CSS3 nya  
Belajar CSS3 Untuk Pemula (2) - Membuat Efek Kertas Belajar CSS3 Untuk Pemula (2) - Membuat Efek Kertas Reviewed by Chek 404 on September 24, 2014 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.