Membuat Efek Lipatan Kertas CSS di Blog

Cara Membuat Efek Lipatan Kertas CSS di Blog - Blogging With Me kali ini akan membahas yang namanya CSS, ni tutor dari tetangga sebelah,saya cuma pengen share ke teman teman supaya bisa lebih bermanfaat.

Pernah melihat lipatan kertas kan ?? itu lho yang dipojoknya dilipat. belum terbayang juga ya ? liat demo berikut ya kakak :

Ini merupakan contoh dari Efek lipatan menggunakan Css yang bersumber dari nicolasgallagher.

Ini juga merupakan salah satu demo lipatan CSS tapi menggunakan rounded corner

Langkah Kerja :

Masuk Blogger
Klik Rancangan --> Edit Html --> Centang Expand Widget
Kemudian Cari kode ]]></b:skin>  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:"";
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 */
}

/*
--------------------------
"rounded"
--------------------------
*/

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

Kemudian Simpan Template.

Untuk menggunakannya silahkan lihat cara berikut :



    <div class='note'>
    letakkan konten atau kode anda disini
    </div>

    <div class='note rounded'>
    letakkan konten atau kode anda disini
    </div>
Jika ingin yang biasa bisa pake kode yang pertama, jika anda ingin memakai rounded corner bisa pake yang nomor dua.