สงสัยวิธีทำเมนู ของ avast.com

[ooooo]

1.สร้าง DIV Tag ธรรมดาๆขึ้นมาอันนึง แล้วใส่ background ตามถนัด

ตัวอย่าง CSS :

โค้ด เลือกทั้งหมด ขยายเนื้อหา

#firefox {
background-image:url(firefox.png);
width: 300px;
height: 289px;
}




2.สร้าง Layer โดยใช้โค้ด <div id="Layer1"></div>
แล้วใส่ CSS กำหนด z-index เพื่อให้ระบุว่าเป็นชั้นที่เท่าไหร่
(ถ้าใช้ dream มันจะกำหนดให้อยู่แล้ว) ตูอยากให้มันเป็นชั้นแรก
ดังนั้นต้องเอา z-index ให้มีค่ามากๆ งั้นเอาซัก 10

พร้อมกันนั้นก็กำหนดความโปร่งใส่ด้วย คงจะพอมองโค้ดกันออก

ตัวอย่าง CSS :

โค้ด เลือกทั้งหมด ขยายเนื้อหา

#Layer1 {
position:absolute;
width:100px;
height:100px;
z-index:10;
background-color: #fff;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
left: 0;
top: 0;

และถ้าดูใน dream จะเห็นมันแสดงผลอย่างงี้
(ไม่ต้องสนใจว่าทำไมไม่โปร่งแสง เดี๋ยวให้ดูตอนมันแสดงผลในเบราเซอร์ทีเดียว)




3.ต่อไปนี้เดี๋ยวจะแสดงความโปร่งให้ดู โดยที่ตูจะกำหนด z-index ลดหลั่นลงมาเรื่อยๆ





โค้ด css ทั้งหมดที่ใช้

โค้ด เลือกทั้งหมด ขยายเนื้อหา

/* CSS Document */

#firefox {
background-image:url(firefox.png);
width: 300px;
height: 289px;
}

#Layer1 {
position:absolute;
width:100px;
height:100px;
z-index:10;
background-color: #fff;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
left: 0;
top: 0;
}

#Layer2 {
position:absolute;
width:100px;
height:100px;
z-index:9;
background-color: #fff;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
left: 30px;
top: 30px;
}

#Layer3 {
position:absolute;
width:100px;
height:100px;
z-index:8;
background-color: #fff;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
left: 60px;
top: 60px;
}

#Layer4 {
position:absolute;
width:100px;
height:100px;
z-index:7;
background-color: #fff;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
left: 90px;
top: 90px;
}

#Layer5 {
position:absolute;
width:100px;
height:100px;
z-index:6;
background-color: #fff;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
left: 120px;
top: 120px;
}

}


และนี่คือสิ่งที่ได้ ไม่ว่าจะดูจาก ie และ firefox (ไม่ได้ทดสอบใน opera)

[Zafire06]

กรี๊ดดดดดดดดดดดดดดดดดด 

[Ou!]

โหววววว...

[saa3]

อ้ะ ไม่ยากนี่หว่า

[เต่ามาก]

กรี๊ดๆ 

[L]

ห่าโอเอ๊ย
น้องมิตร สนใจมาเป็น ลูกบุญธรรมเฮียมะ 


ยอดเยี่ยม ยอดเยี่ยม

[ooooo]

อีกเพียบ
http://www.ssi-developer.net/css/visual-filters.shtml

[iannnnn]

มันใช้ได้กะแค่ ie หรือเปล่าหนอ?

[ooooo]

ใช่ครับ เมื่อไหร่ที่ใช้คำสั่ง filter นั่นจะเป็นของ ie

[iannnnn]

งั้นผ่าน
ชาตินี้ตูไม่แตะ