你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash)。你所需要的是一个空的< span >标记的标题和应用使用CSS背景图像叠加position:absolute。这种方法已经在大多数浏览器测试:Firefox、Safari、Opera,甚至Internet Explorer 6。继续阅读本文找出。
 

VIEWDemos

DOWNLOADDemo ZIP

好处
这是纯CSS技巧,没有Javascript或闪光。它可以工作在大多数浏览器包括IE6(PNG黑客需要)。
它是完美的设计标题。你不必用Photoshop呈现每个标题。这将节省你的时间和带宽。
您可以使用任何web字体和字体大小是可伸缩的。
 
这是如何工作的呢?
关键是非常简单的。基本上我们只是添加一个1
px梯度PNG(alpha透明度)在文本。
 

HTML

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

CSS

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

  font: bold 330%/100% "Lucida Grande";

  position: relative;

  color: #464646;

}

h1 span {

  background: url(gradient.png) repeat-x;

  position: absolute;

  display: block;

  width: 100%;

  height: 31px;

}
这是它!你是做。点击这里查看我的演示页面。
 
使它在IE6上工作
自IE6 PNG-24呈现不正常,需要以下黑客为了显示透明PNG(添加<head>标记之间的任何地方):
!--[if lt IE 7]>

<style>

h1 span {

  background: none;

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');

}

</style>

<![endif]-->
jQuery预谋版本(语义爱好者)
如果你不想空< span >标记的标题,您可以使用Javascript预谋< span >标记。下面是一个示例使用jQuery预谋的方法:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  //prepend span tag to H1

  $("h1").prepend("<span></span>");

});

</script>

原文地址：http://webdesignerwall.com/tutorials/css-gradient-text-effect

转载注明：http://www.cnblogs.com/leejersey/p/3478096.html

CSS Gradient文字效果的更多相关文章

  1. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

  2. 纯CSS3文字效果推荐

    之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的 ...

  3. UGUI 文字效果实现（Shadow\Gradient\Outline）

    NGUI直接在UILabel组件中接入了Shadow.Gradient和outline选项,但在UGUI中是通过另外的组件单独提供,比如outline.shader等.这篇文章主要记录这几个文字效果实 ...

  4. css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  5. css鼠标滑过出现文字效果

    模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE ...

  6. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  7. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  8. Qt qml 模拟iphone slide to unlock 的聚光动画文字效果

    模拟iphone slide to unlock 的聚光动画文字效果    /底层放淡文字    /前景放高亮文字+半透明遮罩    /动画移动遮罩 Author: surfsky.cnblogs.c ...

  9. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

随机推荐

  1. linux清空日志文件内容 (转)

    随着系统运行时间越来越长,日志文件的大小也会随之变得越来越大.如果长期让这些历史日志保存在系统中,将会占用大量的磁盘空间.用户可以直接把这些日志文件删除,但删除日志文件可能会造成一些意想不到的后果.为 ...

  2. [搜片神器]直接从DHT网络下载BT种子的方法

    DHT抓取程序开源地址:https://github.com/h31h31/H31DHTDEMO 数据处理程序开源地址:https://github.com/h31h31/H31DHTMgr DHT系 ...

  3. Linux系统上安装Python

    1.下载Python安装包,官网下:http://www.python.org/getit/ http://jingyan.baidu.com/article/eae07827f7f2d01fec54 ...

  4. 关于Cygwin的x-Server的自动运行以及相关脚本修改

    常常需要用到远端服务器的图形工具,如果在windows端没用xserver的话,很多程序无法运行.一个特殊的例子,emacs在没用xserver的时候,是直接在终端中打开的,如果不修改cygwin.b ...

  5. Spring依赖注入 --- 模拟实现

    Spring依赖注入 --- 模拟实现 面向接口编程,又称面向抽象编程, 数据库如果发生更改,对应的数据访问层也应该改变多写几个实现,需要用谁的时候在service里new谁就可以了面向抽象编程的好处 ...

  6. 浅谈AndroidManifest.xml与R.java及各个目录的作用

    在开发Android项目中,AndroidManifest.xml与R.java是自动生成的.但是对于测试来说,非常重要.经过师父的点拨,我对AndroidManifest.xml与R.java有了更 ...

  7. grails中报Cannot create a session after the response has been committed异常的解决办法

    在grails中,我们在layouts\main.gsp中使用类似如下的代码来判断当前用户处于登录状态时显示相关的登录信息: <g:if test="${session.users}& ...

  8. 从高铁G18中高端如厕看12306的验证码

    1.引子 最近疯狂的吐槽12306网站的虐心验证码. 从对铁老大的一贯作风来说,这个事不过是芝麻绿豆的事情.这个事件只是因为发生在网络上,而引起了广大网民的一致谴责而已. 相信更丰富的如厕经历,大家只 ...

  9. 耳机jack构造及在应用时可能出现的问题

    目前市场上耳机分为4环耳机(图1所示,iphone型)和3环耳机(图2所示).4环耳机称为headset,3环耳机称为headphone,两者之间的区别就是4环耳机比3环耳机多个micphone.而J ...

  10. cocos2dx 内存管理

    转载自 ocos2dx 内存管理 - 小花原创博客 - 博客频道 - CSDN.NET http://blog.csdn.net/ring0hx/article/details/7946397 coc ...