Ada tiga cara yang lazim digunakan oleh para designer jika ingin membentuk background bulat (elips) atau apalah yang jelas nama kerennya adalah Rounded Corner. Nilanya dinyatakan dengan radius. Dan karena memanfaatkan CSS dasar mulai dari property sampai selector, trik ini bisa digunakan pada semua templates dan themes.
1. Menyatakan Background Sebagai Images Langsung
Persentasi penggunaannya bisa sampai 40%. Ini adalah tahap yang paling mudah dari tiga tahap yang akan saya jelaskan. Ada tiga extention yang sering digunakan:
- PNG: Biasanya digunakan jika background dibelakangnya bukanlah warna tetapi images. Menyimpan images dengan extensi ini bisa membuat efek transparant pada bagian rounded. Semua browser besar sudah support PNG transparansi kecuali IE6.
- GIF: Hampir mirip dengan extensi PNG, hanya saja image yang dihasilkan kurang berkualitas meskipun dengan size yang lebih kecil sehingga loading lumayan cepat.
- JPG: Digunakan jika designer sudah mengetahui warna background target. Karena extensi ini tidak support transparansi, jadi jika images dibuat di photoshop (*background transparan) dan disave dengan extensi ini, background akan menjadi putih.
Ada tools menarik dari third party yang menyediakan jasa pembuatan rounded
corners secara gratis. coba saja kunjungi
http://www.roundedcornr.com
Contoh penerapannya bisa dilihat pada kutipan ID CSS dibawah ==>
#menubottom{
width:100%;
margin:0 0 0px;
height:46px;
background:#40534a url(http://img706.imageshack.us/img706/8813/navmenu2radius7.png)
no-repeat;
}
2. Property
Selain step satu diatas, ini adalah yang kedua termudah. Bahkan bisa
dikatakan lebih mudah, jika bagi mereka yang tidak bisa menggunakan Photoshop.
Dari beberapa templates yang saya bedah, presentasi penggunaan property ini bisa
mencapat 35%. Beberapa browser besar (Mozilla, Chrome, Safari dan Opera) sudah
mendukungnya kecuali IE sekeluarga.
Berikut property-nya:
- moz-border-radius:7px; /* untuk mozilla FF & Universal*/
- webkit-border-radius:7px; /* untuk Safari */
Contoh penerapannya bisa dilihat pada kutipan CSS dibawah ==>
#header1{
background: #8a9c8e;
margin: 10px 0;
text-align: center;
color:$pagetitlecolor;
width:490px;
height:90px;
float:right;
overflow:hidden;
-moz-border-radius:7px;
-webkit-border-radius:7px;
3. CSS Selector
Caranya lumayan rumit. Mungkin karena itu, cara ini jarang digunakan didalam template yang berbasis personal design. Meskipun rumit, tetapi bekerja dengan baik pada semua browser. Tahapannya masih memanfaatkan images yang disave dengan extensi tertentu (*perhatikan Step 1 diatas). Posisi peletakannya diatur oleh CSS selanjutnya dipanggil dibagian HTML. Ada satu blog yang sudah pernah menjelaskan penerapan cara ini. Saya sudah lupa siapa penulisnya, yang jelas linknya ada disini. Maaf, saya tidak bisa jelaskan disini karena terlalu panjang...
Oh iya...pengaturan margin/padding sangat berpengaruh. Saran saya, sebaiknya
margin ber-value "0" (nol).








