*อ่าน entry นี้โปรดจิ้ม refresh ก่อนนะจ้ะ ^ ^

สวัสดีครับ

กลับมาอัพบล็อกทำยอดก่อนสิ้นเดือน อิอิ

คราวนี้เรามาแต่งบล็อกของตัวเอง โดยการทำปุ่มสวยๆ อย่างง่ายๆ กันดีกว่า ^ ^

แต่ขอบอกก่อนนะครับว่าปุ่มจะแสดงผลได้ดีที่สุดบน firefox หรือ chrome ส่วน IE จะแสดงผลได้ด้อยกว่า 

 

 

ทำง่ายๆ นะครับ copy แปะตามโค้ดด้านล่างไปแปะใน css editor ของเราได้เลย! (อ่าว =[]=)

แนะนำให้ copy ไปแปะใส่ notepad ก่อนแล้วค่อย copy จาก notepad ไปใส่ใน css editor นะครับ

 

input{

background:#F50000;

font-family:Tahoma, Geneva, sans-serif;

font-size:14px; 

padding: 5px 10px 5px 10px;

color: #fff;

font-weight: bold;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

cursor: pointer;

border-left:none;

border-top:none;

margin:10px 0 10px 0;

}

input:hover{

background:#FF4B1A;

}

 

จะได้ออกมาเป็นดังนี้ 

 

Submit

 

สำหรับโค้ดนี้ตัวปุ่มจะเป็น สีแดง นะครับ เพื่อให้เข้ากับบรรยากาศคริสมาสต์ ซึ่งหากเราอยากได้สีอื่นก็ง่ายๆ แค่เปลี่ยนส่วน background เป็นสีอื่นก็ได้แล้ว

 

input

background:โค้ดสีที่จะแสดง;

...

}

 

input:hover{

background:โค้ดสีเวลาเอาเมาส์ไปวาง;

... 

}

 

เราสามารถหาโค้ดสีได้ที่นี่ http://www.colorschemer.com/online.html

 

ตัวอย่างปุ่มสีต่างๆ copy แปะได้เลยเช่นกันครับ

 

สีฟ้า

Submit

input{

background:#2daebf;

font-family:Tahoma, Geneva, sans-serif;

font-size:14px;  

padding: 5px 10px 5px 10px;

color: #fff;

font-weight: bold;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

cursor: pointer;

border-left:none;

border-top:none;

margin:10px 0 10px 0;

}

input:hover{

background:#49C4D4;

}

 

สีม่วง

Submit

input{

background:#a9014b;

font-family:Tahoma, Geneva, sans-serif;

font-size:14px;  

padding: 5px 10px 5px 10px;

color: #fff;

font-weight: bold;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

cursor: pointer;

border-left:none;

border-top:none;

margin:10px 0 10px 0;

}


input:hover{

background:#DA015F;

}

 

สีส้ม

Submit

input{

background:#ff5c00;

font-family:Tahoma, Geneva, sans-serif;

font-size:14px;  

padding: 5px 10px 5px 10px;

color: #fff;

font-weight: bold;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

cursor: pointer;

border-left:none;

border-top:none;

margin:10px 0 10px 0;

}


input:hover{

background:#FF7E33;

}

 

สีเหลือง

Submit

input{

background: #ffb515;

font-family:Tahoma, Geneva, sans-serif;

font-size:14px;  

padding: 5px 10px 5px 10px;

color: #fff;

font-weight: bold;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

cursor: pointer;

border-left:none;

border-top:none;

margin:10px 0 10px 0;

}


input:hover{

background: #FFC547;

}

 

สีดำ

Submit

input{

background: #222;

font-family:Tahoma, Geneva, sans-serif;

font-size:14px;  

padding: 5px 10px 5px 10px;

color: #fff;

font-weight: bold;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

cursor: pointer;

border-left:none;

border-top:none;

margin:10px 0 10px 0;

}


input:hover{

background: #858585;

}

 

ไอเดียการทำปุ่มนี้่มาจากเว็บไซต์ http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

เอามาดัดแปลงนิดหน่อยให้เข้ากับ exteen จ้า ^ ^ 

=================

คริสมาสต์แล้วใครไม่รู้ไปไหนดี แนะนำให้ไปดู "AVATAR" ซะ ดูแล้วไม่ผิดหวังแน่นอนจ้า ^ ^

หลักฐานการไปดู ณ IMAX Paragon



