Jangan Mau Tersudut
Ada kaLanya kita membutuhkan sudut untuk mempertegas suatu bentuk, tapi ada kaLanya puLa kita ingin menghiLangkan sudut untuk memberi kesan haLus, ramah dan fLeksibeL. Bagaimana cara menyiasati tampiLan html supaya tak meLulu kotak? CSS bisa membuat sudut-sudut daLam html akan tampak meLengkung (rounded corner), sahabat hanya perLu menambahkan beberapa style ke daLam kode html. Berikut contoh kode CSS nya:
Melengkung pada semua sudut
<div style="border:1px solid #000000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">Contoh teks</div>Melengkung pada sudut kiri atas
<div style="border:1px solid #000000; border-top-left-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;">Contoh teks</div>Melengkung pada sudut kanan atas
<div style="border:1px solid #000000; border-top-right-radius:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;">Contoh teks</div>Melengkung pada sudut kiri bawah
<div style="border:1px solid #000000; border-bottom-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px;">Contoh teks</div>Melengkung pada sudut kanan bawah
<div style="border:1px solid #000000; border-bottom-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px;">Contoh teks</div>dimana angka 10px adaLah besar jari-jari lengkungan.
Tested On : Firefox 3.6.3, Chrome 4.1, Safari 3.2.3, Opera 10.53, Flock 2.5.6
hahaha… bisa aja ngajarin tips CSSnya…
.-= Ari´s last blog : Kelezatan Menu Udang Mang Engking =-.
malam mas hariii
memang kalau jodoh itu ga kemana-mana. Baru aja mau cari referensi untuk buat lengjung-lengkung….ndilala…dapat ilmunya……..thx berat pak…
.-= sentil´s last blog : Bekerja Dengan Hati =-.
Hmmm….(Hari mulya malas mandi)
(maap, saia meminjam komen adik saia si hari puter & kepanjangan yg dibuat akangnya) 😀
dapat tutor HTML disini, walau saya gak pernah ada kemajuan mas Hari b-(
Wah keren Dab ….. bisa sebagai variasi untuk menampilkan informasi penting plus pilihan border yg variatif
.-= Alwi´s last blog : Menggunakan Firefox dan Google Sebagai Kalkulator =-.
terimakasih utk ilmu html nya ,Hari.
walaupun tinggal copas kodenya, bunda kudu belajar dulu.
salam
.-= bundadontworry´s last blog : Benarkah Jeruk Bisa Meluruhkan Lemak? =-.
Aduh kalo soal HTML gini mah saya nyerah deh kang, nggak mudeng..
punya saya udah gini bentuknya…tapi sip lah, jadi tau kalo mau ngedit di bagian mananya… 🙂