Sharing Mie

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="balon1" style="background-color: #af7c97; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Georgia, Times, serif; font-size: 12px; height: auto; margin: 0px auto 50px; padding: 20px 30px; position: relative; text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px; vertical-align: baseline; width: 200px;">
<div style="border: 0px; padding: 0px; vertical-align: baseline;">
Menciptakan sebuah boks dengan efekrounded 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?</div>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Untuk bisa memahami cara membuat efek balon kata seperti ilustrasi di atas, setidaknya Anda harus memahami empat hal di bawah ini:</div>
<ul style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 0px 1.7em 1.5em; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/css-triangle-teknik-pembuatan-dimensi.html" style="color: #225588; text-decoration: initial;" title="CSS Triagle">CSS Triangle</a></li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/09/css-pseudo-element-tahap-pertama.html" style="color: #225588; text-decoration: initial;" title="CSS Pseudo Element Tahap Pertama">CSS Pseudo Element Tahap Pertama</a></li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/10/css-position.html" style="color: #225588; text-decoration: initial;" title="CSS Position">CSS Position</a></li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/09/css-border-radius-membuat-efek-tumpul.html" style="color: #225588; text-decoration: initial;" title="CSS Border Radius">CSS Border Radius</a></li>
</ul>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Kunci Pertama</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Kunci pertama terletak pada CSS Pseudo Element <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Abefore" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:before</a></code> dan <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Aafter" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:after</a></code>. 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 <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Abefore" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:before</a></code> atau <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Aafter" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:after</a></code>. 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 <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Abefore" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:before</a></code> dan jika Anda ingin menciptakan elemen palsu di sebelah kanan atau bawah elemen asli gunakanlah <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Aafter" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:after</a></code>.</div>
<figure class="separator center" style="background-color: #cfdbec; border: 1px solid rgb(165, 165, 165); color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px auto 1.7em; padding: 10px; text-align: center; vertical-align: baseline;"><img alt="CSS Pseudo Element untuk menciptakan efek panah" height="244" src="http://3.bp.blogspot.com/-yEK-tWYE31A/TsxvhvG9j-I/AAAAAAAABXQ/YUJLqE5rKIE/s1600/buuble-before-css.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; border: none; box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; display: block; height: auto; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" width="344" /><figcaption style="border: 0px; font-family: Arial, sans-serif; font-size: 12px; font-style: italic; margin: 10px 0px 0px; padding: 0px; vertical-align: baseline;">CSS Pseudo Element untuk menciptakan efek panah</figcaption></figure><h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Kunci ke Dua</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Efek segitiga dibuat dengan teknik CSS Triangle. Anda bisa mempelajarinya <a href="http://www.dte.web.id/2011/11/css-triangle-teknik-pembuatan-dimensi.html" style="color: #225588; text-decoration: initial;" title="Efek Segitiga dengan CSS">di sini</a>.</div>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Prinsip Peletakan Posisi</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Posisi absolut pada elemen akan membuat elemen berpindah tempat berdasarkan koordinat layar, untuk memindahkan koordinat posisi elemen palsu menjadi berdasarkan pada elemen asli, tambahkanlah <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=position%3Arelative" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">position:relative</a></code> pada elemen asli:</div>
<pre data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.balon-kata {
 position:relative;
}</code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Nah, kali ini kita akan berhadapan dengan koordinat <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=top" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">top</a></code>, <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=right" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">right</a></code>, <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=bottom" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">bottom</a></code> dan <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=left" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">left</a></code> 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 <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=top" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">top</a></code> sebesar<code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=100%25" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">100%</a></code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=left" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">left</a></code> dan <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=right" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">right</a></code> bisa disesuaikan sendiri:</div>
<figure class="separator center" style="background-color: #cfdbec; border: 1px solid rgb(165, 165, 165); color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px auto 1.7em; padding: 10px; text-align: center; vertical-align: baseline;"><img alt="Nilai top sebesar 100%" height="246" src="http://1.bp.blogspot.com/-glk--jq3r8M/Tsxz7cXzMZI/AAAAAAAABXY/_h3HAAQ-XHA/s1600/speech-buuble-css.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; border: none; box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; display: block; height: auto; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" width="359" /><figcaption style="border: 0px; font-family: Arial, sans-serif; font-size: 12px; font-style: italic; margin: 10px 0px 0px; padding: 0px; vertical-align: baseline;">Nilai top sebesar 100%</figcaption></figure>Kenapa harus <code style="background-color: white; border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; line-height: 17.649999618530273px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=100%25" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">100%</a></code>? Oke, kita coba ganti nilai <code style="background-color: white; border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; line-height: 17.649999618530273px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=top" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">top</a></code> menjadi <code style="background-color: white; border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; line-height: 17.649999618530273px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=50%25" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">50%</a></code> atau gunakanlah satuan piksel. maka hasilnya kurang lebih akan tampak seperti ini:<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
</div>
<figure class="separator center" style="background-color: #cfdbec; border: 1px solid rgb(165, 165, 165); color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px auto 1.7em; padding: 10px; text-align: center; vertical-align: baseline;"><img alt="Nilai top sebesar 50%" height="244" src="http://4.bp.blogspot.com/-gy2kkiwWjF0/Tsx02WDS3pI/AAAAAAAABXg/kp4oZlka_LU/s1600/buuble-before.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; border: none; box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; display: block; height: auto; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" width="344" /><figcaption style="border: 0px; font-family: Arial, sans-serif; font-size: 12px; font-style: italic; margin: 10px 0px 0px; padding: 0px; vertical-align: baseline;">Nilai top sebesar 50%</figcaption></figure><div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
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:</div>
<ul style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 0px 1.7em 1.5em; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di samping kiri elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">right</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">top</code> atau<code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">bottom</code> bisa disesuaikan sendiri.</li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di samping kanan elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">left</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">top</code> atau<code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">bottom</code> bisa disesuaikan sendiri.</li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di atas elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">bottom</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">left</code> atau <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">right</code>bisa disesuaikan sendiri.</li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di bawah elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">top</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">left</code> atau <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">right</code> bisa disesuaikan sendiri.</li>
</ul>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Produk Akhir</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
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:</div>
<div class="block" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; background-color: #cccccc; border: 2px solid rgb(136, 136, 136); box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 14px 1.7em; padding: 6px 10px; vertical-align: baseline;">
<div class="balon-kata top" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.top</div>
 <div class="balon-kata right" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.right</div>
 <div class="balon-kata bottom" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.bottom</div>
 <div class="balon-kata left" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.left</div>
