|
[tr][td]没有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. 2. 3. Button Label 4. 在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查看最终效果。 [/td][/tr] |
|
