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 4 |
| June 8, 2009 Posted by: Fauzie |
Setelah mendapat idea berhubung dengan membuat kotak "rounded corner" ini, kita boleh membuat sedikit experiment ke atas kod CSS dan HTML kotak ini untuk mendapatkan bentuk yang lebih menarik.
Di bawah ini saya telah membuat "modification" dengan membina sebuah kotak kecil di dalam sebuah kotak besar.
Contoh 3: Meletakkan Kotak Rounded Kecil Di Dalam Kotak Rounded Besar
We're a global community of thousands who sincerely believe in the power of technology to enrich people's lives. We're a public benefit organization dedicated not to making money but to improving the way people everywhere experience the internet. And we're an open source software project whose code has been used as a platform for some of the Internet's most innovative projects. In the end, our community is all focused on a single goal: making the Internet better for everyone.
Membuat kotak seperti ini adalah mudah. Apa yang anda perlu buat ialah menyediakan dua set kod CSS dan HTML: satu set untuk kotak besar dan satu set untuk kotak kecil. Anda boleh upload gambar atau image dan masukkan ke dalam kotak kecil.
Gambar atau image boleh di upload secara percuma di sini bagi mendapatkan URL image tersebut.
Nota: gambar atau image perlu di upload bagi mendapatkan URLnya. URL ini akan digunakan sebagai image src anda.
Untuk membina kotak rounded corner ini, anda boleh copy & paste kod-kod CSS dan HTML seperti di bawah ini dan seperti biasa save dalam notepad anda supaya anda boleh membuat perubahan ke atas warnanya, width dan gambar atau image. Sila gunakan kreativiti anda untuk membuat kotak ini.
Di bawah ini kod CSS dan HTML untuk kotak di atas.
<html>
<head>
<style type='text/css'> /***set kod pertama***/
body{
margin: 10px;
font-family: arial;
}
.border_radius_big{
border: 5px solid #a87500;
color:#ffffff;
padding: 10px;
text-align: left;
width: 350px;
margin:10px;
}
#border_radius_bigbox{
background-color: #541433;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
}
</style>
<style type='text/css'> /***set kod kedua***/
body{
margin: 10px;
font-family: arial;
}
.border_radius_small{
border: 5px solid #a87555;
padding: 10px;
text-align: left;
width: 300px;
margin:10px;
}
#border_radius_smallbox{
border: 3px solid #ccccc0;
background-color: #ffffff;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
</style>
</head>
</body>
<div id="border_radius_bigbox" class="border_radius_big"><div style="text-align: justify;">We're a global community of thousands who sincerely believe in the power of technology to enrich people's lives. We're a public benefit organization dedicated not to making money but to improving the way people everywhere experience the internet. And we're an open source software project whose code has been used as a platform for some of the Internet's most innovative projects. In the end, our community is all focused on a single goal: making the Internet better for everyone.
</div><div id="border_radius_smallbox" class="border_radius_small"><img style="width: 240px; height: 217px;" alt="" src="http://mfm6009.googlepages.com/firefox.png " /></div></div>
</html>
<head>
<style type='text/css'> /***set kod pertama***/
body{
margin: 10px;
font-family: arial;
}
.border_radius_big{
border: 5px solid #a87500;
color:#ffffff;
padding: 10px;
text-align: left;
width: 350px;
margin:10px;
}
#border_radius_bigbox{
background-color: #541433;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
}
</style>
<style type='text/css'> /***set kod kedua***/
body{
margin: 10px;
font-family: arial;
}
.border_radius_small{
border: 5px solid #a87555;
padding: 10px;
text-align: left;
width: 300px;
margin:10px;
}
#border_radius_smallbox{
border: 3px solid #ccccc0;
background-color: #ffffff;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
</style>
</head>
</body>
<div id="border_radius_bigbox" class="border_radius_big"><div style="text-align: justify;">We're a global community of thousands who sincerely believe in the power of technology to enrich people's lives. We're a public benefit organization dedicated not to making money but to improving the way people everywhere experience the internet. And we're an open source software project whose code has been used as a platform for some of the Internet's most innovative projects. In the end, our community is all focused on a single goal: making the Internet better for everyone.
</div><div id="border_radius_smallbox" class="border_radius_small"><img style="width: 240px; height: 217px;" alt="" src="http://mfm6009.googlepages.com/firefox.png " /></div></div>
</html>
Kod berwarna maroon ialah kod CSS dan yang berwarna biru itu ialah kod HTML. Ada dua set kod berwarna maroon yang mewakili kod CSS untuk kotak besar dan kod CSS untuk kotak kecil. Sila rujuk rencana sebelum ini untuk mendapat kepastian bagaimana kod-kod ini perlu diletakkan di dalam blog atau website anda.
Jika anda upload gambar atau image pilihan anda, pastikan anda tukar URL gambar atau image. URL image (rujuk src di atas) adalah URL untuk gambar ini sahaja.
Nota: Kod color: #ffffff; di atas merujuk kepada warna teks atau huruf. Anda boleh menukar kepada warna ayat atau huruf ini dengan menukar kod warna hexadecimalnya (#ffffff untuk warna putih)
