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