ใส่แว่นซ้อนแว่นเท่มากๆ O_o เอร้ยยยย

สุดท้าย บ้า AVATAR อยู่ตอนนี้ใครสนใจกลายร่างเป็นชาวนาวี ไปที่นี่เลย http://www.mcdonalds.ie/MMMMenu/Avatarize-Yourself.aspx

ของผมเป็นแบบนี้ครับ

กร้ากกกกก ชาวนาวีใส่แว่นนน ใครจะทำต้องหารูปหน้าตรงนะครับ เอารูปเอียงๆ มามันจะเบี้ยวววว

credit : เอามาจากคุณ Oh-MH ที่ pocketonline.net ที่เอามาจาก http://showoff.yenta4.com/forum/topic/365571 อีกที

หมวย FC เจอกันงานวันคิดมากจ้า ^ ^

Comment

Comment:

Tweet

#75 By (183.89.128.201|183.89.128.201) on 2015-01-29 18:09

#74 By (110.168.40.9|110.168.40.9) on 2014-06-21 18:29

ขอบคุณครับ

#73 By comp (103.7.57.18|182.53.113.11) on 2012-12-03 00:05

ขอบคุณมากค่ะ ^^big smile

#72 By ระแนงไม้ (118.174.95.217) on 2012-03-26 02:42

Your article is very interesting, very rich in contents, give me a lot of inspiration, hope to see more of your wonderful article, thank you

#71 By Hermes Birkin (59.60.125.84) on 2012-02-27 13:32

ปอปอป

#70 By (124.122.157.245) on 2010-05-19 15:04

ผกปอผ

#69 By (124.122.157.245) on 2010-05-19 15:03

ขอบคุน

#68 By โจ้ (124.122.157.245) on 2010-05-19 15:03

เอาไปใส่ตรงไหนsad smile Hot!

#67 By Monkey on 2010-03-16 15:13

ขอบคุณจ้า X)

#66 By Melo ; ♪ on 2010-01-05 19:53

เยี่ยมมากๆค่ะ

#65 By +*_Non Step_*+ on 2009-12-28 11:38

ขอบคุณมากค่ะHot! Hot! cry

#64 By [:[MoNofaA~]:] on 2009-12-26 19:15

เจ๋งเป้งไปเลยค่ะ! Hot! Hot! Hot!
จะได้เอาไปตกแต่งบลอกบ้าง
ว่าแต่อวาตารนี่น่าเอาไปเล่นบ้างงง ><

#63 By :: NOKKY :: on 2009-12-26 17:32

*ปาดาวใส่* Hot! Hot! Hot!


รูปสุดท้ายโมเอะอะ กร๊ากกก

#62 By L a p i s L a z u l i* on 2009-12-26 15:45

big smile

#61 By folksterno on 2009-12-26 13:53

ไม่มีเเบบปุ่ม ' กดหมวย ' อะไรยังงี้หรอลุงโอห์ม

me/วิ่งหนี!

Hot! Hot!

#60 By ►JuNo★iji◄ on 2009-12-26 13:05

ขอบคุณนะคะ สวยมากมากเลยย

#59 By skn♡ on 2009-12-26 09:15

-ข้าน้อยไปลองทำหน้าชาวนาวีดูเจ้าค่ะ

เนียนดีจังเน๊อะcry

#58 By Mi~O on 2009-12-26 00:08

css 3 นี่จะทำให้เราๆ ตกตแ่งเว็บไซตืได้ง่ายขึ้นจริงนะเนี่ย แต่เมื่อไหร่บราวเซอร์จะรองรับหมดนะเนี่ย

#57 By 13ankster on 2009-12-25 23:48

ว้าว เลิศ ขอบคุณค่า Hot!

#56 By LB_MARVEL★ on 2009-12-25 21:40

Merry Christmas ค๊า~
ขอบคุณที่แวะไปทักทายกันตลอดนะคะ double wink

#55 By ll* bowlingz *ll on 2009-12-25 21:18

โอ้! เจ๋งมากเลยคะ
(แต่เมื่อกี้ใส่แล้วไม่ไ่ด้ T T)
เดี๋ยวจะไปลองทำใหม่

อยากดูๆๆ ยังไม่ไ่ด้ไปดูเลยคะ
มีแต่คนบอกว่าสนุก =w=

และ ..
Merry Christmas ค่า :D

#54 By яecogиιcε ; on 2009-12-25 19:26

