簡洁风格按钮及其CSS3实现方法.docVIP

简洁风格按钮及其CSS 3实现方法 2012-04-10 10:49 FrankFang FrankFang的博客 我要评论(0) 字号：T | T 文章的内容是讲解如何去实现一个简洁风格的按钮以及在CSS 3上的应用，教程利用到PhotoShop，有源码提供下载。详细请看下文 AD：  是一个全球优秀设计师聚集的地方，我经常去上面看看大师们的优秀作品。 今天我又看到一个很好看的按钮。 设计师用一个图层实现了按钮，这个按钮有5个效果： 0. 本身是一个纯色填充图层。 1. 描边效果。 2. 高光效果（即PSD中的“内阴影”效果）。为什么能用内阴影做高光呢？因为设计者用了纯白的阴影（不透明度65%）。 3. 投影效果（即PSD中的“投影”效果）。向下的一像素的阴影，随不起眼，但如果想显出立体感，却至关重要。 4. 本影效果（即PSD中的“斜面和浮雕”效果）。这一效果给按钮下方添加了1像素的黑色斜面（不透明度15%），制造出按钮的本影。 5. 高光效果（即PSD中的“渐变叠加”效果）。至此，浏览者很容易有“光源从屏幕上方打在按钮上”的感觉。 好了，然后加上文字。 为了让文字有下凹的效果，给文字上方加上1像素的阴影。 Well Done ! （附上PSD文件） 但是 如果想把这个按钮运用到网页，却很麻烦（不使用CSS 3的话，此按钮的长度很难自适应，除非切图，而且文字的阴影也无法实现，除非用图片代替图片），这就是为什么我们前端开发人员憎恨IE浏览器。 下面说说CSS 3 不使用图片就能实现上面按钮的方法。 这么复杂的光影效果，纯写代码的话，效率太慢了，我使用了在线的CSS 3 Button Generator 工具（建议使用Chrome或Firefox打开）。 步骤： 1. 高光层（即图中的BACKGROUND），设置初始颜色START COLOR为589dfd（为什么取这个颜色？其实你可以自己随意去个蓝色，也可以用取色工具从PSD中取色），勾选50%处颜色设置为488bf7，设置结束颜色END COLOR为3a7af2。 2. 边框（即图中的BORDER），设置宽度WIDTH为1，半径RADIUS为5，其他随意。 3. 投影（即图中的DROP SHADOW），设置颜色COLOR为纯黑，不透明度OPACITY为0.2，x轴便宜0像素，y轴偏移1像素（即向下），扩散大小SIZE为0。 4. 高光（即图中的INNER SHADOW），参数为纯白、0.7、0、1和0。 5.文字阴影（即图中的TEXT SHADOW1和TEXT SHADOW2），参数如图。 做完这些设置，右边就出现了对应的代码了，是不是很方便： 最后的效果（附上完整代码）： 参考： 5 Simple Tricks To Bring Light and Shadow Into Your Designs 译文见《5种在设计中应用光线和阴影的简单技法》 『简单』的按钮 原文链接：/frankfang/archive/2012/04/09/2438618.html 【编辑推荐】 超酷HTML 5和CSS3实现登录及注册功能表单 8个非常有用的HTML 5工具你值得拥有 6个优秀的HTML 5/CSS3演示PPT框架推荐 解决跨平台问题的终极密钥就是HTML 5? HTML 5开发：地理位置定位指南