Efek Page Fold/Lipatan Kertas Dengan CSS Di Blog

Efek Fold

DEMO

• DEMO KLIK DISINI

Efek Page Fold/Lipatan Kertas Dengan CSS Di Blog - Mungkin bagi anda
dengan niche tutorial blogging/ template pasti anda pernah membuat catatan untuk Pengunjung
Sebelum menggunakannya , tutorial ini sangat cocok bagi Anda , widget ini diberi nama
Efek page fold/lipatan kertas

Berikut Cara Pembuatannya :

1. Taruh CSS Berikut Diatas ]]></b:skin>

/*
--------------------------
Standar tampilan
--------------------------
*/

.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 */
}

/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan class "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;
}

2. Berikut HTML Untuk Diletakan Di Postingan Anda

<div class='note'>
     Konten di sini...
</div>

<div class='note rounded'>
     Konten di sini...
</div>

Perhatikan .., Letakan Kode Diatas Di HTML Bukan Compose