Posted by: piman007 | 05-11-2009

CSS – ปุ่ม กด แบบ CSS

CSS (Cascading Style Sheets)  ได้อำนวยความสะดวกในการสร้างปุ่ม (Button) หรือ แท็บ (Tab) ใน HTML Code ได้ง่ายมากยิ่งขึ้น
จากเดิม Web Developer และ Web Designer ต้องเขียน Javascript ให้ Action ปุ่มของตัวเองมีชีวิตชีวา เช่น ขณะ Web Page stand by
จะปรากฎรูปๆ หนึ่ง แต่ถ้าหากผู้ใช้นำ Mouse Over Javascript จะเรียกรูปภาพอีกรูปเพื่อที่จะให้ได้อีกสีนึงหรืออีกมิติหนึ่ง ที่มีความแตกต่าง
 
แต่ CSS สามารถเรียกใช้งานได้โดยไม่ต้องเขียน JavaScript เพิ่มเติม ที่สำคัญคือ เรียกใช้ในรูปเดียวกัน  ทำให้ Graphic Designer ทำงานได้ง่ายขึ้น
 
1. มาสร้าง Button กันดีกว่า
 
ก่อนอื่นเริ่มจากสร้างปุ่มที่มีรูป 3 รูป 3 Action ใน file เดียวกัน โดย
 
รูปบน หมายถึง ขณะที่ Page ถูกเรียกขึ้นมาใหม่ หรือ กำลัง Stand by
รูปที่สองถัดลงมา หมายถึง ขณะที่ Mouse Over
รูปที่สามรูปสุดท้าย หมายถึง ขณะที่ Mouse Click
 
หมายเหตุ รูปที่ 1,2,3 ต้องมีขนาด กว้างxสูง เท่ากันเพื่อความสวยงาม
 
 
2. มาเขียน HTML และ CSS กัน
 
ดูตัวอย่างง่ายๆ ขอเน้น สีแดงนะครับ 
 

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<style>
body{FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: tahoma,Arial,helvetica,sans-serif; TEXT-DECORATION: none;}
.tab01 a{display: block;width:100px;height:19px;padding-top:3px;padding-bottom:2px;padding-left:10px;padding-right:10px;font-weight:bold;color:#0481fa;text-decoration: none;BACKGROUND: url("button_blue.gif") 0px 0px repeat-x;margin: 0 0px 0 0px;bottom:0px;}
.tab01 a:hover {color:#FFF;background-position: 0 -19px;}
.tab01 a.active{color:#FFF;background-position: 0 -38px;}
</style>
 
<BODY>
   <div class="tab01">
    <a href="http://www.google.co.th&quot; target="_blank">Click 1</a>
    <a href="http://www.pantip.co.th&quot; target="_blank">Click 2</a>
  </div>
</BODY>
</HTML>

คำอธิบาย
 
witdh:100px; = ความกว้างของรูป
height:19 px; = ความสูงของ Tab หรือ ปุ่ม
button_blue.gif = ชื่อรูป
-19px; = ตำแหน่งอ้างอิงเมื่อ Mouse Over    คำนวณง่ายๆ จาก ความสูงของ Tab หรือ ปุ่ม ใส่ค่าติดลบเข้าไป ในที่นี้คือ  -(19) = -19
-38px; = ตำแหน่งอ้างอิงเมื่อ Mouse Click    คำนวณจาก จาก ความสูงของ Tab หรือ ปุ่ม  คูณ 2 แล้วก็ใส่ค่าลบเข้าไป  -(19*2) = -38
 
3. มาดูผลลัพธ์กัน
 
 

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

หมวดหมู่

%d bloggers like this: