sekedar ingin berbagi apa yg aku ketahui, jika ini terlihat basi..maaf ya..siapa tahu ada belum tahu ;)
Tutorial ini berisi tntng how to make CSS for rounded menu :
Hasilnya akan seperti ini:
1. Slicing bagian kanan kanan atas,kiri atas, kanan bawah dan kiri bawah rounded image yang telah dibuat di photoshop ataupun fireworks. hasil Slicing kurang lebih seperti ini:
beri nama : part_kiri_atas
beri nama :part_kanan_bawah
beri nama : part_kanan_atas
beri nama :part_kiri_bawah
beri nama :img_li (ini berfungsi sebagai thumbnail untuk list menu)
beri nama : text (karena pada tutorial ini kita menggunakan text modifikasi maka text juga hrs di slicing,bila menggunakan text biasa tnapa modifikasi tidak diperlukan slicing)
2. CSS script, ini saatnya untuk menuliskan kode CSS :
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.kananAtas{
background:url(image/part_kanan_atas.jpg) top right no-repeat;
width:200px;
background-color:#C0C0C0;
}
.kananBawah{
background:url(image/part_kanan_bwh.jpg) bottom right no-repeat;
}
.kiriAtas{
background:url(image/part_kiri_atas.jpg) top left no-repeat;
}
.kiriBawah{
background:url(image/part_kiri_bwh.jpg) bottom left no-repeat;
height:200px;
}
.isi{
/*pading-top:30px;*/
margin-left:20px;
background:url(image/text.jpg);
background-repeat:no-repeat;
height:39px;
width:87px;
}
ul{
line-height:20px;
list-style-image:url(image/img_li.jpg);
}
li{
vertical-align:top;
font-size:10px;
}
li a{
text-decoration:none;
}
hr{
color:#747474;
}
hr p{
color:#FFFFFF;
}
3.HTML kode :

trarara..jadi deh..
selamat mencoba ya..semoga bsk2 aku bs berbagi lg dengan kalian.kl ada yg belum jelas silahkan tanya ;)
Tutorial ini berisi tntng how to make CSS for rounded menu :
Hasilnya akan seperti ini:
1. Slicing bagian kanan kanan atas,kiri atas, kanan bawah dan kiri bawah rounded image yang telah dibuat di photoshop ataupun fireworks. hasil Slicing kurang lebih seperti ini:
beri nama : part_kiri_atas
beri nama :part_kanan_bawah
beri nama : part_kanan_atas
beri nama :part_kiri_bawah
beri nama :img_li (ini berfungsi sebagai thumbnail untuk list menu)
beri nama : text (karena pada tutorial ini kita menggunakan text modifikasi maka text juga hrs di slicing,bila menggunakan text biasa tnapa modifikasi tidak diperlukan slicing)2. CSS script, ini saatnya untuk menuliskan kode CSS :
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.kananAtas{
background:url(image/part_kanan_atas.jpg) top right no-repeat;
width:200px;
background-color:#C0C0C0;
}
.kananBawah{
background:url(image/part_kanan_bwh.jpg) bottom right no-repeat;
}
.kiriAtas{
background:url(image/part_kiri_atas.jpg) top left no-repeat;
}
.kiriBawah{
background:url(image/part_kiri_bwh.jpg) bottom left no-repeat;
height:200px;
}
.isi{
/*pading-top:30px;*/
margin-left:20px;
background:url(image/text.jpg);
background-repeat:no-repeat;
height:39px;
width:87px;
}
ul{
line-height:20px;
list-style-image:url(image/img_li.jpg);
}
li{
vertical-align:top;
font-size:10px;
}
li a{
text-decoration:none;
}
hr{
color:#747474;
}
hr p{
color:#FFFFFF;
}
3.HTML kode :

trarara..jadi deh..
selamat mencoba ya..semoga bsk2 aku bs berbagi lg dengan kalian.kl ada yg belum jelas silahkan tanya ;)




