(ASK) bikin penempatan button miring bisa ga?

[kiraz]

Tweet

kk skalian saya sbg newbie dalam web design..
pengen bertanya gmana sih caranya buat button dalam web miring2 dan saling timpa menimpa...
seperti pada gambar... menu utama:
home, product, dll nya

[j2spirit]

Tweet

wah canggih

ide saya sih, pake div kotak, gambarnya dibuat sedemikian rupa sehingga seolah2 miring, padahal kotak, sisanya transparan (pake GIF/PNG).
supaya bisa timpa menimpa tinggal margin div nya dibuat negatif aja

tp itu agak 'brutal' sih. yg lebih jago komen donk saya jg pengen tau.

ato cara ke 2, pake flash

[kiraz]

Tweet

ini design kasar ny..
gw emang awalnya pngen pk flash..
tp ternyata karena ada request biar bisa buka di Blackberry...
jadi batal deh rencana gw.. dan gw skrg malez untuk design ulang gt lho.....
nah makanya gw minta solusi dari sesepuh skalian

dasar BB flash aja support

[kiraz]

Tweet

adakah dsini yang bisa bantuin saya

[flowwiththeblood]

Tweet

tag IMG SRC nya pakai properites usemap.
tinggal definisikan area dan hyperlink-nya dengan tag MAP dan AREA menggunakan properties "shape" dan "coords"

[j2spirit]

Tweet

USEMAP!!
gw ampe lupa ada ini ga pernah make sih
tapi usemap seinget gw jg shapenya paling bulet/kotak kan? bisa miring2 gitu gak?

[humanity]

Tweet

kalo gw liat sekilas ya, lebih cocok kalo dibagi kotak-kotak gitu, atau dengan kata lain pake tabel. Pake usemap juga bisa. Btw, itu kan juga pake javascript buat tampilin gambarnya kan.

[flowwiththeblood]

Tweet

USEMAP!!
gw ampe lupa ada ini ga pernah make sih
tapi usemap seinget gw jg shapenya paling bulet/kotak kan? bisa miring2 gitu gak?

bisa, pake "shape=poly"

[kiraz]

Tweet

sip2 thx buat jwaban nya ntara gw coba deh XD
ijo2 has been shooted

[mul14]

Tweet

Iya.. paling mudah itu pake map. Kalo di dreamweaver tinggal klak-klik.

Btw, solusi lain ada juga. Bikin menu gambar miring tsb jadi png+transparent. Trus pake CSS ditempatkan diposisinya. Contohnya nih, tapi cuma dua gambar.

<style>
#home {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 10; /* Makin tinggi angkanya, makin didepan */
}

#portfolio {
  position: absolute;
  top: 170px;
  left: 90px;
  z-index: 9;
}
</style>
<img id="home" src="home.png"/>
<img id="portfolio" src="portfolio.png"/>

Itu berarti yang about us, z-index nya harus diatas 9, soalnya product bakal 8.

Cara lainnya dengan CSS3 -moz-transform, -moz-transform-origin, atau -webkit-transform. Gambar dibikin tetep lurus, trus CSS nya yang miringin. Cuma kalo pake cara ini, cuma bisa dibuka oleh web browser yang udah mengimplementasikan CSS3. Itu berarti BlackBerry gak bisa.