เทคนิคการใช้ CSS กำหนดขนาดตัวอักษรในเว็บไซต์ด้วยหน่วย REM

เทคนิคการใช้ CSS กำหนดขนาดตัวอักษรในเว็บไซต์ด้วยหน่วย REM

การกำหนดหน่วย (Unit) ใน CSS เพื่อกำหนดขนาดการแสดงผลข้อความของเราในเว็บไซต์ยังเป็นที่ถกเถียงกันในขณะนี้ ว่าจะเขียนหรือกำหนดขนาดของข้อความของเราโดยใช้หน่วยอะไรดี ที่จะครอบคลุม และรองรับการแสดงผลกับทุกๆเว็บบราว์เซอร์ (ฺBrowser) ที่แตกต่างกัน ซึ่งหลักๆที่นิยมกันมีอยู่ 2 วิธี คือกำหนดขนาดด้วยพิกเซล (px)กำหนดขนาดด้วย em (เอ็ม) จากข้อ 1 การกำหนดขนาดโดยใช้หน่วย px (Pixel) นั้นจะเป็นการกำหนดขนาดที่ตายตัว (Absolute) ซึ่งเป็นหน่วยที่นิยมใช้กันอย่างมากในอดีต และปัจจุบันก็ยังนิยมใช้กันอยู่ ซึ่งข้อดีของหน่วย...

สร้าง Effect การเคลื่อนไหวเมื่อเปลี่ยนหน้าเว็บไซต์ด้วย CSS3

สร้าง Effect การเคลื่อนไหวเมื่อเปลี่ยนหน้าเว็บไซต์ด้วย CSS3

เมื่อก่อนถ้าเราจะใส่ Effect การเคลื่อนไหว ให้กับหน้าเว็บไซต์ส่วนมากเรามักจะใช้ Javascript ในการสร้าง Effect การเคลื่อนไหวขึ้นมาใช้ในเว็บไซต์ของเราให้ดูมีลูกเล่น และมีชีวิตชีวา แต่เมื่อ CSS3 ได้ถือกำเนิดขึ้นมา การสร้าง Effect ให้กับหน้าเว็บไซต์ก็มีทางเลือกเพิ่มขึ้นอีกทางนึง วันนี้ผมจะแนะนำเทคนิค การใส่ Effect การเคลื่อนไหวให้กับหน้าเว็บไซต์ของเราด้วย CSS3 กันครับHTML CODE ส่วนเนื้อหา<!-- Home --><div id="home" class="content">    <h2>Home</h2> &nbs...

สร้าง Effect เมื่อ Mouse Hover ให้กับ Icon Menu ด้วย CSS3

สร้าง Effect เมื่อ Mouse Hover ให้กับ Icon Menu ด้วย CSS3

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

สร้าง tooltips กล่องคำอธิบายเล็กๆ ด้วย css3

สร้าง tooltips กล่องคำอธิบายเล็กๆ ด้วย css3

ปกติแล้วใน Browser เมื่อเรากำหนดแท็ก title ก็จะมี tooltip หรือกล่องคำอธิบายเล็กๆแสดงขึ้นมา เพื่ออธิบาย หรือขยายความ หรือบ่งบอกเพิ่มเติมเกี่ยวกับส่วนนั้นๆ ว่าคืออะไร เช่นรูปภาพ เป็นรูปภาพเกี่ยวกับอะไร หรืออาจจะแสดงหัวข้อเนื้อหาก็ได้ แต่เรื่องความสวยงาม และลูกเล่นแล้วไม่ค่อยสวยเท่าไหร่ มันยังไม่ถูกใจวัยรุ่นอย่างเราๆ วันนี้ผมเลยจะมาแนะนำการสร้าง tooltip ด้วย css3 กันครับCSS3/** * CSS3 Tips * * A stylesheet for creating tooltips without using anything other than CSS3. * * created by c.bavota * relea...