建站
咨詢
售后
建站咨詢
新聞中心
dribbble.com是一個(gè)全球優(yōu)秀設(shè)計(jì)師聚集的地方，我經(jīng)常去上面看看大師們的優(yōu)秀作品。
創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元高州做網(wǎng)站,已為上家服務(wù),為高州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
今天我又看到一個(gè)很好看的按鈕。
設(shè)計(jì)師用一個(gè)圖層實(shí)現(xiàn)了按鈕，這個(gè)按鈕有5個(gè)效果：
0. 本身是一個(gè)純色填充圖層。
1. 描邊效果。
2. 高光效果（即PSD中的“內(nèi)陰影”效果）。為什么能用內(nèi)陰影做高光呢？因?yàn)樵O(shè)計(jì)者用了純白的陰影（不透明度65%）。
3. 投影效果（即PSD中的“投影”效果）。向下的一像素的陰影，隨不起眼，但如果想顯出立體感，卻至關(guān)重要。
4. 本影效果（即PSD中的“斜面和浮雕”效果）。這一效果給按鈕下方添加了1像素的黑色斜面（不透明度15%），制造出按鈕的本影。
5. 高光效果（即PSD中的“漸變疊加”效果）。至此，瀏覽者很容易有“光源從屏幕上方打在按鈕上”的感覺。
好了，然后加上文字。
為了讓文字有下凹的效果，給文字上方加上1像素的陰影。
Well Done ! （附上PSD文件）
但是
如果想把這個(gè)按鈕運(yùn)用到網(wǎng)頁，卻很麻煩（不使用CSS 3的話，此按鈕的長度很難自適應(yīng)，除非切圖，而且文字的陰影也無法實(shí)現(xiàn)，除非用圖片代替圖片），這就是為什么我們前端開發(fā)人員憎恨IE瀏覽器。
下面說說CSS 3 不使用圖片就能實(shí)現(xiàn)上面按鈕的方法。
這么復(fù)雜的光影效果，純寫代碼的話，效率太慢了，我使用了在線的CSS 3 Button Generator 工具（建議使用Chrome或Firefox打開）。
步驟：
1. 高光層（即圖中的BACKGROUND），設(shè)置初始顏色START COLOR為589dfd（為什么取這個(gè)顏色？其實(shí)你可以自己隨意去個(gè)藍(lán)色，也可以用取色工具從PSD中取色），勾選50%處顏色設(shè)置為488bf7，設(shè)置結(jié)束顏色END COLOR為3a7af2。
2. 邊框（即圖中的BORDER），設(shè)置寬度WIDTH為1，半徑RADIUS為5，其他隨意。
3. 投影（即圖中的DROP SHADOW），設(shè)置顏色COLOR為純黑，不透明度OPACITY為0.2，x軸便宜0像素，y軸偏移1像素（即向下），擴(kuò)散大小SIZE為0。
4. 高光（即圖中的INNER SHADOW），參數(shù)為純白、0.7、0、1和0。
5.文字陰影（即圖中的TEXT SHADOW1和TEXT SHADOW2），參數(shù)如圖。
做完這些設(shè)置，右邊就出現(xiàn)了對(duì)應(yīng)的代碼了，是不是很方便：
***的效果（附上完整代碼）：
參考：
5 Simple Tricks To Bring Light and Shadow Into Your Designs 譯文見《5種在設(shè)計(jì)中應(yīng)用光線和陰影的簡單技法》
『簡單』的按鈕
分享名稱：簡潔風(fēng)格按鈕及其CSS3實(shí)現(xiàn)方法
標(biāo)題URL：http://www.dlmjj.cn/article/dhigdhi.html
