CSS

CSS Speech Bubble Comment Effect

Written by Fatoni

CSS Speech Bubble Comment Effect. Hai guys…! Kali ini tutorialweb.net mencoba untuk membuat sebuah tutorial tentang CSS, yaitu cara membuat Speech Bubble Comment dengan CSS.

Dan hasilnya akan nampak seperti di bawah ini:

css-bubble-speech

Oke, langsung aja dimulai.

Pertama siapkan dulu sebuah gambar untuk foto komentar, dan disini yang saya pakek foto kucing lagi maen game :).

Oke, selanjutnya buka editor Anda, dan buat sebuah file HTML yang kodenya seperti di bawah ini:

Jangan lupa simpan dengan nama index.html. Dan hasil dari kode di atas jika Anda buka di Browser hasilnya seperti di bawah ini:

css-bubble-speech-nocss

Nah, hasilnya masih jelek kan.. 🙂

Sekarang kita percantik dengan menambahkan kode CSS agar hasilnya seperti gambar yang paling atas tadi.

Yuk sekarang buat sebuah file CSS dan kode CSS seperti di bawah ini :

Jangan lupa simpan dengan nama style.css.

Jika sudah silahkan buka kembali file index.html dan lihat hasilnya 🙂

Oke, semoga bisa membantu 🙂

About the author

Fatoni

Programming is my hobby, not my job.

6 Comments

Leave a Comment