Blog Map ใส่ลูกเล่นให้ช่อง Comment ด้วย CSS ตอนที่ 3 ~ เพิ่มสีสันให้ปุ่มกด
posted on 13 Mar 2007 21:40 by jennessa in Designสวัสดีค่ะ ขอโทษด้วยที่มาอัพช้ามาก ๆ เพราะว่ากำลังจัดการกับเวบไซต์ใหม่อยู่ค่ะ -*- ยังมีอะไรต้องศึกษาอีกเยอะแยะมากมาย
การใส่ลูกเล่นให้ช่องใส่ comment ด้วย CSS คราวที่แล้วว่าด้วย การเปลี่ยนกรอบของช่องใส่ comment มีใครลองเอาไปทำแล้วบ้างคะ ทิ้ง comment ไว้หน่อยนะ เจนเนสซ่าอยากเห็น :D
ตอนที่ 3 นี้ จะเปลี่ยนจาก BG มาเป็นการเล่นกับปุ่มกดนั่นเอง เชื่อว่าชาว Exteen ต้องเคย comment บลอคของคนอื่นอย่างแน่นอน จำได้มั้ยคะว่าในช่องใส่ comment นั้น มีปุ่มกดทั้งหมดกี่ปุ่ม ?
ส่วนใหญ่เราจะเห็นปุ่มกดตามเวบต่าง ๆ เป็นพื้นสีเทาใช่มั้ยคะ แต่จริง ๆ แล้วเราสามารถปรับแต่งส่วนต่าง ๆ ของปุ่มกดได้ด้วย CSS ค่ะ มาดูวิธีทำกันค่ะ
1. ไปที่ แก้ CSS ด้วยตัวเอง แล้วหาคำว่า input ดังข้างล่างค่ะ
input{
font:11px Tahoma,"MS Sans Serif";
}
2. ต่อไปมาดูส่วนประกอบต่าง ๆ ที่เราสามารถจะเพิ่มไปใน input ได้ค่ะ
- font: ได้แก่ color, font-size, font-weight, font-family, font-style
- border: ได้แก่ border, border-top-color, border-left-color, border-right-color, border-bottom-color,
- background: ได้แก่ background-color, background-image
ถ้าอธิบายแต่ละคำสั่งมันจะยาวเกินไป ดูตัวอย่างแล้วลองเอาไปประยุกต์ใช้กันดูดีกว่านะคะ
3. ตัวอย่างการเปลี่ยนปุ่มหลาย ๆ แบบ
Before: 
After:
| input { border:2px solid; border-top-color: #FF0000; /*สีแดง ขอบบนของปุ่ม*/ border-right-color: #FFFF00; /*สีเหลือง ขอบขวาของปุ่ม*/ }
|
| input { font-size: 14px; color: #990099; /*สีม่วง*/ font-family: Tahoma; font-weight: bold; }
|
| input { background-color: #FF9999; border: 1px solid; }
|
4. เป็นไงคะ ปุ่มกดหลังจากผ่านการศัลยกรรม :D ลองนำทั้ง background, font และ border มาผสม ๆ กัน เปลี่ยนสีเปลี่ยนแบบไปเรื่อย ๆ จนกว่าจะได้ที่ถูกใจนะคะ
เหมือนเดิม ใครลองเอาไปใช้แล้ว อย่าลืม comment ไว้นะคะ เจนเนสซ่าอยากเห็นหลาย ๆ แบบ (^ ^)V
#1 By ギグ♥♥atanberry on 2007-03-13 21:49