Membuat Speak Buble dengan CSS3

Selamat siang brader blogger semua kembali posting ni setelah sebelumnya memposting firefox versi 4 yang ternyata memiliki tampilan yang sedikit berbeda dari versi seblumnya. untuk kali ini ini saya akan memposting bukan seputar internet komputer melainkan seputar css dan blogger.

Seperti judul posting ini yaitu membuat Speak Buble dengan Css3. Speek buble ini merupakan tehnik permainan border dengan css. Dengan menggunakan Css Speak Buble dapat dibuat tanpa menggunakan image jadi ini akan lebih ringan dibuka di browser.

Langsung saja pada penerapan dan koding css-y.
Sebagai contoh saya membuat speak buble untuk teks area.
contohnya bisa dilihat dibawah ini.

Pertama kita buat kode CSS Speak Buble-y seperti ini.

.speakbuble {
position:relative; padding:30px; margin:3px 0; margin-top:1%; color:#000;
text-align:center; background:#CCC; font-weight:bold;
text-shadow:1px 1px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;}

.speakbuble:after {
content:"";
display:block; position:absolute;
bottom:-30px; left:10px; width:0; height:0;
border-width:0 40px 50px 0px;
border-style:solid;
border-color:transparent #CCC;}

.speakbuble + p {margin:2px 0 0 55px; font-weight:bold;}

Selanjutnya untuk memanggilnya gunakan kode html seperti ini :

<div class='speakbuble'>
<p>Ini Contoh Speak Buble Tulis dengan kata kata kamu disini....ini sebagai contoh saya oke Brad..</p></speakbuble>
<p>Speak Buble</p>

Cukup mudah bukan silahkan di custom sesuai selera blogger.
Untuk background bisa menggunakan background Gradient CSS3, Box shadow ataupun lain2nya biar lebih menarik. Selamat mencoba.