Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat

Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat. Trik ini bekerja dengan sangat baik di semua browser modern dan sangat cocok untuk desain dengan latar belakang warna yang sederhana.

Trik sederhana ini ditulis oleh : Nicolas Gallagher pemilik blog http://nicolasgallagher.com.

Mebuatnya Tidaklah rumit. Setiap elemen di desain dengan CSS dan tidak perlu menambahkan image/gambat atau markup tambahan. Bahkan Browser tanpa dukungan pseudo-elemen, seperti IE6 dan IE7, akan bisa dengan baik menampilkan trik ini.

Untuk Membuat Kotak Sederhana Dengan CSS ini anda anda hanya perlu menambahkan code CSS berikut ke dalam file Style.css di template wordpress anda. Dan untuk blogger, anda tambahkan saja pada bagian Tumpukan CSS sebelum ]]></b:skin>.

Code CSS untuk Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat, lengkapnya:

.note {
  position: relative;
  width: 90%;
  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);
  /* Firefox 3.0 damage limitation */
  display: block; width: 0;
}

.note.rounded {
  -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;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

Cara Mengganti Warna Dasar dan Lipatan

Bila anda lihat pada Demo ada empat warna, untuk mengganti warna ini anda hanya perlu mengubah code warna pada bagian:

Untuk Warna Dasar (ganti code yang berwarna merah)

dan Untuk Warna Lipatan (ganti code yang berwarna merah)

Cara Pemakaian / Penerapan

untuk pemakaiannya dalam postingan di blog anda, pada bagian awal teks yang akan di kasih Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat, tambahkan code <div class=”note”> dan pada bagian akhir teks: </div>
Contoh:

Hasil Penampakan di Browser:

Catatan :
Untuk wordpress saat menambahkannya code di atas ubah dulu mode post editing ke TEXT

dan untuk Blogger ke mode HTML

Okeh itu saja dan semoga bermanfaat, salam Blogger.