文章內(nèi)容

使用純 CSS 設(shè)計 3D 按鈕

發(fā)布時間: 2012/9/16 9:04:04

CSS 按鈕的效率遠比基本圖像的按鈕的效率高得多，因為它們?nèi)慷际腔谖谋镜摹Ｋ幸?XHTML 標記只是一個無序列表——CSS 樣式負責其余部分。而且，你不需要任何 javascript 來交換圖像以實現(xiàn)翻卷效果，因為 CSS 偽類（pseudoclass）能夠讓你為鏈接的每個狀態(tài)（鏈接<link>、已訪問<visited>、懸停<hover>、激活<active>）建立獨立的樣式。

純 CSS 按鈕唯一的問題是它們看上去相當單調(diào)，只有固定的顏色背景和一個簡單的邊界。一個解決方法是使用混合技術(shù)向 CSS 樣式的文本按鈕加入一個背景圖像，從而使其具有3D效果。然而，讀者的電子郵件提示我尋找一種使用純 CSS 創(chuàng)建3D按鈕效果的方法——不需要圖像。我發(fā)現(xiàn)通過控制 CSS 按鈕邊界的樣式有兩個方法可以創(chuàng)建斜面邊緣的外觀效果。

創(chuàng)建斜面邊緣效果

要使一個按鈕具有3D斜面邊緣效果，需要模擬一個光源，以在一個凸起按鈕的邊緣創(chuàng)建加亮區(qū)和陰影區(qū)。如果光源在上面稍微偏向按鈕的左邊，那么按鈕的頂部和左側(cè)就會比按鈕表面更亮，而底部和右側(cè)就會比按鈕表面更暗。

所以，創(chuàng)建三維效果的秘密是使用 CSS 邊界模擬按鈕的側(cè)面，并為每個邊界的使用稍微不同的顏色，具體的顏色方案要根據(jù)它所表示的是光亮的一側(cè)還是陰暗的一側(cè)而定。為了看上去更加真實，邊界應(yīng)該具有斜接角，CSS 邊界能夠很好地滿足這一需要。

方法1：使用inset/outset（嵌入線/浮出線）邊界

有一個 CSS 邊界屬性能夠自動產(chǎn)生合理的斜面邊緣模擬效果。你只須為按鈕樣式的 border-style 屬性指定為 inset 或者 outset即可。瀏覽器會以稍微不同的背景色陰影來處理元素邊界的表現(xiàn)細節(jié)，從而得到期望的效果。outset屬性模擬凸起按鈕的陰影邊緣，inset 屬性通過反轉(zhuǎn)陰影來模擬按鈕被按下的情景。

圖 A 展示了實際的 inset/outset 邊界效果。這個例子是由一些非常簡單的代碼產(chǎn)生的。XHTML 非常簡單，只包含一些按鈕標簽（label）和鏈接。

<body>
<div id="buttonA">
    <ul>
        <li><a href="link1.html">Button 1</a></li>
        <li><a href="link2.html">Button 2</a></li>
        <li><a href="link3.html">Button 3</a></li>
    </ul>
</div>
</body>

CSS 樣式使這種方法與設(shè)計普通的平面按鈕的樣式非常相似。唯一多出來的地方是這里將 border-style: outset和 border-style: inset規(guī)則同 border-width設(shè)置組合使用，后者將邊界寬度設(shè)置的足夠大以使其可見。

在前面的文章中我已經(jīng)講到過創(chuàng)建 CSS 按鈕的方法，所以我將只挑要點部分解釋。

div#buttonAul規(guī)則設(shè)置常規(guī)文本的尺寸和間距，div#buttonAli規(guī)則去除列表項的默認項目符號（list-style-type: none）并設(shè)置按鈕框的尺寸。div#buttonAli a規(guī)則使整個按鈕可點擊（height: 100%; width: 100%; display: block;），它還是設(shè)置邊界寬度的一個很方便的地方。

樣式的其余部分控制不同按鈕狀態(tài)的外觀變化。所有偽類（:link、:visited、:hover、:active）都有一個 color、font-weight、background-color 和 border-style 規(guī)則。除div#buttonAlia:active規(guī)則之外，所有樣式都使用 border-style: outset規(guī)則，div#buttonAlia:active使用 border-style:inset規(guī)則。這樣就使按鈕狀態(tài)有一個凸起的外觀——當然要將按鈕被點擊時的情況除外，在按鈕被點擊時它呈現(xiàn)被按下的狀態(tài)。

不同的瀏覽器呈現(xiàn) inset 和 outset 邊界的方式有很大的不同。Internet Explorer 創(chuàng)建更加精細的效果，在每個邊界的內(nèi)邊緣有一個加亮區(qū)，在外邊緣有一個陰影區(qū)。而另一方面，Netscape 則以固定的顏色呈現(xiàn)每個邊界，這樣就產(chǎn)生一個比較有突邊的，不怎么圓滑的外觀效果。

方法2：控制單個側(cè)面

使用 inset/outset 邊界樣式是模擬3D效果的一種簡單快捷的方法。然而，這不是唯一的方法。如果你不喜歡標準的效果，或者你為瀏覽器在表現(xiàn)方式上的差別而困擾，那么你可以自己控制邊界的顏色來產(chǎn)生你想要的效果。

除了使用能border-style 的 inset/outset 屬性以及讓瀏覽器處理每個邊界的實際顏色之外，你還可以使用自己的樣式規(guī)則為每個邊界單獨設(shè)置顏色。

圖 B展示了使用這種方法得出的3D按鈕效果，這里樣式表單獨指定每個按鈕側(cè)面的顏色。圖 B 所用標記與圖 A 中的一樣，下面是 CSS 代碼：

body {
    margin: 0px;
    padding: 0px;
}
div#buttonA {
    margin-left: 50px;
}
div#buttonAul {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 30px;
}
div#buttonAli {
    list-style-type: none;
    height: 30px;
    width: 125px;
    margin: 10px;
    text-align:center;
}
div#buttonAli a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:link {
    color: #000000;
    font-weight: bold;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:visited {
    color: #000000;
    font-weight: normal;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #777777;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #666666;
    border-style: solid;
    border-top-color: #333333;
    border-left-color: #555555;
    border-right-color: #BBBBBB;
    border-bottom-color: #DDDDDD;
}

盡管這塊代碼明顯要比前一個例子中的 CSS 代碼要長，但并不是兩者間的主要區(qū)別。它們的主要區(qū)別在于這里使用了一個 border-style: solid規(guī)則替換了原來的 border-style: outset (或 border-style: inset) 規(guī)則，后接幾個規(guī)則單獨設(shè)置每個邊界的顏色（border-top-color: #DDDDDD等）。

使用這一方法，你可以完全控制按鈕側(cè)面的顏色。也就是說完全由你決定選擇合適的顏色來獲得你所要的效果——而且，你還要記住交換顏色以使按鈕在處于 :active 狀態(tài)時產(chǎn)生被按下的效果。控制這些細節(jié)的優(yōu)點是你可以設(shè)置獨立的側(cè)面和頂部加亮區(qū)的顏色，而且最后的結(jié)果在所有瀏覽器表現(xiàn)更加一致

本文出自：億恩科技【www.sunshares.net】

服務(wù)器租用/服務(wù)器托管中國五強！虛擬主機域名注冊頂級提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]