利用CSS3 Gradients创建无图片水晶按钮

CSS3教程手机阅读

没有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如下：

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.}

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

【利用CSS3 Gradients创建无图片水晶按钮】相关文章

1. 利用CSS3 Gradients创建无图片水晶按钮

2. 用css3 media queries创建手机版网站

3. 用css3 media queries创建手机版网站

4. 用CSS创建打印页面

5. 利用HTML5 Canvas创建交互式Bubble Chart

6. 使用CSS3和RGBa创建超酷的按钮

7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

8. CSS3教程：background-clip和background-origin

9. 用CSS3打造一组闪亮的半透明按钮效果

10. 使用CSS3设计漂亮的动画效果3D大按钮