Tiga Step Rounded Corner

Penulis: Biyan A Pasau | kingtemplates.blogspot.com

Ada tiga cara yang lazim dipakai oleh para designer kalau ingin membentuk background bundar (elips) atau apalah yang terang nama kerennya ialah Rounded Corner. Nilanya dinyatakan dengan radius. Dan alasannya ialah memanfaatkan CSS dasar mulai dari property hingga selector, trik ini dapat dipakai pada semua templates dan themes.

 

1. Menyatakan Background Sebagai Images Langsung

Persentasi penggunaannya dapat hingga 40%. Ini ialah tahap yang paling gampang dari tiga tahap yang akan aku jelaskan. Ada tiga extention yang sering digunakan:

• PNG: Biasanya dipakai kalau background dibelakangnya bukanlah warna tetapi images. Menyimpan images dengan extensi ini dapat menciptakan imbas transparant pada bab rounded. Semua browser besar sudah support PNG transparansi kecuali IE6.
• GIF: Hampir seakan-akan dengan extensi PNG, hanya saja image yang dihasilkan kurang berkualitas meskipun dengan size yang lebih kecil sehingga loading tidak mengecewakan cepat.
• JPG: Digunakan kalau designer sudah mengetahui warna background target. Karena extensi ini tidak support transparansi, jadi kalau images dibentuk 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 dapat 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 ialah yang kedua termudah. Bahkan dapat dikatakan lebih mudah, kalau bagi mereka yang tidak dapat memakai Photoshop. Dari beberapa templates yang aku bedah, presentasi penggunaan property ini dapat 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 dapat 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 alasannya ialah itu, cara ini jarang dipakai 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 terang linknya ada disini. Maaf, aku tidak dapat jelaskan disini alasannya ialah terlalu panjang...

 
Oh iya...pengaturan margin/padding sangat berpengaruh. Saran saya, sebaiknya margin ber-value "0" (nol).

Penasaran siapa dibalik penulis artikel ini? Biyan | kingtemplates.blogspot.com