|
Step1 - Photoshop
1. 新建文件
按鈕的尺寸是100px X 80px，但由于我們需要?jiǎng)?chuàng)建一個(gè)有兩種狀態(tài)的CSS sprite背景圖，所以我們?cè)赑hotoshop中創(chuàng)建（Ctrl+N）一個(gè)長(zhǎng)寬為200px X 160px的圖片文件，如下圖：
2. 創(chuàng)建參考線
為了使繪制按鈕更容易，我們創(chuàng)建參考線，從標(biāo)尺中拉出參考線，如果你找不到標(biāo)尺，可以按Ctrl+R顯示，如下圖：
3. 繪制形狀
選擇工具面板中的矩形工具，設(shè)置圓角半徑為10px，在畫布上繪制形狀，如下圖：
4. 設(shè)置形狀樣式
接上圖最后一步，雙擊層，打開(kāi)圖層樣式窗口，設(shè)置形狀的樣式，首先選擇漸變疊加，設(shè)置漸變顏色從#3d3d3d到#8b8b8b，如下圖：
然后，選擇“內(nèi)發(fā)光”，設(shè)置混合模式為“正�！保煌该鞫葹�100%，顏色設(shè)置為#ffffff，圖素大小設(shè)置為3像素，如下圖：
之后，再選擇“描邊”，設(shè)置大小為1像素，位置為“內(nèi)部”，顏色為黑色#000000，如下圖：
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) jQuery打造動(dòng)態(tài)漸變按鈕 [1] 下一頁(yè) jQuery打造動(dòng)態(tài)漸變按鈕 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) jQuery打造動(dòng)態(tài)漸變按鈕 [2]