49 komentar:
Boleh dicoba nie. Makasi ya mas o-om and kang biyan.
Seep, makasih sobat!
mantabz ada artikel CSS round, saya suka pakai yang no 2 karena selain hemat loading time. juga ga perlu 2x kerja untuk membuat gambar terlebih dahulu, namun sayang ada kelemahan pada IE6 dimana CSSnya tidak kebaca :((
setidaknya berusaha yang terbaik, jadi sebelum selesai menggunakan cara 1 dan 2 sebaiknya di cek dulu di beberapa browser apakah tampilan tetap fix atau terjadi error.
thanks bro biyan.. bravo blogger :)
Sayang IE belum support ya, kapan IE lebih maju ya??
Siip gan ulasan nya
Seperti biasnaya, yang namanya CSS pasti agak kurang bersahabat dengan IE. Sangat setuju dengan pendapat mas denny, setidaknya kita harus mencoba menjalankannya dulu di IE, untuk melihat kemungkinan error yang terjadi. Thanks for nice post :)
Info nya bagus ! Ada alternatif nya gak yach? Biar IE suport!
wao akan tampak sip, trims telah berbagi!
Wah, mantaps infonya mas Biyan. thanks for share yah :)
siip om tutorial nya
wah ini postinganya nggk mudeng,,heheheee
mohon bimbingannya,,
om saya ini masih baru di dunia blogger,dan saya ini penggemar om,,
sudikah main ke blog saya,,
salam persahabatan
tak cuba dulu o-om...
asyk nch kayaknya...
terimaksih banyak o-om
;;) :D ;)
Great tutorial OM...tak cuba-cuba utak atik template ku deh.
Thanks OM..
Makasih infonya kang biyan dan om agus
Yang dulu ga tahu jadi sekarang tahu
Mantab Oom! Buat semua blogger di sini, lam kenal ya
/\ /\
/ \ / \
/ \ / \
/ \ / \
_________
\_______/
sudah saya coba di sini http://blogazineku.blogspot.com
mantab dah :D
maksih infonya :))
artikel yang sayang untuk dilewatkan..
wah bagus nih.. saya blm tlalu ngerti css soalnya..
trims bro.. :D
aku udah bisa mas pake rounded corner yang tampil di semua browser baik ie, mozila, dll. Coba lihat contohnya di halaman posting(bukan halaman utama) pada blog aku
mau tau caranya?? dateng aja ke blogku...
Wah emang mantap Nih kang O - O M selalu aja ada iDenya
thanks infonya.. nambah lagi ilmu css, sklali lagi makasih buat yang nulis juga :)]
wes.. ngga mudeng om... bahasa tingkat tinggi ni ya... masih mabok baca CSS
wah kalo gambar jadi background jadi nambah beratin blog kang. pa lagi format PNG. JPG lebih ringan..
oh tu tip dari kang easy ya..cuma kendala gini kang..blog banyak pernak perniknya..memang tampilan bagus..tapi jadi perhitungan beratnya..jadi kendala lagi deh..
@ Artikel Agama & HAPIA Mesir: images yang digunakan saya rasa tidak akan terlalu memberatkan blog. Kita tidak menggunakan images diseluruh body kan? Selain itu, ada kuk image compressor yang bisa mengkompressi size images tanpa mengurangi kualitasnya. Misalnya saja imageoptimizer.net :)
Wow..cool...tutorial yg menarik! thanks
ah artikelnya biasa aja tuh, tapi luar biasa juga buat gua xixixixixixi :p
boleh juga nih triknya sob, biar logo atau backgorund image jadi lebih enak dilihat dan bentuknya juga jadi lebih bagus, thank banget nih udah sharing disini
wah ok juga ni tipsnya, boleh dicoba ni...
:D
thanks infonya yg dahsyat tambah ilmu dan tambah kawan.salam action
wew.. nice inpo nih mas he..he..
Lanjutkan terus Terima kasih!
Makasih tutorialnya Om
Langsung tak coba deh
Wah, sekarang artikelnya berkualitas semua ya, ga kayak artikel saya yang asal bikin aja.
lanjutkan...
wah..., ketemu ama Master nech..., artikelnya berkualitas...,
kalo saya buatnya ngasal..., paling mosting artikel yang ada di unek unek aja..., sebatas kemampuan..:))hahahahhaha
salam kenal mas...,
em ... saya ngadain event kecil kecilan yach..., seneng banget rasanya www.o-om.com bisa berpartisipasi... hehehehehhe
SALAM HANGAT DARI BLOGGER BALI
hem...moziLa wae lagh.. ^^
keep berbagi! saLam smangadh!
kalo ada yg pengen buat sudut dengan CSS, saya ada tipsnya :D
*ynumpang promosi ya oom*
Saya pakai cara yang kedua.. :D
Lebih enak..
ya cara yg kedua aja deh, thanks om tipsnya
mantaff,,,
makasih infonya pak bos...
makin banyak aja cara buat ngulik template.
Hmmm, kayanya boleh juga nih tips-nya Bung Biyan dipraktikkan. Tapi nanti, kalau penyakit otak-atik template sedang kambuh :D
salam kenal sobat
saya tunggu kunjungan baliknya
Great
good lah O`om
manntaaafff om
Poskan Komentar
Silahkan beri komentar dan jangan komentar bernada spam ya. thanks :)