Pada kesempatan kali ini saya akan menjelaskan bagaimana cara membuat speech bubbles di CSS3 seperti twitter. Teman-teman akan melihat ini di semua jenis situs web dan sangat berguna dalam memberikan desain web teman-teman untuk tampilan yang lebih halus.

Berikut adalah contoh gambar twitter speech bubbles di bawah ini:

cara membuat speech bubble di css

Catatan: Ini telah diuji dan bekerja di browser terbaru sampai saat ini seperti (Firefox 17.01, IE9, dll.) Jika karena alasan apa pun IE memberikan kesesuaian saat mencobanya di peramban itu secara lokal, gunakan alternatif seperti Firefox sampai teman-teman siap untuk menerapkan kode ke situs web, itu akan bekerja dengan baik, dan jangan lupa untuk menggunakan DOCTYPE (terutama di IE. Meskipun teman-teman tidak perlu menjadi master di CSS untuk masalah ini, saya asumsi kan bahwa teman-teman memiliki pemahaman yang baik tentang bagaimana segala sesuatu nya bekerja, dan semakin banyak CSS yang teman-teman tau, semakin teman-teman bisa membuat cetakan ini supaya sesuai dengan desain teman-teman. Untuk memulai nyha, teman-teman bisa ambil gambar terlebih dahulu yang ingin di gunakan untuk diletakkan di bawah ucapan bubbles. Saya baru saja melakukan pencarian di google dengan cepat untuk burung twitter. Dimensinya adalah 80×80. Untuk memulai dengan CSS, mari buat ID yang akan kita gunakan sebagai wadah untuk gelembung nya, berikut kodenya.

Baiklah, ini penting karena akan membuat semuanya di posisikan di tempat yang seharusnya. Dapatkah teman-teman bermain dengan ini agar sesuai dengan desain situs web yang di buat ?

Iya nih. Tapi jika teman-teman menghapus property ( position: relatif; ), semuanya akan sedikit jelek.
Selanjutnya, saya ingin membuat kelas CSS utama yang akan di gunakan untuk memberi blockquote, berikut kode nya.

Selanjutnya bagaimana teman-teman dapat menempatkan gambar menggunakan CSS, berikut kode nya :

Note: untuk isi url (file.ext); Akan menjadi gambar yang ingin di gunakan, seperti contoh yang saya gunakan adalah burung twitter. Saya juga menggunakan posisi mutlak dalam hal ini. Teman-teman dapat bermain dengan nomor untuk memindahkan gambar jika ingin mengubah lokasi gambar. Sleain itu teman-teman dapat menggunakan angka negatif untuk penentuan posisi seperti -220px.

Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat speech bubbles di CSS3 seperti twitter part-2, di sesi berikutnya, semoga bermanfaat.

WhatsApp chat