hi5Thai!'s Archiver

plamllsDlove กระทู้เมื่อ 13-5-2009 13:32

วิธีทำเส้นคั่นคอมเม้น&ปุ่มคอมเม้นเเล้วก้อ... อัพเพิ่มน๊ะ!!~

มะรุ้ว่าจะถูกจัยกันมั้ยน๊ะ
มะเคยทำอะค่ะลองทำดู
ชอบมั่ยวิธีทำปุ่มคอมเม้ม
[b][color=blue]เปิดโปรแกรมขึ้นมา
กดเลือก File > New...[/color][/b]
[img]http://img.thzhost.com/i/n8/mytt0.gif[/img]
[b][color=red]* ขนาดชิ้นงานกำหนดเท่าไหร่ก็ได้ เพราะตอนสุดท้ายต้องตัดอยู่ดี กะให้มีพื้นที่ไว้พอทำปุ่มด้วย
ต่อไปก็จะเข้าสู่วิธีทำจ้า[/color][/b]
[img]http://img.thzhost.com/i/cc/zett1.gif[/img]

[img]http://img.thzhost.com/i/af/zctt3.gif[/img]

[img]http://img.thzhost.com/i/sj/vvtt4.gif[/img]

[img]http://img.thzhost.com/i/53/vqtt5.gif[/img]

[img]http://img.thzhost.com/i/08/50tt6.gif[/img]
[b][color=red]* ไม่ต้องเสียเวลาเลือกสีนาน เพราะยังไงมันก้อจะถูก style ทับอยู่ดี[/color][/b]
[img]http://img.thzhost.com/i/oy/xxtt7.gif[/img]
[b][color=blue]โหลดสไตล์เก็บไว้ที่ไหน ก้อเปิดเรียกขึ้นมาใช้เลยค่ะ[/color][/b]
[img]http://img.thzhost.com/i/io/hatt8.gif[/img]

[img]http://img.thzhost.com/i/xn/fttt9.gif[/img]

[img]http://img.thzhost.com/i/xn/fttt9.gif[/img]

[img]http://img.thzhost.com/i/90/4tt10.gif[/img]
[b][color=blue]เข้าสู่ขั้นตอนเซฟนะคะ
ให้เลือกเมนู File > Save for web...[/color][/b]
[img]http://img.thzhost.com/i/me/ott11.gif[/img]
ชอบไม่ชอบก้อบอกกันมั่งน๊ะ
ถ้าว่าง ๆจะเอามากอีกนะ

















หลักจากที่เอา style โฟโต้ช็อปสำหรับทำปุ่มมาให้โหลด
ก็มีคนรีเควสวิธีการใช้มาด้วย วันนี้ก้อจะมาสอนทำปุ่มกดง่ายๆ (มั้ง..)



เปิดโปรแกรมขึ้นมา
กดเลือก File > New...



* ขนาดชิ้นงานกำหนดเท่าไหร่ก็ได้ เพราะตอนสุดท้ายต้องตัดอยู่ดี กะให้มีพื้นที่ไว้พอทำปุ่มด้วย

ต่อไปก็จะเข้าสู่วิธีทำจ้า











* ไม่ต้องเสียเวลาเลือกสีนาน เพราะยังไงมันก้อจะถูก style ทับอยู่ดี



โหลดสไตล์เก็บไว้ที่ไหน ก้อเปิดเรียกขึ้นมาใช้เลยค่ะ







เข้าสู่ขั้นตอนเซฟนะคะ
ให้เลือกเมนู File > Save for web...



ผลงานที่เสร็จสมบูรณ์ !! ใครจะเอาไปใช้ก้อได้ ไม่ว่ากาน .. (จะมีเร๊อะ!! = ='')

























Pages
Home Blog Map  About Me ใส่ลูกเล่นให้ช่อง 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

[[i] แก้ไขล่าสุด plamllsDlove เมื่อ 19-5-2009 16:36 [/i]]

imcatza01 กระทู้เมื่อ 13-5-2009 14:08

ขอบคุงคร่า

ขำๆ55 กระทู้เมื่อ 13-5-2009 14:20

ขอบคุนนะจ้า^^

หน้า: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.
Translated Thai by Jaideejung007(Thzaa.com)