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


Dalam Bahagian II, kita telah membincangkan bagaimana "rounded corner" boleh dibina dengan menggunakan kaedah "pure" CSS dan HTML.

Dengan menggunakan contoh ini, kita akan membuat sedikit perubahan ke atas kod CSSnya dengan menambah kod baru untuk membuat "border" bagi menambah efek yang lebih menarik pada kotak berbucu bulat ini.

Sila lawat Rounded Corner Bahagian II untuk melihat contoh kod-kod CSS dan HTML yang telah digunakan. Anda boleh copy & paste ke dalam Notepad kod-kod ini bagi membolehkan anda mencubanya.

Contoh 2: Rounded Corner Mempunyai Border

Di bawah ini ialah contoh kotak berbucu bulat yang mempunyai "border".

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.


Untuk mendapatkan border seperti di atas, apa yang perlu kita buat ialah menambah kod ini:

border: 5px solid red;

di bahagian bawah kod .border_radius_css3a {

Ketebalan "border" bergantung kepada pixel. Dalam contoh ini saya menggunakan 5px. Jika anda inginkan border yang nipis, tukarkan kepada 1px.

Warna border pula bergantung kepada warna apa yang anda suka. Jika inginkan warna biru taipkan perkataan blue dan seterusnya. Anda juga boleh menggunakan kod warna hexidecimal untuk tujuan mendapatkan warna-warna "pastel" (warna lembut).

Di bawah ini disediakan kod-kod CSS dan HTML untuk kotak seperti di atas. Sila rujuk Contoh 1 bagaimana untuk meletakkan kod-kod ini dalam blog atau site anda.



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

</head>
<body>
<div id="border_radius_background2" class="border_radius_css3a">
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>