Tag Archives: กรอบมน

ตกแต่ง ie ด้วย CSS3

ตกแต่ง ie ด้วย CSS3

เจอแล้วตัวช่วยตกแต่ง ie6, ie7, ie8 ทำ border-radius, box-shadow, png (ie6) ได้ คราวนี้ เว็บเราก็จะสวยเหมือนๆ กันบนทุก browser แล้ว (เย้ๆ)

วิธีการทำก็ไม่ยากอะไร ทำตามดังนี้

1. ดาวน์โหลดไฟล์จากที่นี่ http://css3pie.com/download-latest
2. แตก zip… แล้วเราจะได้ไฟล์ PIE.htc มา (ใช้ไฟล์ PIE.htc นี่แหล่ะ) และไฟล์อื่นๆ อีกหลายไฟล์ (ไฟล์อื่นๆ เราไม่ได้ใช้ แต่ถ้าใครไปอ่านละเอียดๆ มันก็มีวิธีการนำมาใช้เช่นกัน ใครขยันอ่าน ก็มาบอกต่อกันได้สำหรับไฟล์อื่นๆ)
3. นำไฟล์ PIE.htc ไปวางไว้ที่ root ของเว็บของเรา หรือไว้ที่เดียวกันกับ ไฟล์ html หรือ php

เมื่อเครื่องมือพร้อม เราก็พร้อมลงมือกันล่ะ

ตัด html ของพวกเราตามปกติ เขียน css ตามปกติที่อยากจะทำ ใส่ border-radius, box-shadow, background-gradient โดยที่ ถ้า class ไหน หรือ element ไหนที่เราใช้ border-radius, box-shadow, background-gradient ใน class หรือ element นั้นๆ ให้เราเพิ่มคำสั่ง behavior: url(PIE.htc); ไปด้วย

ถ้าเป็น background ก็เพิ่มคำสั่ง -pie-background: url(image); ถ้าเป็น img ก็เพิ่ม img {-pie-png-fix: true;} อีก แต่ห้ามลืม behavior: url(PIE.htc);

หมายเหตุ

มันจะมีปัญหาที่บางครั้ง text บนพื้นที่เราทำ border-radius มันหายไปไหนไม่รู้ วิธีการแก้ไขก็คือ ให้ใส่
position: relative; z-index: 0; ไว้ที่ element body ข้อนี้เป็นประสบการณ์ที่ลองทำเอง เพราะใน doc ที่อ่านมา มันแค่บอกว่า ให้ใส่แบบนี้ แต่ไม่ได้บอกว่าให้ใส่ตรงไหน (หรืออาจจะแปลอังกฤษเป็นไทยไม่ค่อยเก่งเลยไม่เข้าใจ) แต่พอลองแล้ว มันก็ใช้ได้ …จึงมาบอกต่อ

ขอขอบคุณ เครื่องมือดีดี จาก
http://css3pie.com/

ทำให้พวกเราได้พัฒนางานให้มีหน้าตาได้มาตรฐานได้เท่ากันทุก browser เพื่อ user ของเรา