新浪邮箱界面登录按钮效果制作

IMG,CSS 立体效果制作

 

1） 
IMG制作（102×74整图大小，102×24按钮大小）

按钮A:LINK状态（a、b、c三步的取色为左上到右下的直线上的点）

a)        
画外边框，边框颜色最深，左上，左下，右上，右下分别留1px空白点。

b)       
画内边框，边框颜色次深，上内边框最浅，左右内边框略深，下边框最深。

c)        
填充内色，色块距上内边框1px，留1px白边。

 

按钮A:VISITED状态

 IMG,CSS 立体效果制作

 

1） 
IMG制作（102×74整图大小，102×24按钮大小）

按钮A:LINK状态（a、b、c三步的取色为左上到右下的直线上的点）

a)        
画外边框，边框颜色最深，左上，左下，右上，右下分别留1px空白点。

b)       
画内边框，边框颜色次深，上内边框最浅，左右内边框略深，下边框最深。

c)        
填充内色，色块距上内边框1px，留1px白边。

 

按钮A:VISITED状态

 

按钮A:HOVER状态

a)        
复制A:LINK状态图片，填充内色的色块颜色选浅。

 

按钮A:ACTIVE状态

a)        
复制A:LINK状态图片，垂直翻转，填充颜色取浅，但要比HOVER深。

 

2)       
CSS书写

A:LINK{background:(button.jpg)
no-repeat 0 0;}

A:VISITED

A:HOVER{background:(button.jpg)
no-repeat 0 -25px;}

A:ACTIVE{background:(button.jpg)
no-repeat 0 -50px;}

按钮A:HOVER状态

a)        
复制A:LINK状态图片，填充内色的色块颜色选浅。

 

按钮A:ACTIVE状态

a)        
复制A:LINK状态图片，垂直翻转，填充颜色取浅，但要比HOVER深。

 

2)       
CSS书写

A:LINK{background:(button.jpg)
no-repeat 0 0;}

A:VISITED

A:HOVER{background:(button.jpg)
no-repeat 0 -25px;}

A:ACTIVE{background:(button.jpg)
no-repeat 0 -50px;}