Ini adalah contoh penerapan efek border-radius. Efek ini dapat dilihat jika anda menggunakan browser Mozilla Firefox, Google Chrome, atau Safari 3
Untuk membuat efek seperti contoh di atas caranya sangat mudah yaitu tinggal menambahkan css sebagai berikut:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Nah berikut ini adalah cara jika kita hanya menginginkan efek rounded pada salah satu sisi saja yaitu:
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
Sangat mudah sekali bukan? Yang perlu kita ingat adalah tidak semua browser bisa menerjemahkan kode tersebut, misalnya IE6. saya telah mengujinya dengan Mozilla Firefox 3, Google Crome 2.0, dan Safari 4.
sumber: http://css3.info
14 Komentar:
No PertamaX...
wah keren nie mas blognya.. baru kali ini liat seperti ini :D
walah headaches segala.. heheheh
Huuiiih.... kreatif sih kreatif, jendela popupnya sih keren tapi font pembukanya kok gedhe2 banget ya, bikin saya sakit mata. Huehuehue....
mantap design - nya sobat, kapan ya bisa seperti U, hehe....
@gedenarayana
hehehe,.. nih bikinnya sampe mumet loh...
@Yari NK
heheh maaf.. itu 100 piksel loh.. klo liatnya pake IE6 dijamin tambah sakit mata hhehe...
@Blog Buat Bloggers
Memangnya kenapa pengen seperti saya?
setiap blog punya keunikannya sendiri sobat...
di opera juga gak jalan mas ardianz.
kenapa beberapa browser gak bisa ya?
@pakacil
Yup! sebenarnya untuk menerjemahkan CSS3 setiap browser memiliki bahasanya sendiri-sendiri.
Setahu saya, opera belum dapat menerjemahkan CSS border radius ini. Itulah salah satu kelemahan CSS3, oh iya menambahkan ada satu lagi kode untuk broeser Konqueror yaitu:
-khtml-border-radius: 10px;
itulah kira-kira penjekasan dari saya
wah, gmana ne cara buat postingannya muncul dlm bentuk kayak gini, boleh bagi ilmunya om?
mungkin bisa di terapkan utuk hal yang lainnya,,,
Terima kasih sudah dibantu mas.. siip keep Post..
blognya bagus, suer,,, hangat, gaya baru,, gua suka gaya lo..!
@agus
Caranya cukup mudah, hanya perlu 'sedikit' kreativitas plus 'kode serbaguna' mungkin lain posting akan saya jelaskan :)
@Tukang Corat2..
Yup... kita 'kan gak mungkin nyembunyiin ilmu klo pngen maju heheh..
@Secangkir ...
Terimakasih atas testimonialnya..
:)
Keyen.. nih yang selama ni gue cari.. mantap mas.. Tq.
1000 blogge telah mencoba vitur baru google translate di blog.. bagaimana dengan anda?? silakan kemari http://pondok-cerita.blogspot.com/2009/11/google-translate-baru-tepat-di-bagian.html?showComment=1257351216028#c525690374066338435
hhmmm....
@W4nzz
iya sama sama
@Mas Adi
hhmmm...
Poskan Komentar zzz