Sunday, December 4, 2011

Membuat efek lipatan kertas dengan CSS

Sebelumnya delpid telah banyak share tentang cara-cara membuat efek-efek pada blog agar blog lebih tampil sedap dilihat,blogger memang asik..coz banyak fariasi yang bisa kita terapkan dalam kode css, css blockquote pun bisa kita modifikasi agar tampilanya terlihat cantik, nah kali ini saya akan share ulang tentang cara membuat efek lipatan kertas dengan menggunakan kode css,lihat gambar dibawah ini agar lebih jelas.efek lipatan

lipatan kertas

efek lipatan kertasBagaimana cara membuat efek lipatan kertas dengan kode css diatas?lipatan kertas
  1. Masuk Blogger
  2. Klik Rancangan --> Edit Html --> Centang Expand Widget
  3. Kemudian Cari kode ]]></b:skin>
  4. kemudian letakkan kode berikut diatasnya :
    .note{
    position:relative;
    width:30%;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
    }

    .note:before{
    content:&quot;&quot;;
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15;
    background:#658E15;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    display:block; width:0; /* Firefox 3.0 damage limitation */
    }

    /*
    --------------------------
    &quot;rounded&quot;
    --------------------------
    */

    .note.rounded{
    -webkit-border-radius:5px 0 5px 5px;
    -moz-border-radius:5px 0 5px 5px;
    border-radius:5px 0 5px 5px;
    }

    .note.rounded:before{
    border-width:8px;
    border-color:#fff #fff transparent transparent;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
    }
  5. Kemudian Simpan Template.
    Untuk menggunakannya silahkan letakkan kode berikut pada postingan kamu :
    <div class='note'>
    letakkan konten atau kode anda disini
    </div>
    Dan jika rounded corner letakkan kode dibawah:
    <div class='note rounded'>
    letakkan konten atau kode anda disini
    </div>

No comments:

Post a Comment

 

Sponsor