利用CSS3 Gradients創建無圖片水晶按鈕
來源：程序員人生 發布時間：2014-01-12 00:10:35 閱讀次數：3474次
沒有css3之前，我們需要在PS中創建水晶按鈕。有了css3，我們可以很容易生成水晶按鈕。盡管CSS3 Gradient還未得到大多數瀏覽器的支持，但各主流瀏覽器已經在自己的內核中支持css3 Gradient (WebKit Nightly (current)、Safari 4 incl. Mobile Safari、Chrome 4、Firefox 3.6)。本文簡要介紹CSS3 Aqua Button – Revisited for Firefox 3.6 提到的css3 gradient實現的方法。
按鈕的html如下：
<div class="button aqua">
<div class="glare"></div>
Button Label
</div>
在css中，分別定義buttton、aqua、glare的css屬性，.button定義按鈕外觀，.aqua實現水晶效果，.glare實現輝光效果。
.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;
/* Label */
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
實現水晶效果的css代碼：
.aqua{
background-color: rgba(60, 132, 198, 0.8);
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
/* for FF 3.6 */
background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
}
上面的代碼中，-webkit-box-shadow或-moz-box-shadow生成按鈕投影。background-image生成漸變背景，類似PS中的“漸變疊加”。
實現輝光效果的css代碼：
.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
/* for FF 3.6 */
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);
}
DEMO演示：點擊查看無圖制作的CSS按鈕
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
