membuat lengkungan di menu

Pada kali ini si cupu akan memberikan tutorial yang bener-bener simple. Tapi mungkin berguna banget. Coz dulu pada saat si cupu belajar CSS melakukan kesalahan yang amat fatal. Yaitu memakai image pada setiap lengkungan. Tidak memenggunakkan background-image. Apabila memakai image akan hancur apabila di isi (berlebihan banget). Kok malah curhat gini se. oke kita mulai aja tutorialnya.

Pada saat kita menginginkan gambar seperti ini

gambar menu

Maka yang harus kita lakukan adalah menslicing lengkukan kiri dan kanannya. Seperti gambar di bawah ini

kiri

kanan

setelah itu baru kita mengatur CSS-nya.

Cukup simple sebenarnya CSS-nya. CSS yang berisi tiga class. Class yang pertama adalah background dari menu. Lalu yang kedua adalah background-image gambar kiri.jpg dan yang terakhir adalah background-image gambar kanan.jpg. Bingung dengan isi CSS-nya??? )

.full{
width:521px;
height:34px;
background-image:url(bg.jpg);
background-repeat:repeat;
}
.kanan{
width:521px;
height:34px;
background-image:url(kanan.jpg);
background-repeat:no-repeat;
background-position:right;

}
.kiri{
width:521px;
height:34px;
background-image:url(kiri.jpg);
background-repeat:no-repeat;
background-position: left;
}

setelah itu kita masuk ke HTML-nya. Untuk HTML-nya cukup mudah. kita atur div yang pertama adalah class full, lalu didalamnya adalah class kiri. Dan di dalam class kiri adalah class kanan.

ngak sulit kan. atau bingung dengan htmlnya???

ini script di dalam body HTML-nya

<div class=”full”><div class=”kiri”><div class=”kanan”></div></div></div>