Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Efek Balon Kata dengan CSS

Menciptakan sebuah boks dengan efek rounded corner seperti ini sangat mudah dilakukan dengan cara menerapkan CSS Border Radius. Tapi bagaimana cara Saya menciptakan efek panah kecil di bawah balon kata ini?

Untuk bisa memahami cara membuat efek balon kata seperti ilustrasi di atas, setidaknya Anda harus memahami empat hal di bawah ini:

Kunci Pertama

Kunci pertama terletak pada CSS Pseudo Element :before dan :after. Bentuk segitiga yang Saya buat adalah sebuah elemen palsu yang diciptakan dari CSS Pseudo Element. Di sini Saya tidak mementingkan apakah Anda akan membuat elemen palsu tersebut menggunakan :before atau :after. Saya rasa semuanya akan sama saja, karena di sini kita akan berhadapan dengan posisi absolut. Hanya saja Saya memiliki beberapa saran yang ideal: Jika Anda ingin menciptakan elemen palsu di sebelah kiri atau atas elemen asli gunakanlah :before dan jika Anda ingin menciptakan elemen palsu di sebelah kanan atau bawah elemen asli gunakanlah :after.

CSS Pseudo Element untuk menciptakan efek panah
CSS Pseudo Element untuk menciptakan efek panah

Kunci ke Dua

Efek segitiga dibuat dengan teknik CSS Triangle. Anda bisa mempelajarinya di sini.

Prinsip Peletakan Posisi

Posisi absolut pada elemen akan membuat elemen berpindah tempat berdasarkan koordinat layar, untuk memindahkan koordinat posisi elemen palsu menjadi berdasarkan pada elemen asli, tambahkanlah position:relative pada elemen asli:

.balon-kata {
  position:relative;
}

Nah, kali ini kita akan berhadapan dengan koordinat top, right, bottom dan left seperti halnya CSS Posisi Absolute pada umumnya.
Kita mulai dengan syarat pertama: Jika Anda ingin meletakkan elemen palsu tepat di bawah elemen asli, tuliskan nilai top sebesar 100%. Nilai left dan right bisa disesuaikan sendiri:

Nilai top sebesar 100%
Nilai top sebesar 100%
Kenapa harus 100%?
Oke, kita coba ganti nilai top menjadi 50% atau gunakanlah satuan piksel. maka hasilnya kurang lebih akan tampak seperti ini:

Nilai top sebesar 50%
Nilai top sebesar 50%

Saya yakin sampai di sini Anda sudah mulai mengerti. Gunakanlah imajinasi. Sekarang kita masuki syarat ke dua. Ini hanyalah kesimpulan akhir dari logika di atas:

  • Jika Anda ingin menempatkan elemen palsu tepat di samping kiri elemen asli, atur nilai right menjadi 100%. Nilai top atau bottom bisa disesuaikan sendiri.
  • Jika Anda ingin menempatkan elemen palsu tepat di samping kanan elemen asli, atur nilai left menjadi 100%. Nilai top atau bottom bisa disesuaikan sendiri.
  • Jika Anda ingin menempatkan elemen palsu tepat di atas elemen asli, atur nilai bottom menjadi 100%. Nilai left atau right bisa disesuaikan sendiri.
  • Jika Anda ingin menempatkan elemen palsu tepat di bawah elemen asli, atur nilai top menjadi 100%. Nilai left atau right bisa disesuaikan sendiri.

Produk Akhir

Di atas Saya hanya memberikan prinsip-prinsip peletakan dan pembuatan efek panahnya saja, di bawah ini Saya akan memberikan kode sumber untuk bisa dipelajari lebih lanjut:

.balon-kata.top

.balon-kata.right

.balon-kata.bottom

.balon-kata.left
.balon-kata {
  background:black;
  position:relative;
  padding:15px;
  color:white;
  font:normal 16px Calibri,Arial,Sans-Serif;
  width:300px;
  height:auto;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.balon-kata.top:before {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  bottom:100%;
  left:20px;
  border-width:10px;
  border-style:solid;
  border-color:transparent transparent black transparent;
  display:block;
}

.balon-kata.right:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  left:100%;
  top:20px;
  border-width:10px;
  border-style:solid;
  border-color:transparent transparent transparent black;
}

.balon-kata.bottom:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:20px;
  border-width:10px;
  border-style:solid;
  border-color:black transparent transparent transparent;
  display:block;
}

.balon-kata.left:before {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  right:100%;
  top:20px;
  border-width:10px;
  border-style:solid;
  border-color:transparent black transparent transparent;
}
<div class="balon-kata top"> ... </div>
<div class="balon-kata right"> ... </div>
<div class="balon-kata bottom"> ... </div>
<div class="balon-kata left"> ... </div>

Ada Alternatif Lain? Yang Lebih Kreatif?

Cobalah untuk mewarnai dua sisi border atau gunakanlah CSS Transformasi skew() untuk membuat efeknya menjadi lebih nyata:

Mewarnai dua sisi border (top dan left)
.balon-kata.bottom:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:20px;
  border-width:10px;
  border-style:solid;
  /* mewarnai dua sisi border top dan left */
  border-color:black transparent transparent black;
  display:block;
}
Mendistorsi dimensi elemen palsu .balon-kata.bottom:after dengan CSS Transformasi skew()
.balon-kata.bottom:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:20px;
  border-width:10px;
  border-style:solid;
  border-color:black transparent transparent black;
  /* transformasi skew() */
  -webkit-transform:skew(-30deg, 0deg);
  -moz-transform:skew(-30deg, 0deg);
  -ms-transform:skew(-30deg, 0deg);
  -o-transform:skew(-30deg, 0deg);
  transform:skew(-30deg, 0deg);
  display:block;
}

Referensi Lain

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 16 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!