CSS Speech Bubble Comment Effect

CSS Speech Bubble Comment Effect
4 votes, 4.75 avg. rating (94% score)

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 :)

Jika Anda menyukai artikel ini silahkan tinggalkan komentar atau berlangganan RSS feed untuk mendapatkan update terbaru artikel dari kami.
CSS Speech Bubble Comment Effect
4 votes, 4.75 avg. rating (94% score)

pino

Seorang yang hobby dalam menjelajahi dunia internet, gemar bermain dengan program PHP dan sejenisnya. Sekarang bekerja sebagai tenaga pengajar di salah satu SMK di Lamongan.

You may also like...

6 Responses

  1. Irfan says:

    wihhh muantap om.. makasih yaa!!

  2. Ryan says:

    Ini leave replay comment nya mirip kaya i-trick ,,, wall-itrick hahaha

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

[+] kaskus emoticons nartzco