Advertise

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.

Selanjutnya untuk memanggilnya gunakan kode html seperti ini :

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.

19 komentar:

  1. waduh gabisa liat tampilannya kayak apa. onlen di hape neh bos..

    BalasHapus
  2. Rawins :: ia um samplenya tidak di JPG jagi mungkin tdk trlht kalu pk ponsel. ini jg tidak smua browser terlihat. biasalah namanya jg CSS3. hehehe.

    BalasHapus
  3. sori ya OOT menurut agan-agan,
    blog ane pake komen pihak ketiga gitu bagus enggak ?

    BalasHapus
  4. dicky renaldy :: Ow iya kotak koment si brader pake pihak k 3 ya...kalau menurut saya si bagus alnya tampilanya lebih profesional.

    BalasHapus
  5. Siang sahabat. Jujur ya, saya belum mudeng. Contohnya yang mana to??
    O ya, kalau mo bedakan komen pengunjung dengan pemilik blog gimana ya? saya pakai template minima. dah pernah tak coba,tapi gagal :-((
    Makasih sebelumnya sahabat..

    BalasHapus
  6. tentang balon percakapan ya, kalo dibikin otomatis tanpa harus mengedit satu persatu markup yang akan diberi speak buble (misal pake jquey) apa bisa juga gan???

    BalasHapus
  7. mengatur posisi bagian yg lancip tuh gmn bro ?? heheee

    BalasHapus
  8. belum ngerti css3 nih,, ajarin dong :)

    BalasHapus
  9. Mantap bro, terus berkarya...

    BalasHapus
  10. Kalo di Ie tampilannya suka beda ya

    BalasHapus
  11. makasih sob atas semua trik blogger-nya..ditunggu nih yg lain, hehehe

    BalasHapus
  12. bgus juga nih jadinya, mksih yah!!

    BalasHapus
  13. Comment balik bro. Sebelumnya terimakasih telah comment di blog flodesta. Saya belum ngerti tentang css3. Kalau berkenan saya boleh belajar tentang css3 disini. Salam sukses

    BalasHapus
  14. Info menarik.. Keep blogging gan... Salam dr Tanah Melayu

    BalasHapus