新浪郵箱界面登錄按鈕效果製作

IMG,CSS 立體效果製作

 

1)  IMG製作(102×74整圖大小,102×24按鈕大小)

按鈕A:LINK狀態(abc三步的取色爲左上到右下的直線上的點)

a)         畫外邊框,邊框顏色最深,左上,左下,右上,右下分別留1px空白點。

b)        畫內邊框,邊框顏色次深,上內邊框最淺,左右內邊框略深,下邊框最深。

c)         填充內色,色塊距上內邊框1px,留1px白邊。

 

按鈕A:VISITED狀態

 IMG,CSS 立體效果製作

 

1)  IMG製作(102×74整圖大小,102×24按鈕大小)

按鈕A:LINK狀態(abc三步的取色爲左上到右下的直線上的點)

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;}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章