文章內容

使用純 CSS 設計 3D 按鈕

發布時間: 2012/9/16 9:04:04

CSS 按鈕的效率遠比基本圖像的按鈕的效率高得多，因為它們全部都是基于文本的。所有要用 XHTML 標記只是一個無序列表——CSS 樣式負責其余部分。而且，你不需要任何 javascript 來交換圖像以實現翻卷效果，因為 CSS 偽類（pseudoclass）能夠讓你為鏈接的每個狀態（鏈接<link>、已訪問<visited>、懸停<hover>、激活<active>）建立獨立的樣式。

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

創建斜面邊緣效果

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

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

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

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

圖 A 展示了實際的 inset/outset 邊界效果。這個例子是由一些非常簡單的代碼產生的。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 樣式使這種方法與設計普通的平面按鈕的樣式非常相似。唯一多出來的地方是這里將 border-style: outset和 border-style: inset規則同 border-width設置組合使用，后者將邊界寬度設置的足夠大以使其可見。

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

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

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

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

方法2：控制單個側面

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

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

圖 B展示了使用這種方法得出的3D按鈕效果，這里樣式表單獨指定每個按鈕側面的顏色。圖 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 代碼要長，但并不是兩者間的主要區別。它們的主要區別在于這里使用了一個 border-style: solid規則替換了原來的 border-style: outset (或 border-style: inset) 規則，后接幾個規則單獨設置每個邊界的顏色（border-top-color: #DDDDDD等）。

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

本文出自：億恩科技【www.czbl888.cn】

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

服務器租用

服務器托管

機柜批發

云服務器

建站俠

空間/域名

安全保姆

幫助類別

幫助中心

文章內容

使用純 CSS 設計 3D 按鈕

同類文章

億恩公告

在線客服