GO Blog

Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada.

Efek ini dapat tampil dengan baik pada mesin browser Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Peningkatan progresif dengan pseudo-elemen

Dengan HTML sederhana seperti <div>Konten</ div> atau <p>Konten</p> Anda dapat menghasilkan efek gelembung seperti berikut ini:



Dengan menerapkan CSS3 properti seperti border-radius dan sejenisnya Anda dapat menghasilkan bentuk yang lebih kompleks dan orientasi. berikut ini adalah css contoh dasar:

.efek-gelembung {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* efek gelembung */
.efek-gelembung:after {
   content:"";
   display:block; /* mempaiki tampilan pada FF3.0 */
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}

untuk menggunakan css diatas pada html, silahkan gunakan kode dibawah ini:

<div class="efek-gelembung">

/..........  Tulisan anda disini   ............./

</div>