CSS

*อ่าน 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 เจอกันงานวันคิดมากจ้า ^ ^