Monthly Archives: August 2011

Aug23

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

Posted on by
ตกแต่ง 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 ของเรา

Aug15

Web Design Trends in 2011

Posted on by
Web Design Trends in 2011

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. If your only goal is to impress a community of fellow designers with your flashy designs, you’ll find yourself quickly beneath the tide. 2011 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.
2011