สร้างเว็บไซต์แสดงผลแบบ OVERLAY ด้วย CSS

ExpandingOverlayEffect


วันนี้มาดูเทคนิคการใช้งานของ css แบบเจ๋งอีกแบบครับบทความนี้ผมว่าจะเอามาแนะนำนานแล้วแต่ไม่ค่อยมีเวลาวันนี้สมใจซักที่เป้นการออกแบบจะเรียกว่าแบบ metro ก็น่าจะได้นะเพราะจะเป็นการใช้เทคนิคของภาพสี่เหลี่ยมมาใช้งานแต่ว่าสิ่งที่น่าสนใจอาจจะไม่อยู่ตรงนั้นเพราะสิ่่งที่เราสนใจคงต้องเป็นส่วนที่ใช้ในการแสดงผลของหน้าเมื่อถ้าจากตัวอย่างถ้าเราทำสอบโดยการคลิกจะมีการแสดงผลเป็นหน้าแบบเต็มจอ หรือที่เรียกว่าเทคนิค Overlay สามารถแสดงภาพขึ้นมาพร้อมๆ กันในหน้าจอแสดงผลเดียวกัน หรือเรียกว่า Tuner ในระบบโทรทัศน์ จากตัวอย่างที่ใช้การแสดงผลของสภาพอากาศ

Continue reading สร้างเว็บไซต์แสดงผลแบบ OVERLAY ด้วย CSS

สร้างสไลด์โชว์แบบแยกหมวดหมู่ย่อย ด้วย CSS และ JQUERY

Simple Multi-Item Slider


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

Continue reading สร้างสไลด์โชว์แบบแยกหมวดหมู่ย่อย ด้วย CSS และ JQUERY

สร้างโฟลเดอร์แบบเคลื่อนไหวเหมือน Mac OSX ด้วย CSS3


ได้เอามาแนะนำกันซักที่กับการวิธีการสร้างโฟลเดอร์ให้เหมือน Mac OSX โดยการใช้ css3 และ UI ของ jQuery เข้ามาทำงานร่วมกันโดยรูปแบบการทำงานจะเป็นแบบ 3D โดยการจัดการที่งานเมื่อเรานำเม้าไปลากสิ่งที่เราต้องการเก็บไว้ในงโฟลเดอร์ก็จะจัดเก็บเข้าไปงโฟลเดอร์และสามารถนับจำนวนไฟลืที่อยู่ในนั้นได้เป็นเทคนิคที่ทำให้เราเห็นการสร้างชิ้นงานด้วย css3 และ UI ของ jQuery ที่น่าสนใจอีกด้วย

Continue reading สร้างโฟลเดอร์แบบเคลื่อนไหวเหมือน Mac OSX ด้วย CSS3

สร้างนาฬิกาสีสันแบบเก๋ๆ ด้วย CSS & jQuery


วันนี้เป็นการสร้างนาฬิกาด้วย CSS และ jQuery โดยการใช้ css ในการจัดการสีและรูปแบบหนุมของรูปวงกลมที่ใช้ในการหมุนคล้ายกับเข็มนาฬิกาโดยเวลาที่กำหนอจะเป็นเวลาปัจุบันโดยกำหนดเป็น 24 ชั่วโมง โดยรูปแบบของหน้า index จะเป็นการใช้ XHTML เป็นมาร์กอัปโดยการใช้ Div และเรียกใช้งานเอาครับ

Continue reading สร้างนาฬิกาสีสันแบบเก๋ๆ ด้วย CSS & jQuery

ทำเครื่องเล่นเสียงที่ตอบสนองต่อการสัมผัสด้วยปลั๊กอิน jQuery และ CSS [responsive]


เป็นอีกบทความที่เอามาแนะนำในเรื่องของปลั๊กอิน jQuery และการใช้ css โดยการสร้างปุ่ม play สำหรับการเล่นเพลงที่จะสามารถเล่นเพลงได้ทั่วไปแต่ส่วนใหญ่จะเป็นการใช้ media player หรือ flash ซึ่งจะต้องมีการลงปลั๊กอินในการใช้งานของแต่ล่ะบราวเซอร์โดยรูปแบบการสร้างเครื่องเล่นเพลงในวันนี้อย่างที่บอกครับจะเป็นการสร้างโดยปลั๊กอิน jQuery และ css โดยจะสามารถเล่นและแสดงผลได้ทุกบราวเซอร์และสามารถใช้ css เข้ามาช่วยในการออกแบบอีกด้วยแต่ที่น่าสนใจคือการสร้างแบบ RESPONSIVE ที่สามารถย่นย่อขนาดของเครื่องเล่นให้เข้ากับขนาดหน้าจอต่างๆได้เช่นบนหน้าจอของ iphone ipadmini หรือมือถืออื่นที่มีขนาดหน้าจอต่างๆ ก็จะสามารถปรับขนาดได้ตามอัตโนมัตินั้นเองเรามาลองดูตัวอย่างกันเลยดีกว่าครับ

Continue reading ทำเครื่องเล่นเสียงที่ตอบสนองต่อการสัมผัสด้วยปลั๊กอิน jQuery และ CSS [responsive]

สร้างไอคอนรูปภาพโดยไม่ต้องใช้ภาพด้วย CSS แท้ๆ


ก่อนหน้านี้ที่ผมเคยแนะนำการสร้างไอคอนโดยไม่ต้องใช้รูปภาพและการใช้ CSS เข้ามาช่วยในการพัฒนาเว็บไซต์วันนี้ก็เป็นอีกรูปแบบหนึ่งที่เป็นการใช้ css ในการกำหนดจุดต่างๆและสร้างไอคอนเป็นรูปภาพเพื่อใช้ในเว็บของเราข้อดีก็คือมันสามารถที่จะขยายขนาดได้เลื่อยๆและทำให้เว็บเราโหลดไม่โหลดรูปภาพนานๆอีกด้วยครับเป็นอีกแนวทางในการเลือกใช้เทคโนโลยีใหม่เพื่อการพัฒนาเว็บไซต์ให้มีประสิทธิภาพมากยิ่งขึ้นนั้นเอง

Continue reading สร้างไอคอนรูปภาพโดยไม่ต้องใช้ภาพด้วย CSS แท้ๆ