Tiga Step Rounded Corner
Tempat Blogging Ada tiga cara yang lazim dipakai oleh para designer jikalau ingin membentuk background lingkaran (elips) atau apalah yang terperinci nama kerennya yaitu Rounded Corner. Nilanya dinyatakan dengan radius. Dan alasannya memanfaatkan CSS dasar mulai dari property hingga selector, trik ini dapat dipakai pada semua templates dan themes.
Tempat Blogging
Tempat Blogging 1. Menyatakan Background Sebagai Images Langsung
Tempat Blogging Persentasi penggunaannya dapat hingga 40%. Ini yaitu tahap yang paling gampang dari tiga tahap yang akan aku jelaskan. Ada tiga extention yang sering digunakan:
- PNG: Biasanya dipakai jikalau 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 jikalau designer sudah mengetahui warna background target. Karena extensi ini tidak support transparansi, jadi jikalau images dibentuk di photoshop (*background transparan) dan disave dengan extensi ini, background akan menjadi putih.
Tempat Blogging
Ada tools menarik dari third party yang menyediakan jasa pembuatan rounded corners secara gratis. coba saja kunjungi http://www.roundedcornr.com
Tempat Blogging
Contoh penerapannya dapat dilihat pada kutipan ID CSS dibawah ==>
Tempat Blogging
#menubottom{
width:100%;
margin:0 0 0px;
height:46px;
background:#40534a url(http://img706.imageshack.us/img706/8813/navmenu2radius7.png) no-repeat;
}
Tempat Blogging 2. Property
Tempat Blogging Selain step satu diatas, ini yaitu yang kedua termudah. Bahkan dapat dikatakan lebih mudah, jikalau 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 */
Tempat Blogging
Contoh penerapannya dapat dilihat pada kutipan CSS dibawah ==>
Tempat Blogging
#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;
Tempat Blogging
3. CSS Selector
Tempat Blogging Caranya lumayan rumit. Mungkin alasannya 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 terperinci linknya ada disini. Maaf, aku tidak dapat jelaskan disini alasannya terlalu panjang...
Tempat Blogging
Oh iya...pengaturan margin/padding sangat berpengaruh. Saran saya, sebaiknya margin ber-value "0" (nol).
0 Response to "Tiga Step Rounded Corner"
Post a Comment
Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Klik subscribe by email agar Anda segera tahu balasan komentar Anda