การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น

สอนทำเว็บไซต์-css-animation

การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น การทำ CSS Transition และการทำ CSS Animation เป็นการเพิ่มลูกเล่นให้กับเว็บไซต์ให้ดูน่าสนใจมากยิ่งขึ้น ทำให้ผู้ใช้งานเว็บไซต์ได้รู้สึกว่าเว็บไซต์มีปฏิสัมพันธ์กับผู้ใช้งานมากยิ่งขึ้น การทำ transition คือการปรับเปลี่ยนคุณลักษณะของวัตถุจากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่ง ส่วนการทำอนิเมชั่นคือการทำการเคลื่อนไหวหรือเคลื่อนย้ายตำแหน่ง ขนาด องศา เป็นต้น

อ่านเพิ่มเติม


สอน CSS วิธีทำ active เมนู ด้วย CSS และ jquery

วิธีทำ-active-menu-ด้วย-css-jquery

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

อ่านเพิ่มเติม


CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม

วิธี-mask-รูปเป็นวงกลมด้วย-CSS

CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม แนะนำวิธีทำรูปโปรไฟล์ หรือรูป Avatar บนเว็บไซต์ให้มีกรอบรูปวงกลมคล้าย ๆ การ mask โดยอาศัยความสามารถของ CSS ( Cascading Style Sheets ) ที่สำคัญเขียนโค๊ดแค่บรรทัดเดียว สามารถเรียกใช้งาน class บน img element หรือ div ได้เลย ลองไปดูกันครับว่า มีวิธีเขียนยังไงบ้าง

อ่านเพิ่มเติม


ทำเว็บไซต์ ด้วย CSS3 Media Query คืออะไร และการใช้งาน

สอน-CSS_Media_Queries

ทำเว็บไซต์ CSS3 Media Query คืออะไร เขียนคำสั่ง CSS ให้ทำงานในขนาดหน้าจอที่แตกต่างกัน ทำเว็บไซต์ ด้วย CSS3 Media Query คือคุณสมบัติที่มีอยู่ในภาษา CSS3 ( Cascading Style Sheets ) เป็นคำสั่งไว้สำหรับกำหนดการแสดงผลในรูปแบบต่าง ๆ ของข้อมูล โดยกฏการใช้งานจะขึ้นต้นด้วย @media และตามด้วยเงื่อนไข ( Condition ) คำสั่ง CSS ทั้งหมด ที่ถูกครอบไว้ด้วย media query จะทำงานก็ต่อเมื่อเข้ากับเงื่อนไขของ media query นั้น ๆ เท่ากัน ตัวอย่างคำสั่ง media query

อ่านเพิ่มเติม


วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ

วิธีทำ-Banner

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

อ่านเพิ่มเติม


ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content

สอน-CSS-Pseudo-Element-2

ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content ทำเว็บไซต์ สอน CSS คงจะเคยผ่านตามากันบ้างแล้วสำหรับนักพัฒนาเว็บไซต์สำหรับ before, after และ content เพราะเป็นหนึ่งในความสามารถของการเขียน CSS เราเรียก syntax เหล่านี้ว่า Pseudo Element หรือองค์ประกอบแฝงที่จะถูกเพิ่มเข้าไปใน html นั่นเองครับ Pseudo Element ไม่ได้มีเพียงแค่ before และ after แต่ยังมีอีกหลาย ๆ คำสั่งตัวอย่างเช่น

อ่านเพิ่มเติม


HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง

วิธีทำ-full-video-background

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

อ่านเพิ่มเติม