Hot! Hot! Hot! Hot! Hot!
เยี่ยมไปเลยค่ะ ต้องศึกษาโค้ดนี้แล้วสิ..หึหึ

ป.ล. ชอบเวปที่เปลี่ยนหน้าเป็นนาวีมากมาย
เจ๋งอ้า บ้า อวตาร เหมือนกัน อ้า >,,<

#52 By Run Skywalker on 2009-12-25 17:26

มีประโยชน์มากเลยอ่ะcry

#51 By Beam Magic on 2009-12-25 17:00

ยู้ววว! กำลังคิดจะแต่งบล็อกใหม่อยู่พอดี

ขอบคุณสำหรับโค้ดค่ะ

confused smile Hot!

#50 By ICEgotcha! on 2009-12-25 14:34

ขอบคุณค่ะ

ไฮโซอย่างรุนแรงHot!

#49 By ดอกแอ้ © on 2009-12-25 13:55

ขอบคุณมากค๊า~> <

#48 By นังหมู~~ on 2009-12-25 13:22

ตก border-right รึเปล่าครับ cry

#47 By Axess on 2009-12-25 12:58

โอ้วววว อยากทำ แต่ยังโง่อยู่คะ question

#46 By ta_THINK_nhong on 2009-12-25 12:54

Hot! Hot!

แหล่มเลยคับ

#45 By hackerlife on 2009-12-25 12:20

ขอบคุณค่า~ Hot! Hot!

#44 By [日ゴーゴー] on 2009-12-25 11:52

ขอบคุณมาก ๆ เลยครับ

อวาตาร์มีแว่นตาด้วยเรอะ อิอิ

#43 By เจ้าชายน้อย on 2009-12-25 11:44

cry Hot!

#42 By •กุ๊ดจี่• on 2009-12-25 11:33

Hot! Hot!



พี่คะ มีเรื่องจะถาม T^T
พอดีว่า แป๋มชอบให้หน้าบล๊อคมีอีกอันเล็กๆอะค่ะพี่

ยกตัวอย่างเช่น
http://stylemodern.exteen.com/

แต่อยากชิดซ้าย แล้วก็ล็อคบีจีด้วยอะค่ะ TT

ทำไปก็ปวดหัวไป ได้บล๊อคตัวเองเป็นอย่างงี้






รบกวนด้วยนะคะHot!

#41 By untitled_5 on 2009-12-25 08:52

โห
พี่โอมโมเอ้
เจอกันวันนี้นะคะcry

#40 By Y Screen on 2009-12-25 08:32

เทคนิคเยี่ยมเลยครับ Hot!

#39 By manop on 2009-12-25 07:48

ขอบคุณค่ะ

เป็นการทำปุ่มที่เจ๋งมาก cry

#38 By tikyon on 2009-12-25 02:37

ขอบคุณมากค๊า แอบเล็งปุ่มที่บล็อกนี้มานานแล้วหละคะ อิอิ

เมอร์รี่คริสต์มาสนะคะHot! Hot! Hot! Hot!

#37 By myuk on 2009-12-25 02:06

ขึ้นฮอตไปเลยฮะ

Hot! Hot! Hot! Hot! Hot! Hot! Hot!
Hot! Hot! Hot!
ขอบคุณค่ะ
แต่ของเรา แอบเบี้ยวๆยังไงไม่รู้ง่ะ -_-
ว้าววววววว ชาวนาวี

ดูแล้วชอบมากเหมือนกัน

#34 By fernfriend on 2009-12-24 22:37

ขอบคุณมากค่า >w<// น่ารักดีๆ
Hot! Hot!

#33 By unerase* on 2009-12-24 22:32

เจ๋งมากเลยค่ะ Hot!

#32 By AnLatis on 2009-12-24 22:32

ลองเอาทำดูดีกว่า อิอิ ขอบคุณค่ะ Hot! Hot!

#31 By Taki on 2009-12-24 21:55

รบกวนด้วยครับ

ขอบเนื้อหา จะแก้ไขยังไงอ่ะ embarrassed

#30 By eak48 on 2009-12-24 21:50

Hot! double wink

#29 By iQ180 on 2009-12-24 21:20

ปุ่มสวยมากๆเลยครับbig smile

#28 By meawnoy on 2009-12-24 21:06

สวยมากเลยย

ปล.Mery X'mas นะครับ

#27 By b-padung Studio on 2009-12-24 20:55

Hot!

#26 By D on 2009-12-24 20:53