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



CSS3 UNTUK BORDER-RADIUS DAN ROUNDED CORNER
July 29, 2009
Posted by: Fauzie


Gunakan CSS3 Border-Radius untuk dapatkan kotak berbucu bulat (rounded). Dalam rencana ini kita akan lihat bagaimana generasi ketiga "style sheet language" ini mampu membuat bucu bulat dengan hanya menggunakan beberapa baris kod sahaja.

Memandangkan browser internet menghadapi "browser compatability", 2 jenis prefix telah diperkenalkan untuk menyelesaikan masaalah ini.

-moz (contoh: -moz-border-radius) untuk Mozilla Firefox
-webkit (contoh: -webkit-border-radius) untuk Safari dan Google Chrome

Bina Bucu Bulat (Rounded Corner) Dengan CSS3

Kebanyakan rounded corner yang terdapat dalam website telah dibina dengan menggunakan image. Cara ini memerlukan banyak masa dan langkah yang perlu dilalui. Sila lihat disini bagaimana rounded corner dibina dengan menggunakan image.

Dengan CSS3, membina rounded corner menjadi lebih mudah. Hanya dengan beberapa baris kod anda akan dapat membuat kotak yang mempunya bucu bulat.

Seperti yang dibincangkan sebelum ini, hanya dengan melalui browser terpilih sahaja anda akan dapat melihat "product" yang dibina ini.

Contoh Rounded Corner

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur miest, cursus sit amet, pellentesque et, ultricies a, ipsum. Nullafacilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida.Nam sed nunc.

Kotak rounded corner di atas ini dapat dilihat dengan sempurna melalui browser Mozilla Firefox, Google Chrome and juga Safari, tetapi tidak dengan browser IE.

Di bawah ini adalah kod CSS3 untuk kotak di atas. Perhatikan kod-kod "-moz-border-radius: 20px;" dan "-webkit-border-radius: 20px;" yang bertanggungjawab untuk menjadikan keempat-empat bucu berbentuk bulat. 20px merujuk kepada "gradient" kebulatan bucu. Anda boleh kecilkan kebulatannya dengan mengurangkan pixel kepada 10px atau 15px. Border dijadikan 0px supaya border tidak kelihatan.

<html>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_test1{
border: 0px solid #e6e6e6;
padding: 10px;
text-align: left;
width: 350px;
margin: px;
}
#border_radius{
background-color: #f8db66;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
</style>
</head>
<body>
<div id="border_radius" class="border_radius_test1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi
est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla
facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida.
Nam sed nunc.</p>
</div>
</body>
</html>


Jika anda ingin mencuba membuatnya sila copy & paste kod di atas dalam notepad dan save dengan menggunakan extension .hmtl (seperti ini: roundedcorner.html).

Jika anda hendak mencuba dalam blog anda, sila copy & paste kod-kod berwarna maroon ke dalam Layout->Edit HTML dan letakkan di bahagian atas </head> dan copy & paste kod-kod berwarna biru ke dalam add a gadget page element atau di dalam bahagian post (nota: pastikan anda berada dalam mode Edit Html dan semua kod biru tersebut dalam keadaan "compressed" atau dirapatkan dalam satu barisan).