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 ;)
Oct 24, 2007
Rounded CSS
Subscribe to:
Post Comments (Atom)
6 komentar:
nid... bang ben minta di jelasin dari awal neh, ga mudeng.... gimana donk
:D hhihihi..
Bagus tutorialnya... hayo.. hayo.. posting lagi! :)
hehehe.. ada cara yang jauh lebih cepet... :D
cari di gugel, jquery corner.
liat cara pakenya, gampangnya minta ampun. gag usah pake lagi tuh bikin gambar... :D
abis itu di sharing ya pengalamannya.
*sambil injek2 tanah*..tuh khan basi tutorialnya..kata mas didats ada yg lebih gampang...
huuwwwuuhh *garuk2 kapala*
Kalo yang no images bagaimana ???
Post a Comment