อาจจะมี web designer บางคน ที่ออกแบบเว็บไซต์ แล้วอยากจะได้ กรอบ แบบใสๆ เห็นพื้นหลัง แต่ปัญหาที่ทำให้เรา ต้องเลิกใช้มัน ก็คือ

1. ถ้าทำให้ใส ด้วยภาพ ชนิด png มันจะใช้ได้เฉพาะ browser ใหม่ๆ IE6 ไม่ใสด้วย
2. ทำให้ใสด้วยโค้ด css เช่น Microsoft.gradien, filter ต่างๆ ก้ใช้ได้เฉพาะ IE เบราเซอร์อื่นไม่เล่นด้วย
3. ใช้ภาพ png แล้วใช้โค้ด png ie fix ก็ได้เหมือนกัน แต่ต้องใช้ png รูปใหญ่มาก ไฟล์หนัก โหลดช้า ไม่คุ้มค่าการใช้งาน

เว็บไซต์ เดลินิวส์ ในส่วน เมนูบาร์ใช้โค้ด css ทำให้ใส

แอบเข้าไปดู css หน่อยซิว่าเขียนอะไรยังไง ใช้ web delveloper toolbar เจอแล้วเขียนแบบนี้น่ะเอง

#menu DD {
MARGIN-TOP: -25px;
LEFT: 150px;
WIDTH: 240px;
POSITION: absolute;
background-color: #F5F5F5;
border: 1px solid #CCCCCC;
color: #D2517E;
overflow: visible;
filter: Alpha(Opacity=90);
}

คำสั่ง filter ใช้ได้กับ IE นะ ค่า opacity มือ โฟโต้ชอป ก็คงคุ้นเคยกันอยู่ มันทำให้ภาพจางใสนั่นเอง จากเต็ม 100 ให้เป็น 90 ก็คือ จางลง 10 น่ะเอง แต่เราจะทำไง ให้ เบราเซอร์อื่นเป็นแบบนี้ด้วย ง่ายๆ แค่เพียง เติมอีก 2 บรรทัดเท่านั้น เป็น

#menu DD {

property อื่น ไม่อธิบายนะ…

filter: Alpha(Opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

-moz- ก็คือ สั่งให้เบราเซอร์ ตระกูล mozila รวมทั้ง firefox ทำ opacity ส่วน บรรทัดถัดมา เอาไว้สำหรับ Opera เวอชั่น 9 ขึ้นไปนะครับ ส่วนต่ำกว่านั้น ยังทำพื้นหลังใสไม่ได้ เพียงเท่านี้ เราก็ได้ พื้นใส ดังต้องการ ดูได้ทั้ง IE6 firefox1.5 ขึ้นไป (เวอชั่นต่ำกว่านี้ไม่ได้ลอง) และ แถม Opera เวอชั่น ปัจจุบัน ด้วย

ประยุกต์ใช้ opacity

CSS ดังนี้

div.transOFF {width: 300px; background-color: silver;border:1px solid black; }

div.transON {width: 300px; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

HTMLดังนี้

<div class=”transOFF” onmouseover=”this.className=’transON‘” onmouseout=”this.className=’transOFF‘”>

<p style=”padding:5px;width:75%;”>ลองเอาเมาส์แตะที่นี่ ควรจะแสดงผลเหมือนกันทั้ง IE Fx Opera เวอชั่นล่าสุดนะ</p>

</div>

ได้ผลดังนี้

***** ข้อควรระวัง เมื่อใช้ โค้ดนี้ ส่งที่อยู่ในกรอบ จะจางลงหมดไม่ว่าจะเป็น text textbox image