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 thoughts on “Rounded CSS

  1. hehehe.. ada cara yang jauh lebih cepet… :Dcari di gugel, jquery corner. liat cara pakenya, gampangnya minta ampun. gag usah pake lagi tuh bikin gambar… :Dabis itu di sharing ya pengalamannya.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s