CSS3 Gradient 创建水晶按钮实例

网络整理 - 07-27

没有css3之前,我们需要在PS中创建水晶按钮。有了css3,我们可以很容易生成水晶按钮。尽管CSS3 Gradient还未得到大多数浏览器的支持,但各主流浏览器已经在自己的内核中支持css3 Gradient (WebKit Nightly (current)、Safari 4 incl. Mobile Safari、Chrome 4、Firefox 3.6)。

按钮的html如下:

1.    <div class="button aqua">

2.        <div class="glare"></div>

3.        Button Label

4.</div>

在css中,分别定义buttton、aqua、glare的css属性,.button定义按钮外观,.aqua实现水晶效果,.glare实现辉光效果。

01..button{

02.     width: 120px;

03.     height: 24px;

04.    padding: 5px 16px 3px;

05.    -webkit-border-radius: 16px;

06.    -moz-border-radius: 16px;

07.    border: 2px solid #ccc;

08.    position: relative;

09.     /* Label */

10.    font-family: Lucida Sans, Helvetica, sans-serif;

11.    font-weight: 800;

12.    color: #fff;

13.    text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;

14.    text-align: center;

15.    vertical-align: middle;

16.    white-space: nowrap;

17.    text-overflow: ellipsis;

18.    overflow: hidden;

19.}

实现水晶效果的css代码:

01..aqua{

02.        background-color: rgba(60, 132, 198, 0.8);

03.        border-top-color: #8ba2c1;

04.        border-right-color: #5890bf;

05.        border-bottom-color: #4f93ca;

06.        border-left-color: #768fa5;

07.        -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;

08.        -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;

09.        background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));

10./* for FF 3.6 */

11.        background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);

12.}

上面的代码中,-webkit-box-shadow或-moz-box-shadow生成按钮投影。background-image生成渐变背景,类似PS中的“渐变叠加”。

实现辉光效果的css代码:

01.    .button .glare {

02.        position: absolute;

03.        top: 0;

04.        left: 5px;

05.        -webkit-border-radius: 8px;

06.        -moz-border-radius: 8px;

07.        height: 1px;

08.        width: 142px;

09.        padding: 8px 0;

10.        background-color: rgba(255, 255, 255, 0.25);

11.        background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));

12.}