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