Tiga Step Rounded Corner

Penulis: Biyan A Pasau | kingtemplates.blogspot.com

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).

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