Membuat CSS Komik Chat Box tanpa Image

Haloo.. apa kabar? sudah lama saya tidak ngeblog dan baru bisa posting lagi sekarang, itupun karena kehilangan mood buat nyekripsi :p. Langsung saja kali ini saya coba posting tentang web desain dan CSS yaitu membuat komik chat box seperti di atas tanpa menggunakan gambar (image). Box seperti itu sering digunakan web-web modern seperti facebook, twitter, google, yahoo dll untuk chatting, tool tip dll juga.

Langkah pertama untuk membuatnya adalah dengan membuat elemen div sebanyak 4 buat dengan susunan sebagai berikut, dan beri nama atribut class disesuaikan pada contoh.

<div class="chat-body">	<!-- Kerangka utama -->
<div class="chat-text">	<!-- Tempat teks -->
Ini adalah teks chat 
</div>
<div class="arrow-border"></div> <!-- untuk border panah -->
<div class="arrow-background"></div> <!-- body panah -->
</div>

Kemudian beri CSS sebagai berikut, yang pertama untuk CSS kerangka chat-body, di sini bisa setting lebar dari komik chat box yang diinginkan, untuk tingginya bisa dikosongkan agar bisa otomatis memanjang ke bawah

.chat-body{
width:200px;
position:relative;
}

Kemudian beri CSS untuk div chat-text, setting border, warna background atau warna font dll kalau mau.

.chat-text{
border:1px #aaa solid;
bakground-color:white;
padding:10px;
}

Lanjut, kita buat segitiga panah bawahnya, ini trik rahasia buat segitiga dengan CSS tanpa Image. Rahasianya adalah memakai border pada div yang diset luasnya 0 dengan kelebaran yang berbeda-beda, kemudian beri warna berbeda-beda pula, warna sampingan bisanya diset transparant, untuk menghasilkan efek segitiga, untuk lebih jelasnya baca dari sumbernya langsung di sini.

Trik segitiga diterapkan pada div dengan class arrow-border yang digunakan sebagai segitiga border (yg digunakan sebagai border)

.arrow-border{	
position:absolute;
width:0px;
border-style:solid;

/* warna border dg urutan:  atas kanan bawah kiri */
/* warna atas sesuaikan dg warna border chat-text, disini pakai #aaa */
border-color:#aaa transparent transparent transparent;

/* tebal border dg urutan: atas kanan bawah kiri*/
border-width:10px 10px 0px 10px;	

margin-left:10px; /* posisi segitiga agar sedikit ke tengah */
}

Kemudian div satunya dgn class arrow-background digunakan untuk menimpa segitiga border (setting margin dengan nilai negatif) sehingga dua segitiga dengan warna yang berbeda tampak seperti segitiga ber-border.

CSSnya:

.arrow-background{
position:absolute;
width:0px;
border-style:solid;
/* warna atas sesuaikan dengan warna background chat box disini digunakan white */
border-color:white transparent transparent transparent;
/* ketebalan border sesuaikan dgn arrow-border */
border-width:10px 10px 0px 10px;
margin-left:10px;

/* sesuai ketebalan border */
margin-top:-1px; 
}

Sudah bisa terlihat hasilnya, namun untuk mempercantik bisa menambahkan round corner dan shadow, dengan menambah css pada chat-text menjadi:

.chat-text{
border:1px #aaa solid;
bakground-color:white;
padding:10px;

-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
-khtml-border-radius: 5px; /* Linux browsers */
border-radius: 5px; /* Opera 10.50, IE and CSS3 */

box-shadow:0px 0px 5px #aaa;
-moz-box-shadow:0px 0px 5px #aaa;
-webkit-box-shadow:0px 0px 5px #aaa;
}

IE6 tidak support warna transparant, sehingga panah akan terlihat jelek pada IE.

untuk mengatasinya ganti warna transparant dengan pink dan set chroma dengan menambah CSS pada arrow-border dan arrow-background sebagai berikut:

.arrow-border{
position:absolute;
width:0px;
border-style:solid;
border-color:#aaa transparent transparent transparent;
border-width:10px 10px 0px 10px;
margin-left:10px;

/* khusus IE IE */
_border-right-color:pink;
_border-left-color:pink;
_filter:chroma(color=pink);
}

Tambahkan sendiri CSSnya juga pada arrow-background.

Sayangnya IE tidak support round corner dan shadow box, jadi terlihat kurang cantik di IE, tapi apa boleh buat ;}