GO Blog

Posting ini akan membahas teknik yang digunakan untuk menciptakan efek sudut yang dilipat. lihat gambar dibawah ini, yaitu hasil efek dari menggunakan pseudo-elemen.
Tidak rumit untuk membuat efek kotak seperti diatas, Setiap elemen akan bisa menerapkan dan tidak ada kebutuhan untuk markup tambahan karena Ini hanya sebuah kotak berwarna sederhana. Browser tanpa dukungan untuk pseudo-elemen, seperti IE6 dan IE7, pun mampu menampilkan ini.

Jika anda sudah membuat/mempunyai kotak warna untuk kontent tulisan tertentu, anda hanya perlu menambahkan position: relative untuk posisi pseudo-element pada css. Misalkan seperti berikut:

.catatan {
   position:relative;
   width:90%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
}

Untuk efek yang lipatan

Efek lipatan dibuat dari pseudo-element yang diposisikan di sudut atas kotak. pseudo-element tidak memiliki lebar atau tinggi namun diberi batasan tebal dan variasi lipatan pada sudut sangat bervasiasi.

Dalam contoh ini, batas atas dan kanan diatur ke warna yang sesuai dengan warna latar belakang orange tua. Batas kiri dan bawah kemudian diberi warna yang sedikit lebih gelap atau lebih terang dari warna latar belakang.

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

Kode css adalah semua yang dibutuhkan untuk membuat efek sederhana untuk efek sudut yang dilipat. untuk browser firefox anda memerlukan tambahan beberapa css agar efek ini muncul, karena firefox tidak mendukung untuk posisi pseudo-elemen. ini agar efek ini juga tampil lebih rapi di firefox berikut ini tambahannya:

.catatan:before {
   ... css efek lipatan ...
   display:block;
   width:0;
}

Menambahkan bayangan halus

Munculnya efek lipatan dapat sedikit ditingkatkan dengan menambahkan box-shadow (untuk browser yang mendukungnya) pada pseudo-element. Mengatur overflow: hidden pada catatan kotak yang diberi efek akan membantu menyembunyikan bagian-bagian dari bayangan yang akan mengganggu efek lipatan sudut. perhatikan css dibawah ini:

.catatan:before {
   ... css efek lipatan ...
   -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);
}

Sudut membulat { Rounded corners }

Hal ini juga relatif sederhana untuk membuat efek dengan sudut membulat jika diinginkan. lihat css dibawah ini:

.catatan.bulatan:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   background:#658E15;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
   display:block; width:0;
}

Kode akhir

Berikut ini adalah semua CSS yang dibutuhkan untuk membuat efek lipatan sudut yang sederhana dengan bayangan halus dari elemen HTML tunggal. Untuk memasukkan varian dengan sudut membulat pada objek element "catatan" dapat dilakukan dengan modifikasi seperti yang telah saya jelaskan sebelumnya. berikut cssnya:

.catatan {
   position:relative;
   width:90%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
   overflow:hidden;
}

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

.catatan.bulatan {
   -webkit-border-radius:5px 0 5px 5px;
   -moz-border-radius:5px 0 5px 5px;
   border-radius:5px 0 5px 5px;
}

.catatan.bulatan: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;
}

Dan untuk menerapkannya dalam HTML cukup gunakam kode berikut:

<div class="catatan">
    <p>Tek anda disini</p>
</div>

untuk yang memiliki sudut bulatan gunakan kode dibawah ini:

<div class="catatan bulatan">
    <p>Teks anda disini</p>
</div>

Silahkan anda ubah css diatas sesuka anda, jika semuanya belum sesuai keinginan.

Begitu saja dan semoga bermanfaat....