当前位置: 网站建设 > 网页设计 > 建站经验 >

简洁风格按钮及其CSS 3实现方法

时间:2013-03-02 04:09来源:未知 作者:admin 点击:

标签:简洁风格按钮及其CSS 3实现方法 按钮(19)及其(3)简洁(10)假如(11)实现(100)这个(21)CSS(823)方法(92)想把(1)风格(7)
假如想把这个按钮应用到网页,却很麻烦(不使用CSS 3的话,此按钮的长度很难自适应,除非切图,而且文字的阴影也无奈实现,除非用图片取代图片),这就是为什么咱们前端开发职员仇恨IE阅读器。 5. 高光效果(即PSD中的渐变叠加效果)。至此,浏览者很轻易有光源从屏幕上方打在按钮上的感到。 步骤: 3. 投影效果(即PSD中的投影效果)。向下的一像素的阴影,随不起眼,但如果想显出破体感,却至关主要。 2. 边框(即图中的BORDER),设置宽度WIDTH为1,半径RADIUS为5,其余随意。 下面说说CSS 3
简洁风格按钮及其CSS 3实现方法》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023453H013.htm

  假如想把这个按钮应用到网页,却很麻烦(不使用CSS 3的话,此按钮的长度很难自适应,除非切图,而且文字的阴影也无奈实现,除非用图片取代图片),这就是为什么咱们前端开发职员仇恨IE阅读器。

  5. 高光效果(即PSD中的“渐变叠加”效果)。至此,浏览者很轻易有“光源从屏幕上方打在按钮上”的感到。

  步骤:

  3. 投影效果(即PSD中的“投影”效果)。向下的一像素的阴影,随不起眼,但如果想显出破体感,却至关主要。

  2. 边框(即图中的BORDER),设置宽度WIDTH为1,半径RADIUS为5,其余随意。

  下面说说CSS 3 不使用图片就能实现上面按钮的方法。

  4. 高光(即图中的INNER SHADOW),简洁的网站模板的好处,参数为纯白、0.7、0、1和0。

  5,简洁型css实现的圆角矩形.文字阴影(即图中的TEXT SHADOW1和TEXT SHADOW2),参数如图。

  0. 自身是一个纯色填充图层。

--> [网站建设之]简洁风格按钮及其CSS 3实现方法

  1. 描边效果,简单十步将CSS压缩至一行

  Well Done ! (附上PSD文件)

  这么庞杂的光影效果,纯写代码的话,效力太慢了,我应用了在线的CSS 3 Button Generator 工具(倡议使用Chrome或Firefox翻开)。

今天我又看到一个很难看的按钮。

  2,简单分析网页信噪比和网页优化的关系. 高光效果(即PSD中的“内阴影”效果)。为什么能用内阴影做高光呢?由于设计者用了纯白的阴影(不透明度65%)。

  3. 投影(即图中的DROP SHADOW),设置色彩COLOR为纯黑,不透明度OPACITY为0.2,x轴廉价0像素,y轴偏移1像素(即向下),扩散大小SIZE为0。

  4. 本影效果(即PSD中的“斜面跟浮雕”效果)。这一效果给按钮下方增加了1像素的玄色斜面(不透明度15%),制作出按钮的本影。

  好了,而后加上文字。

  然而

  最后的效果(附上完全代码):

  设计师用一个图层实现了按钮,这个按钮有5个效果:

  做完这些设置,右边就呈现了对应的代码了,是不是很便利:

  1. 高光层(即图中的BACKGROUND),设置初始颜色START COLOR为589dfd(为什么取这个颜色,简单分析网易网首页的设计思想?实在你能够本人随便去个蓝色,也可以用取色工具从PSD中取色),勾选50%处颜色设置为488bf7,设 置停止颜色END COLOR为3a7af2。

  为了让文字有下凹的后果,给文字上方加上1像素的暗影。

Tag:实现   方式   及其   作风   按钮   简洁     实现   办法   及其   风格   按钮   简练    
(责任编辑:网站建设)
简洁风格按钮及其CSS 3实现方法相关文章
上一篇:简洁的网站模板的好处 下一篇:简约设计:韩国地图服务的设计
回到顶部