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 2
June 2, 2009
Posted by: Fauzie


Cara yang terbaik untuk membina kotak mempunyai bucu bulat (rounded corner) ialah dengan menggunakan "pure" CSS dan HTML di mana rounded corner dibina tanpa menggunakan image/graphic dan juga table.

Mozilla melalui "advance CSS (CSS3)" telah berjaya memperkenalkan nilai-nilai border-radius (-moz-border-radius set of properties) yang memudahkan untuk kita membina rounded corner ini.

Malangnya, penggunaan advance CSS properties ini hanya sesuai untuk browser firefox dan juga "Mozilla family of browsers". Dengan kata lain, ia tidak sesuai untuk dilihat melalui browser IE.

Dengan "border-radius properties" ini, anda mampu membina beberapa bentuk rounded corner dan juga border yang berlain rupa. Apa yang anda perlu ada ialah pengetahuan dalam menggunkan CSS dan juga HTML.

Dalam rencana ini mari kita lihat bagaimana beberapa jenis rounded corner boleh dibina dengan cara border-radius ini.

Contoh I: Rounded Corner mempunyai background berwarna


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. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.


<html>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_css3{
padding: 10px;
text-align: left;
width: 400px;
margin: px;
}
#border_radius_background{
background-color: #cccccc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
</style>

</head>
<body>
<div id="border_radius_background" class="border_radius_css3">
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. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
<br /><br />
</div>
</body>
</html>

Kod-kod CSS dan HTML ini adalah untuk kotak rounded corner di atas. Untuk mengetahui lebih lanjut penggunaan kod-kod ini, sila copy & paste kod dari <html> hingga ke </html> dalam notepad dan save file dengan menggunakan extension .html (contoh: rounded.html). Buka internet explorer dalam browser firefox dan klik File->Open File->Klik file yang anda save tadi.Anda boleh membuat sebarang perubahan jika perlu dalam file notepad tersebut.

Nota: Notepad digunakan hanya sebagai "testing page" sahaja. Pastikan anda copy dan paste semua kod dari <html> hingga </html>

Amaran: Sesuai dilihat dalam Firefox sahaja. Dalam browser IE, anda akan tidak dapat lihat bucu bulat ini.

Dalam contoh ini saya telah menggunakan lebar width: 400px; dan background-color: #cccccc;

Lebar dan warna latar belakang boleh disesuaikan mengikut kehendak anda. Begitu juga radiusnya atau kebulatan sudut boleh ditukar kepada 10px; atau 25px; (angka pixel yang kecil memberi radius/kebulatan yang kecil)

Tinggi kotak bergantung berapa panjang content atau ayat yang ditaip (ini adalah kerana kotak dari jenis "fluid"). Ia akan memanjang secara otomatik.

Apabila anda telah mendapat idea bagaimana kod-kod CSS dan HTML ini "bekerja" dan dimunipulasi, anda boleh meletakkan kod-kod ini dalam blog anda.

Kod-kod berwarna maroon adalah kod bahagian CSS dan kod-kod berwarna biru adalah kod HTML. Copy & paste semua kod berwarna maroon ke dalam bahagian utama kod html blog anda. Klik Layout->Klik Edit HTML->Klik kotak Expand Widget Template dan cari </head>

Cara mudah mencari </head> ialah dengan menekan butang ctrl dan F serentak. Sebuah kotak kecil akan muncul dan taipkan </head> di dalam nya. Apabila anda telah menjumpainya, "paste" kod berwarna ini di bahagian atas </head> dan klik "PREVIEW". Jika ok, sila klik "SAVE TEMPLATE".

Jika anda ingin meletakkan kotak rounded corner in bahagian sidebar, sila ke bahagian page element. Klik Layout->Klik Add a Gadget dan klik HTML/JavaScript untuk meletakkan (paste) kod html berwarna biru di atas.

Jika anda hendak masukkan kotak rounded corner ini dalam blog post, klik Edit Posts->klik Edit->klik Edit HTML dan paste (jangan paste kod dalam mode compose)

Sila pastikan width yang terdapat dalam kod CSS (merah) mempunyai pixel yang sesuai lebarnya dengan lebar sidebar atau lebar post page anda.