Efek Balon Kata Dengan Css

Published by Concept Phone Sabtu, 01 September 2018

Menciptakan sebuah boks dengan imbas rounded corner ibarat ini sangat gampang dilakukan dengan cara menerapkan CSS Border Radius. Tapi bagaimana cara Saya membuat imbas panah kecil di bawah balon kata ini?

Untuk dapat memahami cara membuat imbas balon kata ibarat ilustrasi di atas, setidaknya Anda harus memahami empat hal di bawah ini:

• CSS Triangle
• CSS Pseudo Element Tahap Pertama
• CSS Position
• CSS Border Radius

Kunci Pertama

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

di sini.

Prinsip Peletakan Posisi

Posisi adikara pada elemen akan membuat elemen berpindah daerah menurut koordinat layar, untuk memindahkan koordinat posisi elemen palsu menjadi menurut 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 ibarat halnya CSS Posisi Absolute pada umumnya.
Kita mulai dengan syarat pertama: Jika Anda ingin meletakkan elemen palsu sempurna di bawah elemen asli, tuliskan nilai top sebesar 100%. Nilai left dan right dapat diubahsuaikan sendiri:

Nilai top sebesar 100%

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

Nilai top sebesar 50%

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

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

Produk Akhir

Di atas Saya hanya memperlihatkan prinsip-prinsip peletakan dan pembuatan imbas panahnya saja, di bawah ini Saya akan memperlihatkan aba-aba sumber untuk dapat 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

• Dynamic Drive - CSS Triangle Arrow DIVs
• w3Schools - CSS 2D Transform

Sumber https://www.dte.web.id/