Oct 24, 2007

Rounded CSS

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 ;)

6 komentar:

bolled said...

nid... bang ben minta di jelasin dari awal neh, ga mudeng.... gimana donk

nidyizsme said...

:D hhihihi..

Anonymous said...

Bagus tutorialnya... hayo.. hayo.. posting lagi! :)

Anonymous said...

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.

nidyizsme said...

*sambil injek2 tanah*..tuh khan basi tutorialnya..kata mas didats ada yg lebih gampang...
huuwwwuuhh *garuk2 kapala*

Anonymous said...

Kalo yang no images bagaimana ???