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

by - 10 January 2017 - Blogging Dan SEO, Script

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.

Membuat Kotak Sederhana Dengan CSS

Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat (Image : 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:

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)

.note:before {
content: “”;
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #658E15 #fff;
}

dan Untuk Warna Lipatan (ganti code yang berwarna merah)

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

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:

<div class=”note”>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>

Hasil Penampakan di Browser:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

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.

Artikel Blogging Dan SEO, Script - Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat, is Posted Under Tags: , , By pahompu | 4.5

MetroWorldHost

Leave a Response