</div>
<pre class="numbered" data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-1" style="color: #225588; text-decoration: initial;">1</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-2" style="color: #225588; text-decoration: initial;">2</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-3" style="color: #225588; text-decoration: initial;">3</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-4" style="color: #225588; text-decoration: initial;">4</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-5" style="color: #225588; text-decoration: initial;">5</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-6" style="color: #225588; text-decoration: initial;">6</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-7" style="color: #225588; text-decoration: initial;">7</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-8" style="color: #225588; text-decoration: initial;">8</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-9" style="color: #225588; text-decoration: initial;">9</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-10" style="color: #225588; text-decoration: initial;">10</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-11" style="color: #225588; text-decoration: initial;">11</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-12" style="color: #225588; text-decoration: initial;">12</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-13" style="color: #225588; text-decoration: initial;">13</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-14" style="color: #225588; text-decoration: initial;">14</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-15" style="color: #225588; text-decoration: initial;">15</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-16" style="color: #225588; text-decoration: initial;">16</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-17" style="color: #225588; text-decoration: initial;">17</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-18" style="color: #225588; text-decoration: initial;">18</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-19" style="color: #225588; text-decoration: initial;">19</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-20" style="color: #225588; text-decoration: initial;">20</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-21" style="color: #225588; text-decoration: initial;">21</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-22" style="color: #225588; text-decoration: initial;">22</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-23" style="color: #225588; text-decoration: initial;">23</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-24" style="color: #225588; text-decoration: initial;">24</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-25" style="color: #225588; text-decoration: initial;">25</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-26" style="color: #225588; text-decoration: initial;">26</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-27" style="color: #225588; text-decoration: initial;">27</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-28" style="color: #225588; text-decoration: initial;">28</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-29" style="color: #225588; text-decoration: initial;">29</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-30" style="color: #225588; text-decoration: initial;">30</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-31" style="color: #225588; text-decoration: initial;">31</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-32" style="color: #225588; text-decoration: initial;">32</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-33" style="color: #225588; text-decoration: initial;">33</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-34" style="color: #225588; text-decoration: initial;">34</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-35" style="color: #225588; text-decoration: initial;">35</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-36" style="color: #225588; text-decoration: initial;">36</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-37" style="color: #225588; text-decoration: initial;">37</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-38" style="color: #225588; text-decoration: initial;">38</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-39" style="color: #225588; text-decoration: initial;">39</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-40" style="color: #225588; text-decoration: initial;">40</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-41" style="color: #225588; text-decoration: initial;">41</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-42" style="color: #225588; text-decoration: initial;">42</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-43" style="color: #225588; text-decoration: initial;">43</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-44" style="color: #225588; text-decoration: initial;">44</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-45" style="color: #225588; text-decoration: initial;">45</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-46" style="color: #225588; text-decoration: initial;">46</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-47" style="color: #225588; text-decoration: initial;">47</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-48" style="color: #225588; text-decoration: initial;">48</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-49" style="color: #225588; text-decoration: initial;">49</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-50" style="color: #225588; text-decoration: initial;">50</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-51" style="color: #225588; text-decoration: initial;">51</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-52" style="color: #225588; text-decoration: initial;">52</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-53" style="color: #225588; text-decoration: initial;">53</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-54" style="color: #225588; text-decoration: initial;">54</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-55" style="color: #225588; text-decoration: initial;">55</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-56" style="color: #225588; text-decoration: initial;">56</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-57" style="color: #225588; text-decoration: initial;">57</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-58" style="color: #225588; text-decoration: initial;">58</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-59" style="color: #225588; text-decoration: initial;">59</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-60" style="color: #225588; text-decoration: initial;">60</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-61" style="color: #225588; text-decoration: initial;">61</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-62" style="color: #225588; text-decoration: initial;">62</a><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;">.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.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;
}</code></pre>
<pre class="numbered" data-codetype="HTML" style="background-color: #002b36; border-left-color: rgb(69, 132, 190); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-1" style="color: #225588; text-decoration: initial;">1</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-2" style="color: #225588; text-decoration: initial;">2</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-3" style="color: #225588; text-decoration: initial;">3</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-4" style="color: #225588; text-decoration: initial;">4</a><code class="xml" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="balon-kata top"> ... </div>
<div class="balon-kata right"> ... </div>
<div class="balon-kata bottom"> ... </div>
<div class="balon-kata left"> ... </div></code></pre>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Ada Alternatif Lain? Yang Lebih Kreatif?</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Cobalah untuk mewarnai dua sisi border atau gunakanlah CSS Transformasi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=skew()" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">skew()</a></code> untuk membuat efeknya menjadi lebih nyata:</div>
<div class="block" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; background-color: #cccccc; border: 2px solid rgb(136, 136, 136); box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 14px 1.7em; padding: 6px 10px; vertical-align: baseline;">
<div class="balon-kata bottom dua" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
Mewarnai dua sisi border (top dan left)</div>
</div>
<pre class="numbered" data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-1" style="color: #225588; text-decoration: initial;">1</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-2" style="color: #225588; text-decoration: initial;">2</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-3" style="color: #225588; text-decoration: initial;">3</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-4" style="color: #225588; text-decoration: initial;">4</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-5" style="color: #225588; text-decoration: initial;">5</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-6" style="color: #225588; text-decoration: initial;">6</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-7" style="color: #225588; text-decoration: initial;">7</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-8" style="color: #225588; text-decoration: initial;">8</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-9" style="color: #225588; text-decoration: initial;">9</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-10" style="color: #225588; text-decoration: initial;">10</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-11" style="color: #225588; text-decoration: initial;">11</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-12" style="color: #225588; text-decoration: initial;">12</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-13" style="color: #225588; text-decoration: initial;">13</a><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;">.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;
}</code></pre>
<div class="block" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; background-color: #cccccc; border: 2px solid rgb(136, 136, 136); box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 14px 1.7em; padding: 6px 10px; vertical-align: baseline;">
<div class="balon-kata bottom dua ekstra" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
Mendistorsi dimensi elemen palsu .balon-kata.bottom:after dengan CSS Transformasi skew()</div>
</div>
<pre class="numbered" data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-1" style="color: #225588; text-decoration: initial;">1</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-2" style="color: #225588; text-decoration: initial;">2</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-3" style="color: #225588; text-decoration: initial;">3</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-4" style="color: #225588; text-decoration: initial;">4</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-5" style="color: #225588; text-decoration: initial;">5</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-6" style="color: #225588; text-decoration: initial;">6</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-7" style="color: #225588; text-decoration: initial;">7</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-8" style="color: #225588; text-decoration: initial;">8</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-9" style="color: #225588; text-decoration: initial;">9</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-10" style="color: #225588; text-decoration: initial;">10</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-11" style="color: #225588; text-decoration: initial;">11</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-12" style="color: #225588; text-decoration: initial;">12</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-13" style="color: #225588; text-decoration: initial;">13</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-14" style="color: #225588; text-decoration: initial;">14</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-15" style="color: #225588; text-decoration: initial;">15</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-16" style="color: #225588; text-decoration: initial;">16</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-17" style="color: #225588; text-decoration: initial;">17</a><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-18" style="color: #225588; text-decoration: initial;">18</a><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;">.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;
}</code><div>

</div>
<div>

</div>
<div>

</div>
<div>

</div>
<div>
</div>
</pre>
 
<a href="http://www.dte.web.id/" target="_blank">CopyRight By DTE</a> 
 </div>

Menciptakan sebuah boks dengan efek rounded corner seperti ini sangat mudah dilakukan dengan cara menerapkan CSS Border Radius. Tapi ba...

Sharing Mie

Cara Membuat Efek Balon Kata dengan CSS

Entri Populer

Arsip Blog