CSS技巧:网页文字渐变效果

来源:互联网 责任编辑:栏目编辑 发表时间:2013-07-02 06:33 点击:

本文介绍的技术很经典,也算是一篇老文章了,相信很多人也都看过,之前神飞有注意到国内有些翻译,但是不全面,这里我就将其完整的翻译了一下。

你想制作漂亮的标题而不用将每个标题都做成图片吗?这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空<span>标签,它使用背景图片和position:absolute属性将标题覆盖。该技巧经主流浏览器测试:Firefox, Safari, Opera, 以及Internet Explorer 6。

好处

  • 这是一个纯CSS技巧,无需JS或Flash。它兼容主流浏览器包括IE6 (需要使用PNG hack)。
  • 它对于设计标题是很完美的。你无需使用Photoshop制作每一个标题。这也显然能够节省你的时间和带宽。
  • 你当然可以是用任何网络字体和字体型号。

它是如何工作的?

这个小技巧很简单。基本上我们只是在文字上面添加了一个1px的渐变PNG图片(使用alpha透明)

screenshot

HTML代码

<h1><span></span>CSS Gradient Text</h1>

CSS代码

这里的关键点是h1 { position: relative } h1 span { position: absolute }

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • 扎实基础 9则css网页制作技巧
  • CSS设计符合Web标准的网页表单的几个技巧
  • 技巧:css星级效果总结
  • 用CSS建设网站的实例(9)
  • 提高网站性能:JavaScript+CSS优化的建议(3)
  • CSS制作网页实例:用CSS控制li标记样式
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1