Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 ROUNDED CORNER BAHAGIAN 1 |
| May 29, 2009 Posted by: Fauzie |
Mempunyai kotak berbucu bulat atau "rounded corner" dalam blog atau website adalah sesuatu yang sangat menarik.
Membina kotak seperti ini telah pun dipermudahkan dengan penemuan-penemuan kod CSS dan javascript. Kini terdapat banyak cara-cara untuk membina rounded corner ini. Apa yang yang perlu ada ialah sedikit pengetahuan berhubung dengan kod-kod HTML, CSS dan javascript.
Dalam rencana ini mari kita melihat beberapa cara untuk membina rounded corner dan tumpuan hanya akan diberikan kepada cara-cara dimana ianya hanya sesuai untuk bowser firefox sahaja.
Sebelum penemuan kod-kod CSS dan javascript untuk rounded corner, kotak-kotak berbucu bulat ini dibina dengan menggunakan kombinasi "table" dan "image".
Untuk mendapatkan "layout" yang dikehendaki, satu "image" berbentuk bulat "dibelah" kepada empat bahagian untuk mendapatkan empat "image" sudut seperti di bawah ini.
 |  |
 |  |
Setiap image sudut tersebut akan di "save" dalam format GIF dengan memberi nama fail yang sesuai seperti berikut.
| top-left.gif |
| top-right.gif |
| bottom-left.gif |
| bottom right.gif |
Kemudian sebuah table yang mempunyai 3 column dan 3 row (9 cell) akan dibina.
Di dalam cell 1, 3, 7 dan 9 akan diletakkan setiap image sudut di atas. Cell 5 akan digunakan sebagai tempat di mana "content" akan ditulis.
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Cell 2, 4, 5, 6 dan 8 kemudian akan diwarnakan mengikut warna keempat-empat sudut tersebut.
Penggunaan cara ini untuk membina rounded corner tidak praktikal kerana ianya tidak sesuai untuk browser firefox. Untuk melihatnya dalam IE, anda boleh copy & paste kod-kod di bawa ini dalam notepad anda dan save file dengan menggunakan extension html seperti contoh.html (dengan menambah .html pada file name). kemudian buka IE, klik File-> Open File dan klik nama fail tersebut.
Ini adalah kod CSS dan HTML untuk membuat rounded corner seperti di atas
<html>
<head>
</head>
<body>
<table border="0" cellpadding="0"
cellspacing="0" width="200">
<tbody>
<tr bgcolor="#9b2747">
<td width="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_toplef.gif"></td>
<td width="172"><font
size="1"> </font></td>
<td widht="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_toprig.gif"></td>
</tr>
<tr bgcolor="#9b2747">
<td width="14"><font
size="1"> </font></td>
<td align="left"
bgcolor="#9b2747" width="172"><span
style="color: rgb(255, 255, 255);">
Taip atau masukkan image yang diperlukan di sini</span>
</td>
<td width="14"><font
size="1"> </font></td>
</tr>
<tr bgcolor="#9b2747">
<td width="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_botlef.gif"></td>
<td width="172"><font
size="1"> </font></td>
<td width="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_botrig.gif"></td>
</tr>
</tbody>
</table>
</body>
</html>
<head>
</head>
<body>
<table border="0" cellpadding="0"
cellspacing="0" width="200">
<tbody>
<tr bgcolor="#9b2747">
<td width="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_toplef.gif"></td>
<td width="172"><font
size="1"> </font></td>
<td widht="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_toprig.gif"></td>
</tr>
<tr bgcolor="#9b2747">
<td width="14"><font
size="1"> </font></td>
<td align="left"
bgcolor="#9b2747" width="172"><span
style="color: rgb(255, 255, 255);">
Taip atau masukkan image yang diperlukan di sini</span>
</td>
<td width="14"><font
size="1"> </font></td>
</tr>
<tr bgcolor="#9b2747">
<td width="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_botlef.gif"></td>
<td width="172"><font
size="1"> </font></td>
<td width="14"><img
src="http://mfm6009.googlepages.com/rounded_corner_botrig.gif"></td>
</tr>
</tbody>
</table>
</body>
</html>
Nota: Ini adalah cara lama. Penggunaannya tidak praktikal
