Halo teman-teman. Pada kesempatan kali ini saya akan share cara membuat bubbles talk dengan CSS3 tanpa gambar ataupun javascript. Caranya cukup simple dan CSS yang diperlukan juga tidak terlalu banyak. Oke kita langsung buka saja text editor yang akan kita pakai.

  1. Kita hanya menggunakan tag P dalam kasus ini.

<p class=”bubble thought”>SitePoint Rocks!</p>

 

  1. Lalu berikut CSS untuk class bubble

p.bubble

{

position: relative;

width: 200px;

height: 100px;

text-align: center;

line-height: 100px;

margin: 60px auto;

background-color: #fff;

border: 8px solid #666;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

border-radius: 30px;

-webkit-box-shadow: 2px 2px 4px #888;

-moz-box-shadow: 2px 2px 4px #888;

box-shadow: 2px 2px 4px #888;

}

 

p.bubble:before, p.bubble:after

{

content: ‘ ‘;

position: absolute;

width: 0;

height: 0;

}

 

 

  1. Setelah itu kita buat untuk class thought

p.thought

{

width: 130px;

line-height: 100px;

-webkit-border-radius: 108px;

-moz-border-radius: 108px;

border-radius: 108px;

}

 

p.thought:before, p.thought:after

{

left: 10px;

top: 70px;

width: 40px;

height: 40px;

background-color: #fff;

border: 8px solid #666;

-webkit-border-radius: 28px;

-moz-border-radius: 28px;

border-radius: 28px;

}

 

p.thought:after

{

width: 20px;

height: 20px;

left: 5px;

top: 100px;

-webkit-border-radius: 18px;

-moz-border-radius: 18px;

border-radius: 18px;

}

 

  1. Kemudian kita save dan coba buka di browsernya kira-kira hasilnya seperti ini.

Membuat-bubbles-talk-sederhana-dengan-CSS3-05012015-fachrul