利用CSS3 Gradients创建无图片水晶按钮_HTML5中文网 - 我们以促进HTML5在中国的普及而努力--HTML5中文学习网

没有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))); 
}

可访问No Image Aqua Buttons with CSS3查看最终效果。

(责任编辑：admin)