สวัสดีครับ ก้าวสู่ยุค smart phone เต็มรูปแบบ จะแสดงเว็บแค่บนเครื่อง Computer Desktop  อย่างเดียวคงไม่ได้สมัยนี้ผู้คนใช้มือถือ Smart Phone ,Android,iPhone, iPad ,หรือ Tablet เข้าเว็บเยอะขึ้น ถ้าเว็บเพิ่งเปิดใหม่ๆเน้นเนื้อหาเป็นหลักจะเข้าทีต้องลากนิ้วซูมเข้าซูมออกเสียเวลา ยังไม่รวมถึงเมนูที่ขาดๆหายๆ ลองคิดดูถ้าคนเข้าเว็บมาเจอแบบนี้แล้วเนื้อหาเราไม่เด็ดมีประโยชน์จริงเชื่อเถอะว่าคนที่เข้ามาปิดแล้วออกจากเว็บเราภายในไม่กี่วินาทีแน่นอนครับ ทีนี้เว็บโปรแกรมเมอร์อย่างผมก็คงต้องปรับตัวตาม

งานทำเว็บบางครั้งต้องมีการ upload รูปหรือไฟล์บ้างซึ่งจะมี file inputs เป็นตัวกลางเพื่อให้ผู้ใช้กดปุ่มเพื่อไปดึงไฟล์หรือรูปมาอัพโหลด (upload) ซึ่งหน้าตาก็จะเป็นประมาณรูปด้านล่างนี้

วันนี่มี CSS Effect เล็กๆน้อยๆ ไว้ช่วยในเรื่อง UI เวลาเราเลือก checkbox แล้วอยากให้มี Highlight แสดง ตัวอย่างนี้แสดงแบบง่ายๆคือเมื่อเลือกแล้วให้ label แสดงตัวหนา เพื่อจะได้มีประโยชน์เวลารายการข้อมูลเยอะอาจจะลายตาจนทำให้ไม่รู้ว่าเราเลือกอะไรไปบ้าง โดยจะ support พวก web browsers ที่ทันสมัยใหม่ๆหน่อยครับ ผมลองทดสอบกับ Firefox ,Chrome และ Safari ไม่มีปัญหา แต่ IE 7-8 ใช้ไม่ได้ส่วน 9-10 คิดว่าน่าจะได้ครับ

ใช้ css มาก็บ่อย บางทีใช้ Cursor Styles ก็ไปค้นในเน็ตเริ่มเสียเวลาเอามาไว้ในเว็บนี้เลยแล้วกัน และด้านล่างนี้เป็นรูปแบบ CSS Cursor แบบต่างๆตั้งแต่ CSS2-CSS3 ลองเอาไปปรับใช้ให้เหมาะกับอินเตอร์เฟสในหน้าเว็บครับ

ปกติเวลาเราจะทำเมนูที่ประกอบด้วยรูป เมื่อนำ Mouse ไปวางก็จะเปลี่ยนรูปให้ จะทำอย่างนั้นได้ก็ต้องใช้ Javascript เข้าช่วย จริงๆใน Dreamwever ก็มีนะ แต่ถ้าหากเราคำนึงถึง SEO ลิงค์ต่างๆควรจะเป็น Text เพราะ Bot จะไต่ลิงค์ได้ง่าย

วิธีการเหมือนกับ script ซ่อน Scrollbar ด้วย CSSเด๊ะเลย

นานมาแล้วผมเคยใช้ javascript สลับรูปเอา คือต้องมีสองรูปไว้สลับกัน แต่ถ้าใช้ CSS เราก็ใช้แค่รูปเดียว แถมไม่โหลดช้าด้วยนะ

ดัดแปลงแต่งหรูในฟอร์มกรอกข้อมูล ไม่มีอะไรมากครับเพียงใช้ CSS เข้าช่วย เอาล่ะฝอยมากไปแล้วดูตัวอย่างเลยดีว่า

สมัยก่อนถ้าผมต้องการที่จะซ่อน scrollbar ของ browser นั้นต้องใช้ javascript เข้าช่วย แต่ตอนนี้เอา CSS ด้านล่างนี้ไปแป่ะเป็นอันจบเลย! แถม Support Firefox แบะ IE ด้วย