CSS渐变文本效果的两种方法比较_经验交流


是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7^.^, 延伸阅读:Warning: An IE7 Auto-Update Is Coming Soon)

优势

这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6需要支持透明PNG的hack) 
这是完美的标题设计,你不必使用photoshop,这将大量节省你的带宽和时间. 
你可以对任何网页字体使用这种效果,而且字号大小也是可变的. 
他是如何工作的?

这个技巧很简单.我们只是简单的使用了1px宽的透明png覆盖在了文本上.

html

CSS Gradient Text

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

下面这个hack仅仅是让IE6支持透明PNG-24格式的图片.

<!--[if lt IE 7]> 
<style> 
h1 span { 
  background:none; 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); 

</style> 
<![endif]–>

jQuery生成版本

如果你不想在代码里有空的<span>标记, 那么你可以使用javascript来动态生成它. 这里是一个简单的jquery生产方法.

<script type="text/javascript" src="jquery.js" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  //prepend span tag to H1 
  $("h1").prepend("<span></span>"); 
}); 
</script>
DEMO打包下载

时间: 2024-11-03 22:44:35

CSS渐变文本效果的两种方法比较_经验交流的相关文章

提高CSS文件可维护性的五种方法总结_经验交流

1.分解你的样式  对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释.例如,可以分别将 全局样式.布局.字体样式.表单.评论和其他分为几个不同的块来继续工作.  而对于较大的工程,这样显然不会有什么效果.此时,就需要将样式分解到几个不同的样式表文件.下面的master stylesheet 就是这一方法的例子,它的工作主要是导入其他样式文件.使用这一方法不仅能优化样式结构,而且有利于减少一些不必要的服务器请求.而分解文件的方法就有许多种,master stylesheet 

ASP.Net中利用CSS实现多界面的两种方法_实用技巧

本文实例讲述了ASP.Net中利用CSS实现多界面的两种方法.分享给大家供大家参考.具体实现方法如下: 可以通过使页面动态加载不同CSS来实现多界面的效果: 方法一: 复制代码 代码如下: <%@page language="C#"%> <%@import namespace="System.Data"%> <script language="c#" runat="server"> publ

Android实现图片轮播效果的两种方法_Android

大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

js读写cookie实现一个底部广告浮层效果的两种方法_javascript技巧

下面一个案例使用js实现一个页面浮层效果,并且通过两种方法使用js读写cookie来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方式 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>

用JavaScript判断CSS浏览器类型前缀的两种方法_javascript技巧

不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作.这些前缀的用法有两种:在CSS里(例如"-moz-")和在JS里.有一个神奇的 X-Tag 项目里有一段很聪明的JavaScript脚本,可以用来判断当前使用的是什么前缀--让我来展示它是如何工作的! 比如 CSS 前缀,IE 的是 "-ms-",旧版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chr

Android实现轮播效果的两种方法

实现轮播效果有2种方法: (1)使用ViewPager+ImageView,通过Handler进行间隔发送消息,实现自动轮播效果 xml代码: <android.support.v4.view.ViewPager android:id="@+id/fragment_viewPager" android:layout_width="match_parent" android:layout_height="200dp" /> privat

gridview实现服务器端和客户端全选的两种方法分享_实用技巧

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="

ASP创建对象的两种方法比较_应用技巧

一.ASP创建对象的技巧      当我们使用服务器组件创建对象时,一般有两种方法.比较常用的方法是用SERVER对象的CreateObject() 方法,象这样:  SET NextLink = Server.CreateObject("MSWC.NextLink")  这种方法很好用,但是还有一种方法更节省系统资源.  当你用Server.CreateObject()方法创建对象时,对象立即被加载,同时系统为这个对象分配好内存和其它资源.  第二种创建对象的方法是利用HTML的&l

ASP、PHP根据时段切换CSS皮肤的代码的两种方法

一个网站能切换不同的CSS风格大家应该都了解,像众所周知的腾讯在今年改版时也增加了切换皮肤的功能.根据时间自动调整站点风格是不错的想法,这种根据时间自动调整站点风格也不是什么新鲜事,记得好久以前也见过类似的文章或方法,只不过当时没有特别注意.下面说一下它们的实现方法,目前网上有这样两种实现方法: 一.采用服务端的代码 ASP版本: <link rel="stylesheet" type="text/css" href=" <% if hour(