Pada sesi kali ini saya akan melanjutkan penjelasan tentang cara membuat speech bubbles di CSS3 seperti twitter part-2. Dan pada pejelasan di sini saya akan langsung lanjutkan dari sesi sebelumnya. Sampai di sini, teman-teman perlu untuk membuat panah kecil, dan dapat memodifikasi CSS tersebut untuk mengubah posisi / bentuk panah .

Berikut Kode nya :

Sekarang teman-teman sudah selesai dengan CSS nya ! sekarang teman-teman pindah ke bagian HTML yang agak pendek, berikut kode nya :

Jadi untuk memodifikasi nya supaya ini bekerja, berikut beberapa hal yang perlu teman-teman diketahui:

– Teman-teman harus memperhatikan tinggi dan lebar di dekat bagian atas, dan akan lebih baik mengaturnya sesuai dengan ukuran yang akan di gunakan.

– Untuk mengubah warna tweets, teman-teman dapat memodifikasi (color: rgb (30,30,30); ), teman-teman tidak perlu menggunakan nilai rgb untuk ini, bisa menggunakan nilai hex seperti #00ee22 jika mau. Seperti contoh di bawah ini :

Untuk kode akhirnya yang lengkap seperti kode di bawah ini :

Sampai di sini penjelasan saya mengenai cara membuat speech bubbles di CSS3 seperti twitter, semoga bermanfaat.

WhatsApp chat