文章內(nèi)容

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

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

CSS 按鈕的效率遠(yuǎn)比基本圖像的按鈕的效率高得多，因?yàn)樗鼈內(nèi)慷际腔谖谋镜�。所有要�?XHTML 標(biāo)記只是一個(gè)無(wú)序列表——CSS 樣式負(fù)責(zé)其余部分。而且，你不需要任何 javascript 來交換圖像以實(shí)現(xiàn)翻卷效果，因?yàn)?CSS 偽類（pseudoclass）能夠讓你為鏈接的每個(gè)狀態(tài)（鏈接<link>、已訪問<visited>、懸停<hover>、激活<active>）建立獨(dú)立的樣式。

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

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

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

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

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

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

圖 A 展示了實(shí)際的 inset/outset 邊界效果。這個(gè)例子是由一些非常簡(jiǎn)單的代碼產(chǎn)生的。XHTML 非常簡(jiǎn)單，只包含一些按鈕標(biāo)簽（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è)計(jì)普通的平面按鈕的樣式非常相似。唯一多出來的地方是這里將 border-style: outset和 border-style: inset規(guī)則同 border-width設(shè)置組合使用，后者將邊界寬度設(shè)置的足夠大以使其可見。

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

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

樣式的其余部分控制不同按鈕狀態(tài)的外觀變化。所有偽類（:link、:visited、:hover、:active）都有一個(gè) 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)有一個(gè)凸起的外觀——當(dāng)然要將按鈕被點(diǎn)擊時(shí)的情況除外，在按鈕被點(diǎn)擊時(shí)它呈現(xiàn)被按下的狀態(tài)。

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

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

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

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

圖 B展示了使用這種方法得出的3D按鈕效果，這里樣式表單獨(dú)指定每個(gè)按鈕側(cè)面的顏色。圖 B 所用標(biāo)記與圖 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;
}

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

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

本文出自：億恩科技【mszdt.com】

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

上一篇 >> 網(wǎng)站被攻擊時(shí)的原因具體分析
下一篇 >> 電腦知識(shí)如何的封殺蹭網(wǎng)族

激情五月天婷婷,亚洲愉拍一区二区三区,日韩视频一区,a√天堂中文官网8

服務(wù)器租用

服務(wù)器托管

機(jī)柜批發(fā)

云服務(wù)器

建站俠

空間/域名

安全保姆

幫助類別

幫助中心

文章內(nèi)容

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

同類文章

億恩公告

在線客服