ทำ opacity ให้ cross browser
อาจจะมี web designer บางคน ที่ออกแบบเว็บไซต์ แล้วอยากจะได้ กรอบ แบบใสๆ เห็นพื้นหลัง แต่ปัญหาที่ทำให้เรา ต้องเลิกใช้มัน ก็คือ
- ถ้าทำให้ใส ด้วยภาพ ชนิด png มันจะใช้ได้เฉพาะ browser ใหม่ๆ IE6 ไม่ใสด้วย
- ทำให้ใสด้วยโค้ด css เช่น Microsoft.gradien, filter ต่างๆ ก้ใช้ได้เฉพาะ IE เบราเซอร์อื่นไม่เล่นด้วย
- ใช้ภาพ 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>
ได้ผลดังนี้
ลองเอาเมาส์แตะที่นี่ ควรจะแสดงผลเหมือนกันทั้ง IE Fx Opera เวอชั่นล่าสุดนะ
***** ข้อควรระวัง เมื่อใช้ โค้ดนี้ ส่งที่อยู่ในกรอบ จะจางลงหมดไม่ว่าจะเป็น text textbox image
Nu said,
พฤษภาคม 29, 2007 @ 10:59 am
ใส่ position:relative ใน จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ
Nu said,
พฤษภาคม 29, 2007 @ 11:00 am
อ้าว ใส่ tag html แล้วมันไม่ติดอ่ะ เอาใหม่
ใส่ position:relative ใน “” จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ
Nu said,
พฤษภาคม 29, 2007 @ 11:05 am
ไม่ได้อีกละ จะบอกว่า –> ใส่ไว้ใน tag p นะ
<p style=”padding:5px;width:75%;position:relative;”>
:”>
admin said,
พฤษภาคม 29, 2007 @ 1:55 pm
อ่า แล้วทำไมต้องใช้ position:relative ด้วยล่ะครับ
AnGiKo said,
มิถุนายน 8, 2007 @ 10:30 pm
ป.ล. การใช้ filter: กำหนด Opacity จะทำให้ CSS ไม่ผ่านการตรวจสอบนะครับ
เป็นผมจะใช้ JavaScript ในการกำหนด Opacity ครับ
admin said,
มิถุนายน 10, 2007 @ 7:30 am
มีโค้ดไหมครับ เอามาโชว์หน่อยย
admin said,
มิถุนายน 10, 2007 @ 10:40 pm
อ่อ เข้าใจแระ
admin said,
มิถุนายน 12, 2007 @ 9:09 pm
ดูหลายๆท่าน จะให้ความสำคัญ กับว่า validate หรือไม่ มากเหมือนกันนะครับ ใครอยากเอาเว็บตัวเองเช็ก ว่าโค้ดตัวเองเขียนดี เขียนถูกหรือไม่ กดไปตามปุ่ม html css มุมล่างขวา ของหน้าเว็บได้เลยครับ ส่วน divland ไม่ validate นะครับ บอกไว้ก่อน
SP said,
มกราคม 8, 2008 @ 4:40 pm
อยากทราบว่า ฟิวเตอร์ใช้กะ ไม่ได้เหรอคับใช้ได้แต่
SP said,
มกราคม 8, 2008 @ 4:45 pm
อยากทราบว่า ฟิวเตอร์ใช้กะ tr ไม่ได้เหรอคับใช้ได้แต่ td กะ tag อื่นๆ
Petch said,
พฤศจิกายน 11, 2008 @ 10:27 am
ช่วยหา Script ที่ทำให้เฉพาะพื้นจางลง แต่ตัวอักษรหรืออะไรก็ได้ที่อยู่ในกล่องไม่จางลง คือแนวคิดจะให้แค่ภาพมันจางลงเท่านั้นเอง ช่วยหน่อยครับ เซียนทั้งหลายน่าจะมีทางออกให้ผมอยู่
SilliconValley said,
ธันวาคม 24, 2008 @ 2:31 pm
รู้สึก ie6 จะใช้ไม่ได้นะครับ ใครเป็นบ้าง