Post archive
Category: CSS
-
สร้าง mouse over image caption ด้วย CSS ล้วนๆ
คลิกที่นี่เพื่อดู Online Demo หลังจากที่ท่านได้ดู Demo ผมเชื่อว่าท่านจะต้องคุ้นแน่นอน การทำงานในลักษณะนี้ แต่ที่ท่านเห็นๆมา เขาจะใช้ javascript เป็นตัวสร้าง หรืออาจจะเป็น jQuery แต่สำหรับบทความครั้งนี้ ไม่ใช่เลย บทความนี้จะใช้ CSS เท่านั้น แต่จะทำงานเหมือน javascript แป๊ะๆ มาดูกันเลยครับ ว่าทำกันอย่างไร HTML เริ่มต้นที่โครงสร้างหลักกันก่อน <div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="desc"> <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span> </a> </div><div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="desc"> <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span> </a> […]
READ MORE -
วิธีเปลี่ยนเมนูListธรรมดาๆให้น่าสนใจ
โดยปกติแล้ว ใน HTML เมื่อเราใช้ ลิสต์ แบบไม่เรียงลำดับ <ul> ผลลัพธ์ที่แสดงออกมา จะมีวงกลมดำๆ อยู่ด้านหน้า เราสามารถเปลี่ยนวงกลมดำๆ เป็นภาพได้ด้วย css ดูโค้ดนะครับ 1 2 3 4 5 6 7 8 9 10 <style type="text/css"> <!– .list_style { list-style-image: url(images/house.png); } –> </style> <ul> <li class="list_style">หัวข้อที่ 1</li> <li class="list_style">หัวข้อที่ 2</li> </ul><style type="text/css"> <!– .list_style { list-style-image: url(images/house.png); } –> […]
READ MORE
