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.

Komentar

Rawins mengatakan…
waduh gabisa liat tampilannya kayak apa. onlen di hape neh bos..
Chugy mengatakan…
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.
Dicky Renaldy mengatakan…
sori ya OOT menurut agan-agan,
blog ane pake komen pihak ketiga gitu bagus enggak ?
Chugy mengatakan…
dicky renaldy :: Ow iya kotak koment si brader pake pihak k 3 ya...kalau menurut saya si bagus alnya tampilanya lebih profesional.
Suparyanto mengatakan…
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..
Anonim mengatakan…
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???
Ladida Cafe mengatakan…
mengatur posisi bagian yg lancip tuh gmn bro ?? heheee
Muhaiminur mengatakan…
belum ngerti css3 nih,, ajarin dong :)
Tihang mengatakan…
Mantap bro, terus berkarya...
Blog Tutorial Blogger mengatakan…
info yang bagus kawan
makasih ya
fb mengatakan…
Kalo di Ie tampilannya suka beda ya
Horier mengatakan…
makasih sob atas semua trik blogger-nya..ditunggu nih yg lain, hehehe
happy father day mengatakan…
bgus juga nih jadinya, mksih yah!!
Ndkshd mengatakan…
keren cuy, belom nyoba nih
Masbro mengatakan…
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
Live Mag mengatakan…
css3 memang cool!
Syndicate OS mengatakan…
Demonya ngga ada sob ?
kelihatannya sih mudah
IQROZEN mengatakan…
Info menarik.. Keep blogging gan... Salam dr Tanah Melayu

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text