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 MEWARNAKAN BORDER |
| July 29, 2009 Posted by: Fauzie |
Dengan kod CSS3, anda juga boleh mewarnakan border. Jumlah warna yang anda boleh gunakan bergantung pada jumlah pixel border. Ini bermakna jika border mempunyai Xpx, jumlah warna yang boleh digunakan ialah Xpx juga. Ini adalah kerana ketebalan warna (color width) ialah 1px untuk satu warna.
Di bawah ini adalah contoh kotak yang mempunyai border berwarna dibuat dengan hanya menggunakan kod CSS3. Border berwarna ini hanya boleh kelihatan dalam browser Mozilla Firefox dan browser Safari.
Contoh kotak dengan border berwarna ini menggunakan kod CSS dan HTML yang sama seperti artikel sebelum ini (border-radius dan rounded corner). Apa yang perlu ditambah ialah pixel untuk border.
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.
Kod CSS dan Html untuk kotak di atas adalah seperti berikut. Untuk mendapatkan border seperti yang ditunujukkan itu, tambah pixel border kepada 5px dan berikan warnanya sebagai #ccc (warna kelabu).
<html>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_test1{
border: 5px solid #ccc;
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>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_test1{
border: 5px solid #ccc;
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>
Border juga boleh diwarnakan dengan mengabungkan beberapa warna seperti contoh di bawah ini. Walaubagaimana pun, teknik ini tidak sesuai dilihat melalui browser Safari.
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. Aliquam non felis non diam aliquam gravida. Phasellus
quis sem. Curabitur at velit. Vivamus libero velit, condimentum sitamet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisqueegestas feugiat erat. Morbi tellus.
quis sem. Curabitur at velit. Vivamus libero velit, condimentum sitamet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisqueegestas feugiat erat. Morbi tellus.
Kod CSS dan Html untuk mendapatkan "feature" seperti di atas adalah seperti berikut:
<html>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_test2{
background-color:#e6e6e6;
padding: 10px;
text-align: left;
width: 400px;
margin: px;
}
#css3_coloredborder_id {
border: 10px solid #000000;
-moz-border-radius: 25px;
-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
}
</style>
</head>
<body>
<div id="css3_coloredborder_id" class="border_radius_test2">
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.
</div>
</body>
</html>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_test2{
background-color:#e6e6e6;
padding: 10px;
text-align: left;
width: 400px;
margin: px;
}
#css3_coloredborder_id {
border: 10px solid #000000;
-moz-border-radius: 25px;
-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
}
</style>
</head>
<body>
<div id="css3_coloredborder_id" class="border_radius_test2">
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.
</div>
</body>
</html>
Warna border terjadi dengan menggunakann kod CSS yang ditebalkan (bold) seperti di atas. Seperti biasa, kod yang berwarna maroon ialah kod-kod CSS dan kod-kod yang berwarna biru adalah kod-kod Html.
