2010/May/16

 

 เราสามารถใช้ความสามารถของ css 3 ในการตกแต่งให้ปุ่มของเรามีหน้าตาสวยงามได้โดยใช้คำสั่ง

 1. การไล่เฉกสี (Color Gradient)

background: -webkit-gradient(linear, left top, left bottom,
from(#f88e11), to(#f06015));  /*Safari*/
background: -moz-linear-gradient(top,  #f88e11,  #f06015); 
/*Firefox*/
filter:  progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f88e11', endColorstr='#f06015'); /*IE*/

 2.  ขอบมน (Border radius)

-webkit-border-radius: .5em;  /*Safari*/
-moz-border-radius: .5em;  /*Firefox*/
border-radius: .5em;  /*IE*/

3.  เงาของตัวอักษร (Text Shadow)

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

4.  เงาของกล่อง (Box Shadow)

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); /*Safari*/
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /*Firefox*/
box-shadow: 0 1px 2px rgba(0,0,0,.2); /*IE*/

 

ดูตัวอย่าง

Comment

Comment:

Tweet


สวยดีค่ะopen-mounthed smile
#3 by Monkey At 2010-07-04 22:37,
ว้าวไว้ลองเล่นดูค่ะ ขอบคุณค่ะ
#2 by arunsawas At 2010-05-16 16:42,
สวย แต่ทำไม่เป็น
#1 by givgiw At 2010-05-16 15:07,

snippet.googalz.com
View full profile