Archives

04 Nov

การทำ Responsive ให้กับ table ที่มีข้อมูลหลายคอลั่มน์ด้วย css

ในการทำเว็บไซต์ให้เป็น responsive นั้นอีกหนึ่งปัญหาที่ค่อนข้างลำบากคือการทำให้ table grid ที่มีข้อมูลค่อนข้างมากหลายคอลั่มน์ยาวเกินหน้าจอสำหรับโมบายหรือหน้าจอเล็กก็เลยลองหาวิธีไปเจอมาหนึ่งวิธีที่ค่อนข้างดี โดยใช้ css เท่านั้น

27 Aug

สร้างรูปภาพ 360 ใช้ในเว็บไซต์ด้วย three.js

บทความการทำรูป 360 องศาแบบ facebook หรือ google street view เพื่อเอามาใช้ในเว็บไซต์ของเรา เช่นเว็บโรงแรมที่ต้องการให้ลูกค้าเห็นห้องและสถานที่ เพื่อให้เว็บมีลูกเล่นที่หน้าสนใจ พร้อม source และวิธีการถ่ายภาพ

02 Aug

การทำ LOGO 3D ในเว็บไซต์ ด้วย three.js

การทำ 3d ในบทความนี้จะใช้ library  three.js ซึ่งเจะ render โดยใช้ css3 และ webgl  ( web gl เป็น 3d Graphic Library ที่ติดมากับเว็บ browser

28 Jul

การทำฝนตกในหน้าเว็บ ด้วย cavans

เทคนิคการทำ effect ฝนตกในหน้าเว็บโดยใช้ HTML5 CAVANS + JAVA-SCRIPT เอาไว้แต่งเว็บให้มีความน่าสนใจมากขึ้น

14 Jul

การออกแบบทำเสื้อยืดตัวอย่าง(ออนไลน์) อย่างง่ายๆ ด้วย fabric js

ในการทำ Custom T-Shirts หรือการออกแบบลายเสื้อยืดออนไลน์ โดยใช้ fabrice js เป็น javascript canvas library ทำให้สามารถควบคุณ canvas ได้ง่ายมากกว่าแต่ก่อนมาก ทำให้ไม่ยากเหมือนแต่ก่อน มี sourcecode ให้ไปศึกษาครับ

13 Jul

ทำการซูมหน้าเว็บด้วย zoom js

การทำซูม Element แบบง่ายๆ เอาไว้แต่งเว็บไซต์ให้มีความแตกต่าง โดย plugin ที่จะใช้ชื่อว่า zoom js ที่ค่อนข้างเล็กและไม่หนักมาก

12 Jun

ใช้ js ทำ สกรีนแคปเจอร์ หน้าเว็บ และ บันทึกเป็นรูปภาพ

บทความนี้เป็นเทคนิคการทำ สกรีนแคปเจอร์ หน้าเว็บ ด้วย javascript ซึ่ง user สามารถเลือก ตำแหน่งที่ต้องการ แคปเจอร์และบันทึกเป็น รูปภาพได้

09 Jun

การทำ FACE DETECT โดยใช้ Jquery plugin

การทำ face detect นั้น เป็นการทำ image processing สามารถดึงรูปหน้าคนจากภาพถ่ายออกมา ซึ่งความแม่นยำนั้นขึ้นอยู่กับอัลกอริทึมของไลบารี่นั้น วันนี้จะมาสอนการทำโดยการใช้ plugin free ของ jquery กันครับ (มี sorce code download)

23 May

ทิปการทำ slide perspective แบบเก๋ๆ ให้เข้ากับเว็บไซต์

ในการทำเว็บไซต์มีการทำ slide show ในหลายๆแบบ การทำรูป perspective ให้เข้ากับรูป iPhone ที่วางอยู่จึงเป็นไอเดียอีกแบบที่สามารถนำไปใช้ในงานเว็บไซต์ของเราเพื่อให้งานออกมามีความแปลกใหม่ หรือเข้ากับ concept ของงานนั้นๆ ครับ (มี Code ตัวอย่าง)

15 May

เทคนิคการสร้าง tooltip โดยใช้ css แบบง่ายๆ

บทความนี้เป็นเทคนิคง่ายๆ ในการทำ tool tip โดยไม่ต้องพึ่ง js หรือ plugin อื่น ใช้เพียงแค่ css และ element ของ html เท่านั้น